10 Best Practice Responsive Design Guidelines
14 January 2016 |
About a 4 minute read
What is responsive design?
Responsive design is the art of crafting an optimised website viewing experience across a wide range of devices. Here are 10 best practice design principles to get you started on creating an incredible web experience for your users.
1. Mobile First
User experience (UX) on a mobile is more important than UX on a desktop, since your consumers are more likely to view your webpage on a mobile. Build your responsive design for mobile first, then extend that design to fit larger screen sizes. If you designed for desktop first you will struggle to cramp your content into a small screen.
2. Understanding Media Queries
Media queries are the driving forces behind responsive design that allows content to respond to different screen sizes. It does this by checking a device’s resolution, height, width, and orientation to adapt the layout of the content to the screen.
3. Put your consumers first
Consumers interact with websites differently on a mobile than they do on a desktop. It is important to find out why consumers are visiting the website on mobile. They may want to find a particular piece of information via the search bar. If this is the case than the search bar should be highly visible and easy to access throughout the website.
In 2014, 64% of smartphone users expect a website to load in under 4 seconds. Images should be optimised for mobile so they don’t drag the responsiveness down. This can be done easily in photoshop by reducing the resolution and quality of the image. It is wise to check response times on 3G/4G networks as well as WiFi.
5. Less is more
Remove excess and duplicate elements to improve UX and speed. A cluttered UI will not be pleasant to look at or easy to navigate. Giving the consumer too many options can negatively impact the experience, making it more difficult for the consumer to find what they are looking for. Examine the UI and ask yourself whether you really need that element and why. If you cannot justify an element to keep, remove it.
The hamburger icon is the ‘3 line’ menu button located at the top of a mobile website. This single button will unclutter the webpage from several links. But if the consumer must always tap the icon to see menu options then it becomes tiring. If you make the most popular menu items visible you can save consumers from an unnecessary tap. Another consideration is to have the best of both approach where popular links are located on the webpage and less popular webpages hidden within the hamburger menu.
7. Make it readable
Make your text large enough to read from a small screen without making the consumers squint or pinch to zoom. The minimum text size for mobile should be 16px/12pt.
8. Easy to tap
Making buttons easy to tap on mobile saves the consumers wasting precious seconds clicking on the wrong button or zooming-in to tap the button. The minimum button size for mobile should be 44x44pt for comfortable tapping. A quick tip is to use padding instead of margins. Padding increases the tappable area but margins increase the white space around the button.
9. Screen Orientation
Your responsive design should work on a portrait and landscape orientation on mobile. It is important to ensure your images do not stretch, text is not squashed, and the content loads properly on both orientations.
If there is a lot of text on your webpage then there will be plenty of scrolling. To eliminate long scrolling use expandable and collapsible elements to give the consumers the option to see only what they need to see.
Responsive design makes it easier to view a website no matter what the size of the screen. This guide will save you making the great rookie mistake of designing a website for desktop before mobile. Limitations spark creativity – start on a small canvas then expand, not the other way around.
Senior Full Stack Developer (London)
Champion software quality and technical vision for AND and our clients, work on large-scale projects and help junior and mid developers grow in their roles.I'm Interested
Full Stack Developer (London)
Put your development expertise to work, building remarkable, digital products in Agile environments using a variety of languages and frameworks.I'm Interested
Tech Lead (Reading)
Bring your expert tech knowledge to the table to influence the direction of projects, whilst coaching and your team through engineering best practices.I'm Interested