As most of us already know, Responsive Web design (RWD) is an approach by which a website is rendered seamlessly when users switch from their respective desktops/ laptops to handheld devices (mobile or tablet). This is achieved by using flexible grid-based layout and media with intelligent use of CSS media queries.
Given below are some best practices to maximize the benefits of RWD:
Navigation menus
Navigation is one of the most important aspect of any website. On smaller screens, hiding the main navigation menu is a good approach.An icon, text or combination of both indicates the location of the menu.On smaller screens, the menu is displayed as a simple drop down menu, where the menu slides down and pushes the main content or is displayed as overlay covering the whole screen. If the menu items are more with multiple levels, then push menu is a good option.
Navigation menus- Large button links and clickable areas
Large buttons improve usability. For example, in the announcement list, instead of having “Read more” link for each list item, it is better to make each announcement to block a link, so that the user can click anywhere.
- Font size
The selected font should be readable and maintain the overall feel whether you scale or shrink it.The size ratio between headers and paragraph text should be well balanced.Include adequate contrast to the text, versus the background color and the color of links versus the rest of the site’s content.Also, have bigger fonts and avoid forcing the average user to zoom in.
- Use less images
A recent trend has been to have gigantic screen spanning images, which increase the file size of a page. There should be a good balance between rich visuals and the overall page performance. Effects like background gradients and button hover states, can be achieved by pure Cascading Style Sheets (CSS). For mobiles, especially, this helps to load pages faster.Use fonts for your icons instead of creating images. They are scalable, have cleaner edges, load faster, and are good for retina displays. This optimization works great across devices and screens.
- Important information at the top in mobile
For mobile devices, it is important to place information such as telephone numbers, contact info, ‘buy now’ call to actions etc. right on top. For example, on an e-commerce website, showing the shopping cart at the top, is a better option than placing it elsewhere on the page.
- Prioritize Content Differently
When moving from larger screen displays to very small screens, different layout approaches are required. One of the approaches is to show important information in a section and hide less important portions of the section. Below is an illustration of the same content on a desktop and a mobile device.
- Right Reading Width
Avoid lengthy text, because it is difficult to read. At the same time avoid very short text lengths, as this tends to break the rhythm of reading. A common practice is to keep line lengths at about 60-75 characters as the line height also contributes to a good reading experience.
- Input Methods
Desktop users use mouse/keyboard to navigate and enter information. But it is a very different experience for touch screen device users to input all information with their fingers. So make the form controls and button size bigger, and have larger clickable areas.
- Let content determine breakpoints
An older approach in responsive design was to use device sizes to determine breakpoints – e.g. 320px (iPhone portrait), 480px (iPhone landscape), and so on. The problem with this approach is that the device landscape is constantly changing, and today’s breakpoint values are likely to get outdated quickly. A better approach is to adjust the breakpoints appropriately based on when the layout breaks.For example, if the navigation bar on your website has five items and this looks bad past a smaller width, then use that as a breakpoint.
- Test on Actual Devices for Usability Issues
Ask some users to test the design on the actual devices for usability issues. Based on the test results make improvements or fix the issues in the design.
