• Top Practices for Responsive Web Design

    By addone , 17 April 2015

    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.

    1. Foldable navigation panels

    Foldable-navigation-panelsEspecially 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.

    1. Horizontal swipe menu

    Horizontal swipe menuAnother 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.

    1. Large clickable regions for links and buttons

    Large-clickable-regions-for-links-and-buttonsInstead 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.

    1. Balances sizes and weights for fonts

    Balances sizes and weights for fontsThere 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.

    1. Optimize text widths

    Optimize text widthsIt’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.

    1. Important information higher up

    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.

    1. Determine the order of adjacent content blocks

    On a wide screen, you can afford to show content side-to-side. On small screens, everything must flow vertically, so you need to decide the order in which sidebar elements are going to be arranged on such screens. You can use CSS for simple layouts and JavaScript for complex ones. Even with content that has images and other media, determine what’s more important so that it appears first.

    It’s helpful to have sidebar elements coming after the main content area on mobile devices in the order they appear.

    Conclusion

    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.