image
imgae
17-12-2015 Hermes Designs

5 golden rules of responsive design best practices

Responsiveness is the biggest trend in the current web design world. People love responsive sites because these are well-fitted to almost all devices available out there. Well, it’s not all about resizing the pages- user experience also matters. Let’s see 5 important factors to be considered while designing a responsive site.

1. Be Prepared For All

image

Plan your design for every possible screen size. While following a mobile-first approach, also keep in mind that a big number of users are visiting you from tablets and computers. Keep enough engagement opportunity for all. Use a font that looks clear not only on a desktop screen, but also appears convenient on a phone browser. Increase the line spacing for wider lines to help the reader find your subsequent lines easily.

2. Be Contextual

image

Think contextual. Not all elements are vital for every device category. Think from every possible context. A desktop user may like to see the sidebar widgets beside your blog entries. But what about a mobile or small screen tablet user? They will like to focus just on the latest posts. Additionally, you may put the post thumbnails with the titles. This would present the items more beautifully. For any other page on mobile, only keep contents that are the most useful and actionable.

3. Good Navigation

image

Navigation is one of the biggest challenges of responsive design. Your desktop template’s large multi-layer menu bar will simply fail to fit with a mobile screen unless you manage to scale it down. That’s where scaling comes necessary. Define a certain screen resolution up to what the desktop menu will work. After that, fold the entire menu and get it inside the popular ‘three lines’ icon placed top left/right. Keep the menu labels, links and fonts consistent with the larger variant.

4. Keep It Light

image

According to data provided by HTTP Archive, the average web page today sizes up to 2.1 MB. That’s a huge deal which is 2X larger than the average size in three years ago. Photos and videos contribute the most to this bulky trend. I understand, stunning images are used to make a site more eye-catching. Videos are used to present a page more lively. But there is a trade-off. These will load your site slowly. When it comes to mobile, the result could be disastrous. Offer lower sized images to mobile browsers. Use a single image instead of multi-image sliders. Optimize images to load faster.

5. Test On Multiple Devices

image

After coding the site, make a demo and load it on devices with different screen sizes. Test it cross-platform. Use real devices as much as possible. Emulators may not provide the actual test result always. Keep this in mind.