Article

10 Best Practice Responsive Design Guidelines

14 January 2016 | About a 4 minute read
Tags: Academy, hamburger menu, Mobile, mobile design, Mobile Development


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.

RD_0000_1

 

 

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.

 

RD_0001_2

 

 

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.

 

RD_0002_3

 

 

4. Speed

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.

RD_0003_4

 

 

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.

RD_0004_5

 

 

 

6. Hamburger

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.

 

RD_0005_6

 

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.

 

RD_0006_7

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.

 

RD_0007_8

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.

RD_0008_9
10. Scrolling

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.

RD_0009_10

Conclusion

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.

Share this blog post

Related Articles

Careers

We’re looking for bright, dynamic people to join our team!

Discover More Roles