Responsive website design (or adaptive as it can be known) is a relatively new web development technique in which the layout of a website changes according to the size of the screen it is being viewed on. This means that the one website can be optimised for mobiles, tablets and full-sized monitors (and whatever else might be coming in the near future). You can try it yourself with this very page – just try resizing the screen and you’ll notice the content changes and sections move around. The BBC have also recently revamped their responsive website here.
It’s been obvious for a while now that mobile internet use is on the rise – in fact some estimates suggest that as early as 2013, more people will use mobile devices to access the internet than desktop computers. It’s equally obvious that modern website owners need to think about accommodating mobile users.
Responsive Vs Mobile Websites
Until recently accommodating mobile users meant creating a separate mobile version of your content, which is fine and even preferred in some situations. However, with more and more visitors using tablets such as iPads and smart phones like iPhones, and connecting over faster networks (and even WiFi) the line between desktop and mobile browsing has become somewhat blurred.
We’ve recently built several responsive design projects recently and also just updated our website to become responsive.
You can still view our old mobile website here to see the difference.
Developers: CSS & Media Queries
Responsive design is achieved via CSS media queries. If you’re interested in seeing how ours works, view this page source and check out the media-queries.css file. In general we’re using 3 generic break points and also specifically targeting CSS for the iPad and iPhone. There is no specific rule on how many breakpoints a design should have. The rule of thumb is to make sure the design and content flow nicely on any viewport width.
So Should I Go Responsive?
Chances are your site will work just fine on mobile and tablets as it is if it’s been built well in HTML. It’s worth considering whether or not your mobile users want different content to your web users, or if your website is full of functionality and interactivity, in which case you may be better off developing a separate mobile website. Otherwise, go responsive…
If you’d like to enquire about making your website responsive, drop us a line or add a comment below.