Web Design

10 Best Web Design Practices For Responsive Websites

Building a fully responsive website that provides mobile users with a high-quality user experience doesn’t have to be hard. There are many best web design practices that can help you customize and improve a website theme and create a wonderful mobile website. Here are some of the best web design practices for responsive websites that web developers have been using in 2015, together with examples.

Place contact information at the top of your mobile website

Smartphone and tablet users want to find contact information as quickly as possible. By placing it on top you make it really easy to find. For business websites, consider placing call to action buttons and checkout buttons at the top of the page as well.

Implement hidden navigation menus

To keep layouts simple and easy to navigate, hide navigation menus behind an icon. When visitors touche the icon, the menu drops down on the screen, only to collapse back once they move on to another page.

Optimize line lengths

The line length of the content is a key element of responsive web design: lines that are too long are difficult to follow, while very short lines can have a negative impact on the rhythm of the reading. Line lengths between 45 and 75 characters seem to work best.

Make your buttons large enough for any thumb

One of the big trends in web design is for mobile buttons to be larger than on desktops. This includes Buy Now/Register call to action buttons, email sign-up buttons, social media sharing buttons, and any other type of button your have to implement on your mobile site.

Use tabs to show and hide content on mobile

One of the most effective ways to streamline a mobile website is by showing and hiding non-essential content and design elements behind conspicuous tabs or accordions.

Use fewer images

To declutter your mobile homepage and boost up the speed of your mobile website, you can replace images with icons. Weighing less than images, icons are scalable and display beautifully on any mobile device, regardless of its screen size.

Choose scrollable galleries over image enlargement

Image enlargement doesn’t do well on smartphones, especially if the original image already fills a good part of the screen. A long scrollable gallery can be a good solution to this problem, especially if you remove image captions to free up some screen real estate.

Add only responsive videos

When inserting a video into a web page, use css to make it responsive, so that its width automatically adjusts depending on the device on which it is viewed. This makes your mobile site more user friendly as well as increases the impact of your videos.

Go for scalable typography

Together with the layout of a site and the other design elements, the typography also has to change on mobile devices, increasing or decreasing based on the screen size on which it is viewed. Make sure that the fonts you use are scalable and look good at all sizes.

Replace hover effects with touch effects

Hover states that on the desktop version of a website look animated are best conveyed on mobile by replacing them with touch events, such as one tap for viewing more info and two taps for accessing a relevant page.

PerOla Hammar 陈家悦
Father of 2. Marketing, sales & web geek who is open-minded & eager to learn. Experienced a lot in the past years, both good and bad. Lesson learned? LIVE LIFE!