Anyone have any tips on responsive design?

  marcustaylor 08:38 02 Aug 2012

I'm interested in making a page's design responsive so that it looks good on the iPhone & iPad but am a little bit stuck with the text boxes. I just wondered if anyone had any recommendations or examples of responsive design being used well - the best i've found is this site, but even after inspecting the source i'm still stuck! :(

  Ansolan 21:49 02 Aug 2012


A few searches should produce many pages online for this subject e.g.

Handy Tools

Responsive Examples

For a straightforward start, you could experiment with a framework such as:


Decent in the main, you may choose to combine stylesheets and worth keeping an eye on the screen break points, times change.

Or improve an existing site, as many non-specialist people have e.g.


Where even a quite simple, older static site can be made to offer reasonable mobile content with a few hours work using media queries. This is not a difficult technique at all. No reason for most site owners not to do this, otherwise many small device users just hit the back button.

  marcustaylor 07:33 03 Aug 2012

Thanks, these all look great! Enamelling looks really handy!

  LastChip 01:20 05 Aug 2012

Your VistaPrint example is not a responsive design. It's exactly the same width when it's in a full widescreen, compared to when you start to narrow the browser (about 956px).

The whole concept is based upon a fluid grid using proportions in place of fixed sizes. So for example, the whole width of your site may be 100% or less, but if it were less, you would have to use other elements to position the site on the screen where you want it.

To expand on that, if your largest screen size was 1920px and you wanted a site size of (say) 1280px, then the site width would have to be set at 66.666666666666%, to present it correctly. Clearly then, unless you created an element of approximately 16.667% to position to the left of the site body, your site would be off centre to the left of the screen.

Furthermore, you have to consider different screen ratios. If you design for widescreen, how's it going to look on a conventional screen, or indeed a mobile?

In addition, Internet Explorer (as always) is way behind the curve and some of the elements essential to get a proper implementation, fail in IE. Therefore, you need to use a javascript backup script to compensate for IE's shortcomings. So then ask, what if Joe Bloggs has got javascript turned off? So now you need to consider how to make the site degrade gracefully.

Responsive designs sound like a great panacea, and if Microsoft ever gets their act together, or people simply banish IE from use, one day it may be. In the meantime, don't run away with the idea it's an easy option; it's not.

It takes a lot of careful consideration, planning, testing and coding to make it work properly over the majority of browsers.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

iMac Pro review

See iconic duo Smith and Foulkes' epic animation for the BBC's Winter Olympics coverage

iMac Pro review

Idées cadeaux pour geeks et tech addicts