We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message
Contact Forum Editor

Send an email to our Forum Editor:

PLEASE NOTE: Your name is used only to let the Forum Editor know who sent the message. Both your name and email address will not be used for any other purpose.

Tech Helproom

It's free to register, to post a question or to start / join a discussion


Anyone have any tips on responsive design?


Likes # 0

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! :(

Like this post

Likes # 0


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.

Like this post

Likes # 0

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

Like this post

Likes # 0

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.

Like this post

Reply to this topic

This thread has been locked.

IDG UK Sites

Best camera phone of 2015: iPhone 6 Plus vs LG G4 vs Galaxy S6 vs One M9 vs Nexus 6

IDG UK Sites

In defence of BlackBerrys

IDG UK Sites

Why we should reserve judgement on Apple ditching Helvetica in OS X/iOS for the Apple Watch's San...

IDG UK Sites

Retina 3.3GHz iMac 27in preview: Apple cuts £400 of price of Retina iMac with new model