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.
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.
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.
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.
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.
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.
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.