Responsive web design (Advanced colouring-in)

Responsive web design (Advanced colouring-in)
April 12, 2012 Rhys Harry

Reasonably Good responsive web designOne of many challenges we faced when designing our new website & blog was how to make them both look tip-top across the gamut of screens one can surf on. Gone are the days that we could layout a website to fit neatly into a 1024px wide screen & simply expand to fit anything larger.

Desktop & laptop monitors, anything from 1024px to 2560px wide. Tablets, landscape & portrait. Phones, likewise. In short, a minefield.

So, why subject ourselves to a mountain of extra graft when we could just make a thin-ish site that looks OK on everything? Because looking OK wouldn’t look very OK for a design agency, and with mobile web usage doubling year on year, not to mention tablet browsing catching up fast, before too long more browsing will be on iThings than computers.

Blog Site

We opted for different techniques for our main site & the blog, the latter uses a purely responsive web design approach meaning the same content is delivered on screen but the stylesheets (code that determines how things look) move, change or hide certain elements depending on the device width. You can see this in action by shrinking the width of your browser window until the contents re-jig themselves to fit, unless of course you’re already one of the 10+% reading this on a phone.

Reasonably Good Blog responsive web design

Main Site

For our main site we soon realised that responsive design wasn’t going to do enough. The amount of graphics, animation & general nonsense going on meant the site would take eons to load on 3G & the chances of anyone being patient enough to wait for our idea of funny stuff were slim.

Reasonably Good responsive web design

Crafty code determines what device you’re using before anything loads, for desktops & tablets it’s as you were but mobiles are shepherded off to a mini-site where (most of) the crazy crap is has been put back in its box & told to shut up. It’s not as visually appealing as we hope the main site is but in its own way is what good design is all about – getting the message across in the best way possible &, to coin a wanky phrase, being fit for purpose.

Your responses to our responsive stuff will be greatly appreciated.


Leave a Reply