Responsive website design will help ensure you reach customers at every touchpoint on any device, says Rob Manning, managing director at Jacob Bailey
Designing websites that deliver brilliant user experiences is even more challenging in 2013 than it was in 2012, so we have to be more creative than ever. The way we access the internet has evolved dramatically. Screen sizes have been getting both bigger and smaller at the same time, and the popularity of smartphones and tablets has increased – as well as netbooks and large desktop screens. Orientation along with touchscreen technology has also evolved the way we interact with devices and websites.
As a result, our expectations around website functionality and design has dramatically increased. We now go online from wherever we are, and expect to find the information we need, book those important tickets or even pull up the map to find where we are going, instantly.
So, how can we ensure we deliver outstanding creative web design that guarantees brilliant experiences to all our visitors, regardless of browser, device and screen size, without building multiple websites? The answer is in the next evolution of web design – responsive website design (RWD).
Responsive website design is where the site adapts seamlessly to browsers, user-behaviour and screen size. But where do you begin in planning a fluid website?
1. Start with the audience
The first thing to do is think about who is using the site, when and what for. Running a few user testing sessions can give fantastic insight into your audiences’ online behaviour and a real opportunity to chat and test thoughts and ideas.
The research will enable you to put together an information hierarchy that matches your audience expectations, and how this changes based on devices and situations – two of the cornerstones of great web design.
2. Get the grid right
Strange as it may sound, one of the best ways to think about how your site will look is on paper. There are a range of downloadable wireframe templates for the popular desktop, tablet and smartphone screen sizes. The key is to remember you need to design to a fluid grid. This means you should position elements on the page first – rather than going straight in for the final design.
The insight from your audience will help place elements and information – starting with the most important first – and how this may change from device to device. This enables you to balance your page layout effectively to match user requirements and device screen size and orientation.
3. Build a HTML prototype
Paper sketches are a great place to start, but cannot portray the full array of grid layouts that can be achieved across devices and orientations, particularly as your audience resize their desktop screen. Asking your web development team to build a prototype gives the opportunity to road test your fluid grid layout, and look for any configurations that result in dead space, or where it just doesn’t work – before you have gone through the full design and build stage.
Having a prototype also gives you the opportunity for a little more user testing to know if you have got things right.
4. Getting creative
The other advantage to building a prototype is your web designer can also get a real feel for how the website interacts and works across all devices. This will help in ensuring a creative design is achieved that enhances the user experience and flows smoothly from pixel dimension to pixel dimension, and portrait to landscape.
Adding the creative design onto the wireframe-based prototype will bring the website to life and provide a sense of the final design.
Again, you need to think about certain elements on the screen in terms of both drawing visual attention to the most important aspects, as well as making sure elements retain their main purpose – for example, buttons look like buttons and are of a good size on a smartphone resolution for pressing.
5. Making imagery work
Another key element to achieving a responsive website design is to utilise adaptive imagery. This is where the website works out the best image size and resolution based on the browser and pixel dimensions – resizing and shrinking automatically.
To make this work best during the design you have to keep a close eye on image ratios, as the last thing you want is to have to upload multiple sizes of each image. Responsive website design, done well, should save time in management rather than create extra work.
There are a number of benefits to adopting a responsive web design approach. There are efficiency benefits, as you do not need to create or maintain two or three different websites, and there is also less opportunity for inconsistency errors across desktop and mobile website versions, which will help build trust in your overall brand.
Your customers can share URLs with each other from different devices and you will be safe in the knowledge that a new visitor will see the website in the right format, rather than having to zoom in, or see images blown up out of scale, or at a poor resolution.
Responsive website design is another step to making sure all your customers and prospects have a brilliant user experience when visiting your website at the first, and every touchpoint.
