Responsive Design and code

responsive@2x

The term “Responsive” in the realm of websites is flying around all over the place. In short it is a method of making a website adjust to a users available screen size to deliver an optimal experience.

Depending on your websites primary conversion objectives it is worth having a good think on what someone checking your site on their iPhone (other smartphones are available) is likely to be trying to achieve. Are they just trying to very quickly find your postcode for their maps app or satnav? Or, taking some time to read an article they had previously bookmarked on the train. One things is for sure, they wont want to wait too long for the site to load, which in our 3g world can be an issue. 4g and cheaper bandwidth costs in the Europe could change all that.

A very common web design process is the use of Photoshop to create static design mockups of the website, usually at a general desktop or laptop resolution. These are eventually agreed on and signed off by the client. Then the files go to a front end developer who turns them into code as close as she/he can get them. The usual cross browser issues often cause the first seed of doubt with the client who looks at them at work in Internet Explorer where it doesn’t look quite like it did in the static mockups. Then the client has another look at home on a tablet and it is different again. The list of device, screen size and browser options is almost endless. Now the client thinks that it isn’t being done properly because they have been sold the static photoshop file and what they have got is many variations on it.

 

I prefer to work with “elements” of design and not get too caught up in the specific layout to early on as that is changeable. As well as building style sheets. If clients are introduced to this early on in the design phase, whilst it seems less definitive and is (here is the crux) harder to set billable targets against, it doesn’t miss sell anything. Websites are NOT print media, things are interpreted differently, by browsers and screens, we don’t know how anyones screen renders colours.

For some clients I will often only map out some very specific visuals and will do the bulk of the design live on the website, in many ways this can be the best and most cost effective approach. Andy Clark has been banging on (quite successfully) about this for years http://www.stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals

Samantha Warren proposes the style tile technique http://styletil.es/ and Matt Griffin wrote a good article on a more flexible design approach here on A List Apart http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups

This entry was posted in Work. Bookmark the permalink.

Modified: December 3, 2013

Leave a Reply

Your email address will not be published. Required fields are marked *