Google announced in early 2015 that it would begin using mobile-friendly websites as a search engine ranking factor. As a result, many businesses realized that they could no longer ignore designing a mobile interface for their sites.

This post, Mobile Website Design: 5 Principles to Keep in Mind, was first published on WebMarketingToday.

A best practice is to begin with a “mobile-first” design strategy. Thinking about your mobile website first, and then adding extra content and imagery, will force you to develop a site that is usable on both small and large screens.

Here are five principles to keep in mind when considering mobile site design.

1. Touch-friendly

Make all tap target areas at least 44px x 44px, to ensure visitors can comfortably browse your site using only their thumb or index finger. Otherwise, they could quickly become frustrated when clicking the wrong icon because it is too small.

Make tap target areas at least 44px x 44px in size.

2. Easy to Read

Choose the correct type styling to guarantee that your website visitors can read the text and retain the information, whether they access the site via a smartphone or desktop computer.

Picking a baseline for all type —16px is a good starting point — will ensure that all other styles are consistent. However, you can still experiment with larger or smaller type for elements such as headlines or body text.

Also, lines of text on mobile devices should be no more than 30-40 characters in length. Keeping lines short will prevent users from getting tired or losing their place when reading multiple lines of copy. is an excellent example of a site that uses type correctly on a mobile device.

3. Easy to Navigate

Navigating on a small screen can be extremely difficult. Don’t assume site visitors will always use a desktop to look for information. Each and every page should be accessible within a few clicks.

Two popular techniques for mobile navigation are “menu overlays” and “off-canvas menus.” These two methods allow you to hide your entire site’s navigation in a menu that is accessed as needed and in a way that does not take up valuable real estate on a small screen.

Menu overlays work best when you have a smaller sitemap that may be just one- or two-page levels deep. Off-canvas menus are best for sitemaps that have two or more levels. There are many other options for mobile navigation; just make sure the solution you pick works for your site’s content.

Target’s navigation is simple at the highest level. It utilizes a menu overlay style navigation. has an extensive sitemap that uses an off-canvas menu.

Lastly, make it easy for users to access the home page from each page on the site. Linking the site’s logo to the home page or adding a “home” icon to your menu — such as in the Disney example — are two ways to achieve this.

4. Screen Size and Resolutions

Planning for the varying screen sizes and resolutions of your users’ mobile devices is one difficult part of mobile website design.

It is nearly impossible to design for every screen size. But planning for the smallest size is always simpler than choosing popular phones such as the iPhone 6 or Galaxy S5, which have larger screens than most other smartphones. To ensure wider compatibility, start with a design that works on a phone that is at least 2-3 years old.

Design your site to work well on older mobile phones.

Mobile device screen resolution is another concern associated with screen size. Many mobile devices have added HDPI or Retina screens, which are double the pixels of the actual screen size. As such, all of your site’s images will need to be twice as large, to ensure that they don’t appear grainy or of inferior quality.

5. Load Time

Saving all images in double the pixel size presents yet another problem related to mobile design: load time.

Although most modern smartphones have support for broadband Internet over cellular connections, it is still essential to ensure your site loads fast.

Keep your site’s total size under 1MB, to accelerate the load time. Many services, such as Pingdom, allow you to test your site’s load time and will present solutions for ways to increase speed.

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

One typical page load time issue is that sites will often hide all desktop design elements while on the mobile version. All resources — images and Javascript, for example — still load, even though they aren’t visible on the page. There are, however, many techniques for selectively loading images and other resources like HTML and Javascript on mobile devices.

By designing with mobile-first in mind, and then adding complexity as the screen size increases, a site can progressively enhance the design instead of degrading design and performance on mobile devices.