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?


marcustaylor

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
Ansolan

Likes # 0

Hi

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:

Skeleton

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.

Enamelling

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
marcustaylor

Likes # 0

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

Like this post
LastChip

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

New iPhone 6 review: best ever iPhone is very good... but no longer the best phone you can buy

IDG UK Sites

Is Apple losing confidence in itself?

IDG UK Sites

Professional photo and video techniques for perfect colours

IDG UK Sites

How (and where) to buy an iPhone 6 or iPhone 6 Plus in the UK. Plus: What to do if you pre-ordered...