SimonCox.com

Version 7.1

Responsive web design

by Simon Cox

2011-05-31

Articles
Web


Responsive web design

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!

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.

Responsive web design Gallery

Other articles in this topic

A first look at Safecont content quality analysis SEO tool

Review of a new tool from Data elasticity S.L in Spain that analyses the quality of your websites content Read more about A first look at Safecont content quality analysis SEO tool

How to find insecure pages in your site before Google start penalising them

Google will be highlighting all non-secure sites from July 2018 meaning that the Insecure Content Report of Screaming Frog will be in use a lot over the next few months - I will show you what to do. Read more about How to find insecure pages in your site before Google start penalising them

How I add canonicals into Perch CMS sites

The Canonical link in a page's header lets the search engines know where the original page resides. Originally conceived for situations where articles were duplicated they would reference the original. Google tends to choose the oldest version of a page that it can find (but not the only method it uses) and any other pages with the same or very similar content are considered duplicates and will not do a well on the Search Engine Results Pages - SERPs and we want our pages to do well there for the traffic. Read more about How I add canonicals into Perch CMS sites

Using a CDN to help migrate your sites hosting

Moving a site to new hosting can be fraught with issues. Here is one technique that I find useful when moving to a website to a new hosting server. Read more about Using a CDN to help migrate your sites hosting

EU cookie consent law largely ignored

The EU has give the UK until May 28th 2012 to comply with the cookie consent law - how many of the organisations pinpointed by the ICO have met the deadline? Read more about EU cookie consent law largely ignored

HTML Test Page for CSS Style Guide

This content is used to test that css has been covered for all tags used in content. Read more about HTML Test Page for CSS Style Guide

EEUK11 report

The UK's first ExpressionEngine conference has taken place in Manchester in August 2011. I provide a report on the event itself and the surrounding activities. Read more about EEUK11 report

Assets for ExpressionEngine

Assets is a new file management add-on for ExpressionEngine and brings a new way of managing assets in your website. I installed it and built a simple image Gallery. Read more about Assets for ExpressionEngine

WebFonts

With HTML5 finally emerging from the primordial soup I thought it was time to have a look at where we have got to with fonts on the web, what today's techniques are and what is new in the world of the digital hot metal. Read more about WebFonts

Nibbler

Online testing suites are a very useful way of checking your website to see if it's up to scratch. I take you through Nibbler from Silktide. Read more about Nibbler

New look for 2010

I have finally taken the plunge and updated the site and have switched over to ExpressionEngine. Read more about New look for 2010

Comments