An introduction to responsive web design
A guide and introduction to the world of Responsive Web Design (RWD).
Author: Kris Jeary
Published: 15th February 2013
If you have any comments on our articles, send us your thoughts on Twitter.
So what is responsive web design? To put it bluntly, the future.
The long running headache for web designers is designing without knowing the size of the canvas you are working on, this has only been exacerbated in the last few years with the introduction of truly smart phones.
Issues & Considerations
The earliest method deployed, to deal with this newcomer, was to create a separate mobile site, increasing development costs as well as time spent maintaining two websites.
Then we had the tablet explosion which blurred the lines between the traditional desktop machine and mobile devices. Add in to the mix the increase in people being able to browse the web on their televisions and it gives us a huge range to cater for.
But also consider how users interact with these devices and it becomes apparent size isn't the only consideration, the distance the user is from the device is also vital.
Mobiles are held in front of faces, tablets on laps, desktop machines are further away and televisions can be on a wall many feet away.
There is also the connection consideration and catering for devices potentially being used over slower public connections (such as 3G) and with a data usage limit.
The Responsive Solution
So there's the problem, the solution is beautiful in its simplicity, create a single site which will adjust and scale depending on the device it's being viewed on.
Try resizing your browser on this site, or better still take a look on a mobile, or a tablet and see how the content readjusts itself to best fit and make sense on the various devices.
On larger devices the site displays with all it's bells and whistle, in full glorious Technicolor™.
When we get to tablet size the portfolio images reduce and we put fewer in each row to ensure they can still be visible and large enough to tap.
Mobile is the biggest change as we reduce the number of highlighted portfolio pieces and also go to a single column approach. The font size is also larger and the menu redesigned.
This is still the same page, with the same code behind it, just displayed differently.
Have a play around adjusting the size of your browser right now and you'll see it in action.
A note on "mobile first"
There are a notable number of designers advocating a "mobile first" approach. This means designing at a mobile size to ensure the site contains everything on smaller devices and there are no big compromises for mobile visitors.
It's certainly a philosophy which has its merits and is a valid way to ensure the smallest devices can access everything core to a site and deliver a beautiful experience, which isn't the poor relation.
No matter the approach, the results need to be beautiful and appropriate for the device. Don't accept boring, templated, mobile designs. 21% of recent visitors to my website (January 2013) used mobile size devices, a huge chuck which simply can't be ignored.
Let's get used to this now, the web isn't only accessed from desktop machines and this is a trend which isn't going away. Let's not tell visitors how they can access your site, they are the customer.
Most popular articles
- Designing for the Elderly
- Reverse Engineering the Squiders Website
- Working within Accessibility Guidelines
- Mobile eCommerce - Tips & Techniques
- The Importance of Photography in Web Design
Or you can view the complete list