New Responsive Website Design

NEWSPosted 17/07/2012

Today I've launched a new design for my site and taken the opportunity to do something I've wanted to for a while - it's gone 'responsive'. But what on earth does that mean?

Put simply responsive website design is all about producing a fluid layout, one that automatically re-organises itself depending on the user's device. So, if they view it on a desktop it looks one way and if they view it on a mobile it changes to best fit that device. If you're on a desktop now you can see it in action very simply by making your browser window narrower. You'll see as it gets smaller that eventually it will reach a point where it flips to an alternative layout, better suited to smaller screens such as mobiles. You'll get a new navigation bar at the top and the content will flow into a single column layout.

But what's the point? Well, the benefit of this is that it scales well and only requires one design - no matter what device you're on, no matter what size screen you're on, the site should still flow well and look nice. At least that's the theory. Of course it's impossible to test on every possible device but I've taken a look at the site on everything I have available to me and it works a treat in all cases.

In addition I've also integrated some changes so if you're looking at this on a retina display such as an iPhone 4, iPad 3 or retina Macbook Pro, you'll get nice high resolution social icons throughout. Content imagery isn't served at high resolution yet, but I'm working on that. And of course the fonts will look pin sharp on those devices.

If you're the geeky type, I used the Foundation framework by Zurb to make the site responsive and it's only taken around 3 days to achieve including playing with different layouts to get a design I was happy with. It's been really easy to go responsive with that framework and I'd recommend it to anybody looking to go down this route.

Keywords: news  design  website  responsive 
comments powered by Disqus