SimonCox.com

Version 7.3

Responsive web design

by Simon Cox
Simon Cox, Author

Topic
Web

Respon­sive Web Design iphone screen shot of simon​cox​.com 2011
Responsive web design has been emerging as a way forward over the past two years. Following inspiration from the way Simon Collison's crafted his personal website I have now implemented a Responsive Web Design on this, my personal website.

This site now uses responsive web design - go on, resize you browser!

Until you look at a web­site on sev­er­al dif­fer­ent plat­forms you may have no idea that it is using respon­sive web­de­sign. How­ev­er you will know pret­ty quick­ly if it doesn’t — if your on a small screen and you have to zoom or scroll hor­i­zon­tal­ly then it’s not responsive.

The cre­ation of the 960 grid was a great leap for­ward for mass web design, allow­ing design­ers to utilise tra­di­tion­al grid struc­tures for easy page lay­out, but with the emer­gence of smart phones and tablets web­site needs changed quick­ly and 960​.gs wasn’t flex­i­ble enough — although a flex­i­ble ver­sion has since emerged. Stan­dard­i­s­a­tion is what lifts a cot­tage piece work into indus­tri­al strength pro­duc­tion and we are going through the ear­ly stages of the dig­i­tal rev­o­lu­tion in much the same way that the Geor­gians and Vic­to­ri­ans went through in the Indus­tri­al Rev­o­lu­tion. There is still a place for the indi­vid­u­al­ly craft­ed web­site but our indus­try is mov­ing toward mass pro­duc­tion — that’s not a bad thing. Have a look at the sites now using 960​.gs — and you will see its not the lead­ing edge web design­ers but the big mul­ti nation­als. Stan­dard­i­s­a­tion rules!

The idea that your web­site should look the same on all browsers was been shot down a long time ago and the same has exist­ed a long time for plat­forms but pre­vi­ous­ly most sites that have catered for mobile have used plat­form detect meth­ods to deliv­er dif­fer­ent CSS lay­outs. That’s not ide­al espe­cial­ly as today we are see­ing an emer­gence of a huge range of screen sizes because of all the iPad killer tablets com­ing out. Despite desk­top screen get­ting huge these days we actu­al­ly now have to cater for a big­ger range of win­dow sizes then ever before and we also need to dou­ble that num­ber because most mobile devices now ori­en­tate the screen to the way the user is hold­ing it. There­fore we real­ly do need a stan­dard design grid and ways of work­ing that are tru­ly flexible.

For the simon​cox​.com ver­sion 6.4 web­site I have used the Skele­ton grid for my respon­sive design — though truth be told there is a lot to do design wise of this skele­tal look and feel! Hat tip to MrQwest for find­ing Skele­ton. It may not be what I am using in 12 months time but it has the lev­el of com­plex­i­ty that I need­ed to make the transition.

On resiz­ing your brows­er (I am sup­pos­ing you are on a desktop/​laptop) you will notice that the site goes through sev­er­al siz­ing tran­si­tions. It snaps to pre­de­fined min­i­mum and max­i­mum col­umn sizes retain­ing a sem­blance of the pro­por­tion­al grid lay­out. Order of con­tent in the html is vital as when you get to the small­est size, to accom­mo­date mobiles, the order real­ly shows — there is one col­umn with con­tent blocks ver­ti­cal­ly fol­low­ing each other.

Twist­ing the ori­en­ta­tion around on the iPad you might not even notice that the grid has changed due to the way that Skele­ton changes the lay­out accord­ing to the avail­able viewport/​window size. This is all rel­a­tive­ly straight for­ward but one item that is going to roy­al­ly burg­er up your respon­sive lay­out is images. Nor­mal­ly images are a set height and width as they are ras­terised images based on pix­els. Enlarge them too much and the pix­els show — not nice — shrink them too much and you are wast­ing band­width — you could make the image much small­er than what you need it for. This pos­es a bit of a prob­lem. I turned to Ethan Marcotte’s Flu­id Images arti­cle (hat tip to the Mr Rut­ter) for the answer and all seems well.

As ever the design you see today prob­a­bly isn’t quite the one that was live when I wrote this piece which is why I have start­ed num­ber­ing them. Ver­sion 6.4 is a rough guess at the many ver­sions of this site since 1996. I con­stant­ly tweak the design, lay­out and back end when I real­ly should be writ­ing arti­cles worth reading!

Respon­sive Web Design iphone screen shot of simon​cox​.com
Respon­sive Web Design iphone screen shot of simon​cox​.com

And there is more...

8th June 2011 and Eathan Marcotte’s Respon­sive Web Design has been pub­lished by A Book Apart. Whilst most of what he has writ­ten is not new to me I think I will be using this book as a ref­er­ence point for a few years to come — it’s superb, very well writ­ten and marks a sea change point in approach­es to design­ing and build­ing web­sites. There is a great arti­cle, part of the book, on A List Apart — Flu­id Images and I encour­age any­one think­ing of build­ing a new web­site to read this and then the book (which inci­den­tal­ly I have been read­ing on my iPhone, iPad and iMac as an eBook).

9th June 2011 I have fin­ished read­ing Respon­sive Web Design and the big take away is design for the small screen first and then add on addi­tion­al con­tent and lay­out as the screen sizes go up. Very inter­est­ing read and a whol­ly new approach to web site design. OK rea­son­ably new approach as some folk have been expound­ing on mobile first for quite some time but I sus­pect that most of us think of mobile ver­sions of web­sites, this method uses the same site and con­tent for all devices though it is com­plex and I would like to see some emerg­ing best prac­tices that don’t rely on putting html code in JavaScript to dis­play to those with JavaScript — it works real­ly well in the fact that it degrades well for those with­out JavaScript but is clunky way to imple­ment. I am think­ing on how to deliv­er more con­tent based on media type with Expres­sio­nEngine as it would be bet­ter to keep the alter­na­tive html in sep­a­rate tem­plate files pulled into the JavaScript. Any­one with any ideas on this com­ment or tweet me please!

20th June 2011 I changed the intro text as Simon Collison’s web­site is in fact an Adap­tive design, not a Respon­sive design — though it’s a sub­tle but impor­tant difference

22nd July 2011 John Faulds writes about respon­sive images and how to make it hap­pen in Expres­sio­nengine — over at john​faulds​.com.


Comments