Responsive web design, far more than just squeezing this and stretching that, is about offering up one website in numerous ways depending on the size of the viewer’s screen. To succeed, you must know what should be included or removed, what’s absolutely essential and how each change will impact the organic rankings.
Below is a list of the best practices for responsive design, as provided by the experts.
Especially for small screens, having a collapsible main navigation menu can help simplify your layout and give more space to work with. You can have text and/or an icon to point the user where it is. It can be a normal drop-down menu or an overlay menu which covers the entire screen. With this, you can have multiple menus as needed with multiple CTA messages to help users understand the hierarchy of the pages.
Another option for smaller screens is to have some bit of text visible on the side of the menu, indicating that users can simply swipe to show the text. Depending on the space, you can apply different methods, including clear horizontal scroll menus with the option to view ‘All’, which transforms the menu to a drop-down.
Instead of making buttons smaller on mobile, make them larger and more inviting to tap on. This isn’t for small devices alone either – have larger buttons wherever, including desktops to improve usability. Text links should also be larger. For instance, if you have content lists and want to invite users to ‘read more’, make the whole title block clickable instead of the ‘read more’ link only, so that users have a large area to click.
There should be a sensible ratio difference between text and headers. If you have the headers too large, the effect is exaggerated on mobile screens, not to mention that they’ll take up half the screen space. Newer mobile devices come with better resolutions which improve legibility, so you can afford to go smaller for small screens and resize accordingly as the viewing pane increases.
It’s important to consider the width of your lines because horizontal scrolling back-and-forth when reading content is a sure way to send readers away. It breaks the read-rhythm and compromises user experience. 60-75 characters is acceptable for most small devices, and you can do this by setting your max-width attribute to 500-700 wide for text areas.
Your contact info, call-to-actions etc. will be better served the higher up they appear on the screen, especially for mobile devices. If you have an e-commerce site, for instance, have your ‘Add to Basket’ or ‘Buy Now’ CTA at the top and frozen so it doesn’t scroll off-screen while users are browsing through products.
It’s helpful to have sidebar elements coming after the main content area on mobile devices in the order they appear.
Implementing these tools will help you improve your user experience across devices and you’ll see the results on your Google Analytics stats. If you don’t have responsive sites, best believe you’re taking away from the users who try to access your site on mobile, and that’s going to show on your stats as well.