At last, yesterday evening, I created this responsive site. Fasionably late, as always, I finished this design, economically using media queries, flexibel columns and a baseline grid. In recent years I usually kept my designs inside a 960px wrapper to let it fit a 1024px landscape oriented tablet, but being able to resize the browser windows from 320px to a full 1440px does bring a smile on your my face.
Of course there is nothing new about building fluid designs. There exists an old ‘Fluid vs Fixed’ debate, from the time before screen resolutions were as varied as they are now. To keep it short: because of the controll over the appearance of the layout the disputable outcome often would be ‘fixed’!
But now we carry along – and heavily use – our mobiles, our handhelds and tablets (we keep changing the orientation just for fun), netbooks, notebooks, and we started using the enormous Big Brother in the living room.

Enter the media queries. To quote the W3C Candidate Recommendation page:

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

When starting any research on responsive design all fingers are pointing at Ethan Marcotte’s – A List Apart Article – Responsive Web Design. And understandably so, although googling the term gives you an abundant list of solid essays and case studies.

Naming Mr. Marcotte “the father of responsive web design” – as I have read somewhere – sounds a bit theatrical to me, though. See for example Marc van den Dobbelsteen – A.L.A. Article – Switchy McLayout: An Adaptive Layout Technique: whatever the technique, the idea was (and is) described as “we just define layout and appearance for a series of screen-width ranges, then find a way to match these layouts with the user’s viewport size”!

So I pottered this new place, incorporating as many media queries/CSS3/HTML5 code, features and tricks as possible. This resulting in a mishmash, cluttered with columns all stretching from a 25% to 33.333333333333333% to 50% to 66.666666666666666% to 75% to 100% width. Naturally I invented as many media query break points as possible … and kept resizing my browser windows like a hinny. Only after I implemented some multi-column elements as well, trying to create an ultimate show off, I hit the breaks!

Then I published my one column (max-width: 40em) WordPress theme, allowing as much white space as possible: the opposite side of The New York Times, to be more precise! I even shook off my addictive longing for a big banner image, on the homepage that is. Never made a more modest mockup!

I will start writing (more) about design and code and some other miscellaneous topics. For now I’ll leave you with my very own Lorem Ipsum default model text I’m not talking about your pigtails.