7 Best Practice Tips for Responsive Web Design

With the mobile web growing at a steady rate and Google confirming it ranks pages based upon their responsiveness, it’s crucial that your website can adapt to a variety of different devices and screen sizes.

But responsive web design is about more than simply stretching or squeezing your layout to adapt. It’s about delivering a single website in a number of different ways while retaining content and functionality.

With that in mind, here are seven best practice tips for responsive web design.

1. Think Responsive

When responsive web design began, designers started by planning for the biggest screens then scaled down until they’d reached the smallest. All too often, they included fancy elements that didn’t break down well to fit a smaller screen, which led to the mobile version being a watered-down copy of the original and feeling like somewhat of an afterthought.Today, mobile devices comprise the largest volume of traffic for many websites, so mobile users expect, and deserve, the same quality of browsing experience as other users. But that doesn’t mean the larger screen sizes should be ignored either. Many people still use a large desktop, and even more jump between different screens throughout the day.

The best way to tackle this is by adopting a ‘mobile first’ approach, designing for the smallest screen first then adding elements as necessary as you move up the screen sizes.

Focus on designing for the popular breakpoints, but do account for the gaps in between as well – new devices come onto the market every day and a screen size hardly used today could be the new big thing next month. And remember to consider people who use their tablets in portrait mode – this can slip under the radar and end up looking like a squashed desktop or a basic mobile layout with a lot of wasted space.

2. Pay Attention to the Content

Don’t fall into the trap of a ‘fit-to-size’ approach, where your focus is on fitting all the elements onto a page without considering their context. Start by concentrating on the content and features that are the most important, and being brutal about which elements face the chop. As you move up the different screen sizes, question their inclusion at each stage  – if you have to think about it for too long, it probably doesn’t need to be there.Once you’re clear on the content and features you require, you can start work on the layout. The sheer variety of screen sizes means the traditional concept of ‘above the fold’ is pretty much dead. People are used to scrolling – the advent of sites like Facebook and Twitter has seen to that – so design your sites in a way that encourages scrolling, but retains the most important information towards the top of a screen. This includes contact details, CTAs, and on eCommerce sites, the all-important ‘Add to Basket’ button.

Prioritize elements based on their importance to the user, so if you can fit text next to an image on a desktop, think carefully about which is best at capturing your users’ attention on a mobile device, and ensure that comes first. Other elements, such as an accompanying blog image on a preview page, could be left off the mobile version altogether, leaving the focus on the content itself.

3. Experiment With Scalable Navigation

Navigation is one of the most challenging aspects of responsive web design, but it’s also one of the most important. Contrary to most web design rules, this is one place you don’t need to be consistent – large, complex menus used on big screens simply won’t work on mobiles, so it’s perfectly acceptable to create a different type of navigation for different screen sizes.Hidden navigation is popular on many mobile sites, with a simple icon such as the burger indicating the presence of the menu. You can either slide the menu down over the content below, or have it overlay on the entire screen. Another option is to plump for the horizontal swipe, where content obviously disappears off the side of the screen and users can swipe across to engage it.

Whichever you choose, don’t negate consistency altogether – your menu should have a similar feel to other versions in terms of visual characteristics, even if it has different functionality.

4. All About Images

The quality of images on websites is crucial, as they form a large part of a visitor’s first impressions of a site. But large images have a negative effect on the download speeds of mobile devices with their lower bandwidth capabilities.Much like the content, you should question the inclusion of each image for each screen size and only include those that are absolutely necessary, while reconsidering elements such as sliders that contain multiple large images.

Optimize your remaining images, making them flexible with adaptive sizing, and store them using the appropriate format. Remember, you’re unlikely to need the ‘enlarge image’ functionality on a mobile, as the image will probably be full screen anyway. If you need to include image galleries, opt for long-scrolling navigation, or use horizontal swiping to move between them.

5. Think Typography

The typography you choose requires careful consideration as many typefaces that work on a medium or large screen become too difficult to read properly when reduced for the smaller screen sizes, so always test thoroughly across different screens.Balance your headings carefully – their function needs to be obvious, although if they’re too large they can appear overly dominant – and ensure there is adequate contrast between the background color and the font.

As you move up the different screen sizes, pay attention to the line length of your content – if a line is too long it can be difficult to read. Keep line lengths to approximately 60–75 characters and on wider screens fill in the space with a sidebar or images.

6. Optimize for Touchscreens

Responsive web design doesn’t only need to account for different screens sizes; it must also be optimized for different input methods. And touchscreens can be tricky, so it’s best to be generous with your button sizes and links, aiming for a clickable area of roughly 44 points square.You also need to optimize your user experience for touchscreens. Yes, they’re intuitive by their very nature, but subtle navigation aides, such as swipe gestures, are a valuable addition.

7. Test on Actual Devices

Finally, while planning your design is a crucial step, don’t rely on theory alone. There are mobile emulators that will help to check your designs and CSS breakpoints, but nothing beats testing on the real thing – many of these emulators only replicate the various screen sizes but not the functionality of different operating systems.Ensure you have a variety of different sized screens to play with and a number of different users, and test your designs thoroughly. This will often bring up a fresh viewpoint, and confirm you’re on the right track or show you where improvements can be made.

Responsive web design is continually evolving and growing, and we’ve only scratched the surface here. Best practices for this field are changing frequently too, so it pays to keep up to speed with the latest developments. Remember, many users have a weak bandwidth, low resolution, and small processing power on their devices, so your site should be simple, well organized, clean, easy to use, and look good across a variety of different screens.