6 Tips for Mobile Friendly Web Design

Charlie R. Claywell
Reviewed by Vikki Olds
Mobile-Friendly Web Design

In 2008, one percent of the total global Internet traffic was mobile, and by the end of 2012 that number had risen to 13 percent. Since mobile consumption of the Web is a trend that is projected to increase, designing sites that meet this growing demand has been pushed to the forefront of the industry.

1. Design for Your Audience

This may be the single most important aspect of mobile design, because different users have different expectations. Unless you have a strong understanding of who is accessing your site from a phone or tablet -- and for what purpose -- it can be difficult to design a site that best suits their needs.

One of the easiest ways to know your audience is through analytics. Take the time to analyze visitor data so you can better understand what links or topics are most often read, which sites your audience is coming from -- or leaving for -- and what their browsing habits are.

You can also encourage user feedback by offering online surveys and adding comment sections to your site. Even negative feedback is useful when you take that information to implement positive features on your site.

2. Proper Fonts

If your users can't read the site, then the best layout is pointless. Maybe even more so than in traditional web design, there must be a strong contrast between text and background -- the most common being black font with a white background. Beyond that, though, the font must read easily on a small screen.

Some of your best choices are:

  • Arial
  • Courier/Courier New
  • Helvetica
  • Georgia
  • Times/Times New Roman
  • Trebuchet MS
  • Verdana

You can utilize the CSS3 font-face rule to incorporate different fonts, as long as you use a safe font to fall back on because not all mobile devices recognize CSS3. When designing your site, always stay away from fonts that are too small, kerned too tightly or have a line height that looks squeezed.

3. Layout That Fits the Device

Several approaches have been taken over the past few years for laying out a mobile site. First attempts were basically just the main site whittled down to the bare essentials -- which, of course, robbed the user of the overall website experience. Now mobile sites are either (1) a separate site designed only for mobile devices, with the main site controlled by CSS to deliver the site based on the device being used to view it (responsive design) or (2) an app. An app should only be used if it adds more to the experience, and is usually best for video-type content.

Wide column-based websites which are the norm for desktop display just do not work on a mobile device. If you force users to zoom in and out on their screen due to your horizontal-based layout, they will find a more mobile-friendly site. Vertical layouts work best since a properly designed site adjusts to the width of the device which allows the user to scroll down to view the content which they can easily do with their thumbs or fingers.

Large blocks of information can be difficult to read on a small screen. When designing sites with mobile devices in mind, make sure large chunks of information -- which work fine at larger resolutions -- have been replaced, when possible, with bulleted or numbered lists that convey the same information.

4. Quick Load Time

Although the stability of the mobile infrastructure has improved immensely, it is still not as reliable as its counterpart. Besides the possibility of lost connections, designers also have to accommodate the issue of data consumption, especially for users who are on limited data plans. This is one reason why mobile sites tend to be more text based and, when images are used, they have been optimized and pared down.

By optimizing images and creating text-based sites to conserve bandwidth, designers have also addressed load time. Load time has always been a critical element of quality web design. If users cannot access information they are seeking quickly and easily, they will turn to a competitor for the same content. Minimizing the use of heavy graphics -- or designing in a way that progress appears to be happening, like with a status bar as a graphic downloads -- goes a long ways in keeping users on your site.

5. Simple Navigation

Although elaborate menus do not tend to work on mobile devices, that doesn't mean menus have to be as simple as text menus or text breadcrumbs (although both are highly effective). The menus do need to function easily with a thumb or finger and respond quickly.

The same idea goes for forms. Forms can easily be included in a mobile site - and often are - if a couple of simple tricks are followed. For forms with multiple steps, divide the form into mini-forms. For example, have users input their name and address on one screen, then set up the next screen as a series of checkboxes where the user selects items of interest. Key design elements with mobile forms involve using drop down menus, check boxes and radio buttons whenever possible so the amount of typing required by the user is kept to a minimum.

When it comes to navigational button or links inside text, remember a couple of tips. First do not put potential links so close together that they overlap, creating a situation where the user struggles to 'hit' the link they actually want. Secondly, make any hotspot for the button or link large enough so the user can actually tap the link or button with their fingertip.

6. Reduce Number of Clicks

Although keeping clicks to a minimum is a good practice for all websites, it is imperative for mobile sites. Do not force the user through various screens and pages. If you have taken the first step and know who your audience is, you should be able to design the site in such a way that the information they will most likely want is readily available. Requiring excessive clicks on a small screen is a surefire way to convince your visitor to head off to another site. If you visit Food Network's mobile site, for example, you will see they have given the user access to current information within a single click.

Examples of Effective Mobile Design

Quality mobile design, at its core, comes down to knowing what your user will do when they land on your mobile site. By knowing their actions you can give them the tools they need to accomplish their goal. Examples of effective mobile sites include:

Amazon's mobile site
Flickr mobile site
Fandango mobile site
  • Amazon's mobile site is clean and simple. The element that is easiest to find and use is the search box located at the top of the screen. However, if that is all Amazon placed on the page then they would be too Google-like -- not a good idea for a store. Instead, they give the user the ability to access all the major site categories, daily deals, visual promos for current sales, and the ability to quickly see how many items are in their cart. A user can quickly research, shop and check out on the mobile site.
  • Flickr, a popular photo-sharing site, offers four options once a user signs in which includes the ability to upload photos or videos. Navigation is wide and simple and if a user chooses to upload a photo from their mobile device, the upload button is large enough to make browsing to the image easy.
  • Fandango knows its users are trying to find where a movie is playing so they place that option up 'front and center.' But Fandango, like Amazon, manages to place a whole lot more than the central element on their mobile page. On Fandango, the user will quickly know what movie is currently being pushed by the ad at the top of the page. With Fandango's user-friendly menu, visitors can quickly access movies, theaters, videos or the movie blog. Once a movie has been selected, the user can access show times, reviews, watch the trailer or even purchase tickets with just a few clicks.

Accessing Statistics

If you want to grow your mobile site, finding information about trends is crucial. You will want to know what your mobile users are viewing or what your competition is doing to attract them. If you are pushing out content to a social media site like Facebook, It is highly probable the user is reading that content from a phone because, as Smart Insights reports, more than one-third of Facebook users use the Facebook Mobile app. If you are reaching out to 12- to 29-year-old users, according to Harvard Business Review 45 to 50 percent of them access the Internet from their phone -- so expect non-mobile friendly sites to be abandoned quickly. By researching and staying on top of the mobile usage trends, you can keep your site more relevant to visitors.

Was this page useful?
6 Tips for Mobile Friendly Web Design