I have this idea for an instapaper plugin, it would count the number of words read by you per day on instapaper. I read a lot, how much I’m never to sure as it’s all on the web, as a stats junkie it would be interesting to see just how much I actually read in a day.

One downside of spending all that time reading is after a while everything looks the same, single column, small text, slightly not enough contrast. Even sites that look awesome and have obviously spent massive amounts of time designing a seriously impressive look and feel, every article looks the same.

Now there are a few people out there, like Jason Santa-Maria who takes the time and care to art direct every single article on his site. Impressive, and a genuinely impressive feat. How do you replicate it if you are not a graphic designer who can hand code to some extent the CSS or HTML of each page? Some time in 2010 I worked on the redevelopment of the Ginzola site. Using some simple chained CSS classes we managed to produce an adaptable layout system. Each news article, or page, can have a different layout for the various elements. Could we ship this on a customers site, NEVER.

Could we ship this on a customers site, NEVER.

I could never imagine asking customers to “just select div, then the CSS classes you need to position it”, most of them have enough issues copying and pasting content from a Word document. We need something more simple, easier to ship while still providing interesting layouts.

John Cowen got me thinking about using CSS pseudo selectors like :first-child, or :hover is a good example. With the bigger adoption of CSS3 we get access to a wider selection of pseudo selectors to make the content more interesting and easy on the eye.

This isn’t supposed to work cross browser, for this site I’m making the decision that if you don’t have a browser that makes the web look good, you probably don’t care that line lengths are way to long. I can also afford to make that type of arrogant decision as 97.5% of site visitors are me, and I don’t use IE. What we do have is a simple drop down box to enable the selection of article styles, at the moment we have, Big Lead, Columns, and Standard. You can probably guess scrolling round down the homepage which is which. Structurally every element in an article is a paragraph, list, blockquote or image. No div no classes on any elements inside the articles bounding div where the article style class is applied.

Structurally every element in an article is a paragraph, list, blockquote or image.

Does it work?

Yes and no, I like the concept, I just need to spend more than 20 minutes on the typography and the layout of the articles. The smaller items are content that I want to link to, but don’t warrant more than a paragraph of text, the titles take you straight to the linked content. I’d also like to make more of the layouts, maybe get some input from someone who actually knows about typography.