Responsive Web Designs

Posted On: 2012-06-07

So Google is now talking about responsive web designs in their latest post on the Webmaster Central Blog. I guess that means that responsive web design is reaching the point where we need to know something about it.

In case you haven't heard about responsive web design before this let me tell you that it's all to do with mobile devices and building websites that can easily be viewed on mobile devices without the need for users to zoom or pinch or do anything other than look at the screen.

Now that sounds all well and good and with more and more people accessing the web via mobile devices you can understand why building a website that looks good on a mobile device is important but ...

The big but is making sure that the size also looks good on a normal desktop monitor so what we're talking about here is building something that looks wonderful at a resolution of 1000+ pixels wide and at the same time looks good and is easy to read and navigate at just 240 pixels wide. That sounds great doesn't it? Build one site and have it work on all screen sizes.

But therein lies a huge challenge for us here in adult. We build a site complete with banners that looks great on the big screen and we incorporate responsive web design so it should look good at 240 pixels wide but does it? What happens to those banners? Do they degrade gracefully but are still readable?

Perhaps it's time to have a closer look before you jump in and embrace responsive web design and a good place to look is at the demo of a WordPress theme that has been designed to be responsive ... you'll find it at buttercream-demo.calobeedoodles.com.

Look at it first on your PC or laptop and then make the effort to type that horrible URL into the browser on your cell phone and look at what happens to the images. Now imagine what your banners would look like if you were relying on responsive web design to make your marketing sites visible on all screens.

Of course there are a lot of people out there who are suggesting that we should be embracing responsive web design and casting aside everything else. Responsive web design is the answer and anyone who builds one site for PCs and laptops and another for mobile devices is living in the dark ages ... but are we?

It's one thing to be a web designer who likes to teeter on the cutting edge and another to be a webmaster who makes money from the websites that they build. And for once Google seems to recognise that there may be a real need to develop one site for the big screen and another for mobile devices because they talk not only about responsive web design but also about best practice for having device-specific redirects on your website.

However, if you're keen to try responsive web design for yourself here are some links that you might find useful.

Responsive WordPress themes
If you're using WordPress as a content management system for your websites .. and that's not such a bad idea ... then you will find that there are more and more themes beginning to appear that claim to be responsive and some of them are even free.

Obviously you'll find them listed on the WordPress site but don't just jump in and use any of them without testing them first. You may find that some of them are not quite as responsive as others.

Build your own responsive sites
If you want to build your own responsive websites without relying on WordPress then you can save time by starting with someone else's set of CSS and HTML files and there are at least several available online.

The two that I know of can be found at getskeleton.com and thatcoolguy.github.com/gridless-boilerplate/. I note that at least one of those sites suggests that their files will help you design "...future-proof responsive websites ..."

Hmm maybe they will but then again things change and when the future arrives you may find that your responsive website looks like a dog's dinner.

Testing your responsive websites
One of the biggest hassles for mobile device users is typing in the URL ... so there has got to be a better way of testing your responsive websites than by looking at them on your own cell phone ... and there is.

Head over to mattkersley.com/responsive/ and you can test your new website design across a range of screen sizes. And of course there's always the W3C validator for mobile devices at validator.w3.org/mobile/ ... just be prepared to be told how badly you suck at website coding.

So there you go ... if you want to try some responsive website design there are the tools to use and something to think about as well.

Personally I want to do some testing to see how things look before I jump onto the responsive web design bandwagon ... it might be good for some websites but if you want to make money it may not be the easy solution many think it is.