It’s no secret that smart phones and tablets have replaced desktops as the primary mode of accessing the web. Between December 2013 and December 2015, the number of people browsing the web on mobiles increased by 78%. Today, figures suggest that mobile devices account for nearly 2 of every 3 minutes spent online. Having a website that is mobile friendly is no longer an option – it's a requirement. But what are the 5 key areas should designers need to consider when designing a responsive website?
What is responsive web design?
“Responsive design” is no longer a buzzword used with the digital world. A word first used by web designer Ethan Marcotte in 2011, responsive design is method used to describe sites that automatically respond to any device by re-organising its content. Google has made it clear that websites should be mobile friendly and have changed their search engine results to reflect this. Priority is now given to sites that are responsive, so if you value your search ranking on Google then you better consider investing in a responsive website.
1. Adopt a “mobile first” approach
When designing a responsive website, designers should consider adopting a “mobile first” approach. Also known as progressive enhancement, this approach is exactly as it sounds. You start with the mobile site then scale up to desktops. By adopting a mobile first approach, designers quickly realise that designing for mobiles is not the same as designing for desktop. It focuses your attention on what really matters -the content. Designers are forced to overcome constraints, in terms of space, file size etc, at the beginning of the project, not at the end. Mobile is no longer regarded merely as an afterthought. It may mean that you work harder at the beginning of a project, but it is much easier to create a mobile experience first then layer in complexity for larger screens. Scaling up to desktop should be relatively straightforward.
2. Prioritise content in a clear hierarchy
Prioritising content is essential to responsive design. A clear arrangement of content provides a better user experience. It is important to create low-fidelity wireframes to help define the content structure of pages at the beginning of the process. Designers should always keep in mind how content will look on mobile devices. As a result, important information should be positioned at the top of page designs.
3. Design for touch screens
One common mistake designers make when designing responsive sites is failing to consider touch screen devices. If you’ve adopted a mobile first approach this shouldn’t be a problem. It is important to ensure all CTA buttons are of an adequate size (no less than 40px in height), and are not placed too close to each other. Don't rely on hover and mouse over effects to reveal key content, they simple do not work on mobile devices. Instead use interactions like swiping.
4. Navigation
Navigation can be one of the most challenging aspects of responsive design. Large, complex menus used on desktop websites simply don't scale on mobile. So it’s perfectly acceptable to a consider having a different navigation for mobile sites. However, it is important your navigations have a similar feel. This could be visually or functionally, don't neglect consistency.
5. Test on a real device
Of course, once you’ve designed your responsive site, is vital to test it. We advise to start testing your site as soon as possible and keep doing so through out the process. Don't just rely on resizing your desktop browser to check your designs. Make sure you test your site on a real device.
In a nutshell…
These days, everyone is using their mobile to access the Internet and never before has it been so important for web designers to understand the importance of ‘responsive web design’. I hope this article clarifies what responsive web design is, and how to avoid 5 common mistakes designers make when designing a responsive website.
