The 5 Principles of Mobile Website Design

In early 2015, Google announced that it would begin using a mobile-friendly website as a search engine ranking factor. Many businesses realized that they could no longer ignore designing a mobile interface for their website. The best practice is to begin with a “mobile first” design strategy for your entire website. By thinking about your mobile website design first and adding additional content and imagery, it will force you to focus on making something that will be usable on both small and large screens. When considering a mobile website design, there are five basic principles that should be kept in mind.

1. Touch friendly

Make sure that your site is easily used with only a thumb or an index finger. Using only a finger requires a larger area where the user can tap for a desired action. If you have a series of icons for your social networks, but they are so small that users regularly click on the wrong icons, it will only continually frustrate your users. Ensure that all tap target areas are at least 44px x 44px for the user to have a comfortable tap-target size.

2. Easy to read

Choosing the right type-styling will ensure that your users, whether on a desktop or smartphone, will be able to read your text and retain the information on your website. As a good starting point, make your website’s font-size 16px. This doesn’t mean that you can’t experiment with large or small type for things like headlines or smaller text. However, choosing a baseline for all type will make sure that all other styles are consistent.

Make sure that your lines of text aren’t too long for users to read and retain information. Mobile devices should have lines of text made of no more than 30-40 characters. This prevents users from getting tired or losing their place when reading multiple lines of copy.

3. Easy to use 

Navigating on a small screen can be very difficult. Don’t assume users looking for information will always be using a desktop. All pages on your site should be accessible within a few clicks. Two popular techniques for mobile navigations are known as menu overlays and off-canvas menus. These two methods allow your entire site’s navigation to be hidden in a menu that is only accessed as needed and doesn’t take up valuable screen real estate. Menu overlays work best when you have a smaller sitemap that may only have 1-2 levels of pages. Off-canvas menus are best for deep sitemaps that have two or more levels of pages. While there are many other options for mobile navigation, make sure the solution you pick works for your site’s content.

Make sure that you also have an easy way to access the homepage on every page. This can be easily achieved by making the site’s logo link to home or by adding an icon to your menu with a “home” icon. 

4. Screen Size & Resolutions

One difficult part of mobile website design is planning for the varying screen sizes and resolutions of your users’ mobile devices. It’s almost impossible to plan for every screen size. Planning for the smallest screen size is always easier than choosing popular phones like the iPhone 6 or Galaxy S5, which have larger screens than most smartphones. Start with a design that still works on a phone that is at least 2-3 years old to ensure wider compatibility.

Another concern connected with screen size is the mobile device’s screen resolution. Many mobile devices have added HDPI or retina screens, which effectively are double the pixels of their actual screen size. What this means for you: All of your site’s images need to be twice as large to ensure that they don’t appear grainy on high quality.

5. Load Time

Saving all images for iPhone in doubled size for quality presents an additional problem that is also extremely important to mobile website design: load time. Although most modern smartphones have support for broadband internet over cellular connections, it is still important to ensure your site loads as fast as possible. Attempt to keep your site total size under 1MB so it will load quickly on mobile devices. There are many sites out there that can test the load time of your site and give you solutions on how to increase your speed.

Pingdom provides a free tool for testing your website load speed.

Another common page load time issue is that sites will usually hide all desktop design elements while on the mobile design. This still forces the mobile to load all resources, like images and Javascript, even though it isn’t visible on the page. By using mobile-first design and adding complexity as the screen size increases, a site can progressively enhance the design instead of degrading the design and performance on mobile. 

Check These Out: