This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Carry On Responsively

16th July 2010

Whilst my days are mostly spent chained to the desk, my blog is out there throwing it about. Never more so than the last few weeks, now that it’s wearing all this new-fangled responsive design stuff under its drawers. Well, I think it’s “adaptive”, not truly responsive, but anyway.

Big Web Harlot

Take late June, for example. To my surprise, there it was—my site—tarting itself all over episode nine of The Big Web Show like a common hussy. Voyeuristically, I watched as Messrs. Zeldman, Benjamin and Marcotte fawned over it’s newly-installed adaptive charms, whilst I was sat here earning a living. Same for poor old Jon Hicks. Whilst he was up at the mill grafting, Hicksdesign was flaunting itself on the same show, happily flashing its media queries to anyone who cared to look. The floozie.

large

Hot magazine action

Fast-forward to mid-July, and issue 205 of .net magazine has just landed on the cat (which is it’s own fault for sleeping by the front door). As usual, I’m too busy to sit and read the magazine properly, so I do a quick skim, which is a sort of “will I actually read it this month, or will I forget again because nothing is immediately grabbing me” exercise.

And what do I see? My site. Again. This time it’s that Aaron Gustafson chap, literally pimping my site out to all and sundry across four pages of hot kiss-and-tell media query exposé. The cad! It’s disgusting. There is mind-boggling iPad-on-iPhone action with every page turn.

medium

But it feels so good…

Ok, I admit it. I knew that Gustafson had in fact propositioned my site a few months ago, seducing it with tantalising offers of yet more fame and notoriety. Apparently, due to it’s rigid grid structure, it was ripe for turning into a very flexible website that would assume the appropriate position for any device it encountered. Shocking.

So, Gustafson had his way with it. Over several days he forcibly manipulated the layout with CSS media queries, and in turn created initial dynamic layouts for certain desktop browser widths, and various orientations of iPad and iPhone. Then I had a go on it. He sent me the stylesheet, so all I had to do was fiddle with it a bit until the layouts worked for all my pages.

small

So, I’m just as guilty, truth be told. I’ve published various shots from every angle on this Flickr redesign set, and actually feel somewhat proud of my site’s responsive leanings. I’d go so far as to encourage everyone to take a peek at media queries, and get a good grasp of responsive design.

Go on, you know you want to…

If you think you can handle it, you should take a sneaky peek at Marcotte’s responsive design article, try out my site and also Hicksdesign on all your Apple devices, watch episode nine of the Big Web Show, and read Gustafson’s four-page in .net magazine.

net magazine

It’ll keep your relationship with your website fresh, and breathe new life into how you grow old together. If you love something, set it free.

Responses

3Easy

# 3Easy responded on 16th July 2010 with...

Sourcy bastards. The lot of ‘em.

Aaron Gustafson

# Aaron Gustafson responded on 16th July 2010 with...

Excellent write-up Colly. Thanks again for letting me use your site as a guinea pig!

Michel

# Michel responded on 19th July 2010 with...

Super-cool! I am just reading…

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

And your example is quite good, too!

Now goodbye—I have a lot to learn and read about media queries… ;)

Guy

# Guy responded on 22nd July 2010 with...

Roger’s Profanisaurus has been using some of your copy too.

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 809 Next

Superfluous Aside

Archived in HTML & CSS, Design & Web

This post's Short URL is http://col.ly/s/809

There are 4 responses

External References

Copyright © Mr. Simon Collison 2003-2014. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.