Building Your Mobile-Friendly Site The Distilled Best Practice Guide

Mobile internet usage has grown phenomenally over the past five years:

Global Mobile Traffic Growing Rapidly to 13% of Internet Traffic

[Source: http://www.slideshare.net/kleinerperkins/2012-kpcb-internet-trends-yearend-update/15]

If you own a website, this probably doesn’t surprise you. And now you may have noticed that internet marketers’ blogs have stopped simply urging you to build a mobile site and have moved on to specifics, arguing the merits of separate mobile sites vs responsive design. Your competitors may have already begun to build mobile sites, and you don’t want to be left behind.

With over 10% of traffic coming from mobile devices (and some sectors seeing an even higher proportion of mobile traffic), building a mobile-friendly site is a worthwhile effort, and can push you ahead of your competitors. The only problem is: how? Where do you get started? Do you make your current site responsive or do you build a separate mobile site?

In order to help you determine the best approach to handling your mobile traffic, we’ve put together an outline of some considerations you’ll need to bear in mind, along with our best practice guidelines and other tips and tricks for every stage of the process:

1

Choosing the Right Platform

There are several approaches to creating a mobile-friendly web presence. They are usually divided into three ‘types’, each of which provides a different experience for mobile users:

  • Responsive: the page - URL, HTML, images, everything - remains the same, but the CSS gives different rules based on browser width.
  • Separate Mobile Site: usually hosted on a subdomain (e.g. m.domain.com) or sometimes a subfolder (e.g. www.domain.com/mobile), but it can also use the same URLs as the desktop site, and simply serve different HTML (called dynamic serving) to desktop and mobile visitors based on user agent.
    If the mobile site uses different URLs, they are often kept parallel with their desktop counterparts (e.g. www.domain.com/first-page and m.domain.com/first-page), which allows for smooth redirects based on user agent. But since it’s a separate set of pages, the options are unlimited. You could choose to have a completely different site structure, in which case the mobile URLs might be necessarily different.
  • Mobile App: Device-specific application which is downloaded by the user. Although they can be a great tool for your mobile web presence, this approach is not recommended as a stand-alone strategy. This is firstly because new visitors will almost always have their first contact with your website rather than your app, and secondly because the download requirement creates an extra barrier to entry. Also, apps are not crawled or indexed by search engines. For this reason we have not included guidelines for them in this document.

Various considerations will determine which of these approaches is best for your site. See the flowchart below to guide your choice.

But choosing an approach is just the beginning. This guide is structured in four parts, to mirror the site creation process and to provide some considerations for each stage: the design stage, the development stage and our additional recommendations for technical search engine optimization and data tracking and analysis. Taken together, these guidelines will enable you to design, build and optimize your site to be the best version possible for users and search engines alike.

Basic Option: Use a CMS that Does it For You

If you have a low budget or limited resources, you may want to look into using a user-friendly content management system (CMS) like Wordpress. Whether you’re just looking for a new platform or are building a site from scratch, there are a number of content management systems already available that are created to support responsive designs.

Here are some of our recommendations for good responsive Wordpress themes and other CMS services. There are plenty of other options available.

Wordpress themes:
  • Elegant Themes have several responsive themes, priced at ~$40/year. They provide updates and full support. You can renew on an annual basis.
  • PressCoders: We recommend the Designfolio theme, which you can download for free (with some restrictions) or purchase a full license for at $79. The paid version includes full support.
  • Standard Theme can be licenced for as little as $49. They also offer a support licence for $99.
  • WooThemes make excellent premium Wordpress themes. Some of them are free, most are about $70, all are mobile-ready and highly customisable.
  • The Responsive theme from CyberChimps is a great option, especially for a basic site such as a personal website or blog. And it’s free.
Or, for non-Wordpress users:
  • SquareSpace is probably one of the best WYSIWYG (What You See Is What You Get) mobile design solutions at the moment, and priced from $8/month (for the most basic service).
  • Wix is another WYSIWYG service, and very reasonably priced, at around $10 a month.

But if you’re ready and able to do it yourself, let’s get started!

2

Designing the Mobile Version of Your Site

Mobile versions of desktop sites should closely imitate the colors, themes, and content of the main site to assure visitors that they’re in the same place. But the actual structure of the page has to be different: it must be clean and simple, and the majority of the page should be taken up with actual content, rather than design layout and white space.

On a standard webpage (because it’s a much larger screen), a lot of consideration goes into using white-space to break up content, having a background, multiple navigation options, leading the viewer’s line of sight, etc. With a mobile site, you'll still want those images that are a part of the content, but more compact navigation, no white space, and no ‘layout’ (beyond deciding which elements of the site should take priority in the limited screen real estate).

Mobile webpages are limited by their width, but not their length. Most, if not all, of the content of a standard-sized webpage can be rearranged into a single column layout for mobile devices, provided the content isn’t so image-heavy a phone can’t download it easily (especially with a mobile’s unreliable internet connectivity). Wide desktop screens and visitors who skim have led us to build webpages scattered with snippets of information, hoping that at least one piece will catch the user’s eye. Mobile sites only allow visitors to see one thing at a time, so content needs to be written accordingly, leading users from one point to the next. To build a good mobile site, you have to choose which content elements are the most important to feature, and what elements can be hidden.

  • Mobile First

    Mobile first is a growing movement in the design world. The basic idea is that, if you’re building a new desktop version of the site at the same time as the mobile version, you should consider designing the mobile site first, then redesigning those pages for tablets and desktops. There’s nothing you can put on a mobile page that can’t be loaded on the desktop version (besides mobile-specific features, but those are less of an issue to fix). This approach is especially helpful for responsive and dynamically served sites, where the content on the mobile version of the page should be identical to the content on the desktop page.

  • Navigation

    It’s easy to build a desktop site with hundreds of pages one click away from the homepage, through a complex top navigation drop-down menu. One-click navigation lets your visitors choose what they want to see, and SEO tests have shown that the closer a page is to the homepage, the more attention it will receive from search engines. So for desktop sites, this is often the norm.

    Mobile phone screens, however, are too small to view a large navigation menu in addition to the primary content. So rather than mimicking the desktop site’s navigation, mobile navigation options should be limited to the few links that most visitors use on that page. If the visitor wants to jump to a different section of the site, they can backtrack, or use the search bar, which should always be readily available.

  • Size Issues

    From our data, it appears that most smartphones display at least 320px* across, although some sources recommend ensuring that your mobile site works on screens as small as 240px.

    * Note: We’re talking about CSS pixels, indicating size, rather than actual pixels, which vary in density.

    Since each element spans the entire screen size, you can simply set their widths to 100% in CSS, and they’ll expand or contract as the screen size shifts. Images will automatically shrink and text will stay the same size, but will wrap itself differently depending on the space available.

    Be aware of what screen sizes people usually use. If you use analytics software like Google Analytics you will be able to find this data easily (in GA it’s in the Mobile report). This is a screenshot from the Mobile > Devices report, with ‘Screen Resolution’ set as a secondary dimension:

    Make sure to test your site on the top devices that up to 90% of your visitors are using. You may also want to consider whether you can or should de sign your site to display differently for different screen orientations.

  • Designing for Touch

    Fingers do not have the ability to hover or right click, and they need a good amount of space between links to be sure they don’t accidentally click the wrong one. When designing for touch:

    1. Give enough space for a finger: Fingers aren’t as precise as mice. Fingers obscure what they’re tapping, you can’t give any indication that they’re hovering over the right option before they tap, and they tap a larger part of the screen than a mouse. Make sure that you always have a space of at least 28 x 28 pixels around links on your site for clumsy fingers.
    2. Give feedback when the screen is touched: With slow or broken connectivity, many of your visitors will have to wait awhile to get to the next page when they tap on a link or button. Let them know that the phone has recorded that they’ve tapped the button by showing the button indent or highlighting a linked box. Otherwise, your visitors will end up furiously tapping their screens, and may end up in the wrong place.
    3. Use buttons: Buttons clearly define where users can or cannot click to activate the link. Since, unlike on a desktop display, you can’t use any signals to tell them their mouse is hovering over the right area, it’s more important to define the clickable space.
    4. Redesign drop-down menus: They still work on mobile, and can be a great way to hide information until it’s requested, but they often open only when you hover a mouse cursor over them. Mobile drop-downs should be activated with a tap, and the menu should show clear separation between options. BridgestoneTire.com does this well:
    5. Minimize text input: Typing is slower on a mobile phone, and necessitates an on-screen keyboard, which makes the viewable screen half as big. Cut out input that isn’t absolutely essential. Break up forms into multiple pages that only take up half of the screen, with a clear “next” button, so that visitors don’t have to scroll.
    6. Use mobile-specific features: The difference between main sites and mobile sites adds opportunities: for example, you can make all of your phone numbers click-to-call, and turn your address into a link for navigation.

Designing for Responsive Design

For those of you who are unfamiliar with responsive design, it’s the idea that you can deliver the same HTML code regardless of screen size, but use CSS to rearrange those elements based on the screen width. To learn more, you can read the article that started it all, or read a briefer, SEO-focused description on SEOmoz.

As you start designing a responsive site, it will be tempting to write one set of CSS for a mobile site, another set of CSS for a tablet or a small computer, and a final set of CSS for a large computer monitor. But the point of responsive design is to make it fit all screen sizes - not just the most common ones.

Rather than thinking of your site as one object that you need to resize, think of each element on the site differently. Open a page of your current site and slowly shrink it; at what point does an element disappear? You can use CSS to move that element into a still visible column. Can the main image on your page be shrunk and still look good, or would you rather crop it? CSS can shrink or crop based on the screen width.

Resizing Websites - Example

If you’re building a website from scratch, most designers recommend starting with a mobile site, then spacing the elements out as the screen gets bigger. But most people considering mobile site design now already have a desktop version of their site, so we’ve provided a walkthrough for how to take your current site and shrink it down.

Here’s an example of a desktop-sized web page template with design notes:

Shrinking Content (All Elements)

As the width of the page gets smaller, all of the elements, except the text, will have to get smaller as well. To make this a gradual progression rather than a jump from size to size, make the widths of the most important objects a percentage of screen size.

In this example, the banner’s width should always be 100% of the screen size. To stop the banner from being impossibly small, you should set a minimum pixel height for it as well, and then start zooming in on the picture rather than minimizing it.

The text should always be 100% of the screen size, minus the widths of the left and right navigation (if they’re still there). Text will easily rework itself to fit the box you’ve given it, so this should be a fairly simple task.

Reorganizing Content (Text on Banner)

When you start shrinking objects, they’ll be harder to understand. For some elements, like the text floating over the banner, they’ll be more understandable on their own on a smaller screen. In this example, the text floating on the banner in the large screen size should be moved below the banner once it runs out of room.

Reorganizing Content (Left Navigation)

Often, you’ll want the options in the left navigation to be highly visible to mobile visitors as well. Move the navigation to the bottom of the content , so that once the visitor has read the page, the next natural options will be obvious.

Collapsing Content (Search and Top Navigation)

Some pieces, like the search and the top navigation, are necessary to the site, but they can be accessible without taking up so much space. For example, a good way to shrink the search bar is to replace it with the universal magnifying glass search symbol, and expand it back to a search bar with a click.

The top navigation, while important for search engines and for visitors to completely change course, doesn’t need to be seen all the time. It can be hidden in a drop down, as Smashing Magazine does.

Removing Content (Right Navigation)

We’ve started refitting the most important pieces first for a reason: you’ll find some of the content won’t easily fit in a mobile design. If the least important objects can’t find a place, then ask yourself, does the mobile audience really need to see this?

If the answer is no, you can set it to display:none once the screen width is too small to accommodate it.

Note: When you cut something out of your mobile site, you should also ask yourself, do you even need it on the desktop site? This could be a good opportunity for you to clean up your main site as well.

Once you’ve made all of these adjustments, the site should be able to shrink to look more like:

Moving Content into a Single Column Layout

Sites with long form content can simply be narrowed and lengthened to fit the content as is. E-commerce sites, on the other hand, tend to have multiple pieces of content separated visually, rather than through text transitions. There are a couple of design options:

  1. Rearrange content into one column: If the separated content on the main site still flows easily from one piece to the next, simply stack it in the right order, using visual cues to show the reader where one piece starts and ends. For especially content-heavy pages, it’s a good idea to include navigation at the top that lets visitors jump to the part they are most interested in.
  2. Hide content on load: Consider using an interactive accordion layout, which hides some of the content on load under titles, looking somewhat like buttons. For example, here's how we show our Conference Schedule via mobile. Visitors can tap to expand sections to view more details:

With either method, test the order of the content to see what converts best. You may be surprised at what content is most persuasive to mobile visitors.

If you find that content should be deleted from the mobile version of the site, or should be included on the mobile version of the site but not the desktop version, you can write it into the HTML code but hide it for the device type that shouldn’t see it. But, if this is a significant amount of data, consider a separate mobile site instead.

Designing for a Separate Mobile Site

A separate mobile site has its own HTML, so it isn’t tied to looking like the main site, or even having the same set of content or pages.

Include Most of the Content from the Main Website

You may assume that certain product and/or other pages won’t need mobile-friendly design. But in general it’s best to include as much of the desktop content as possible in some form. It may be difficult, for example, to imagine a scenario in which someone would complete a diamond ring purchase from their cell phone, but that doesn’t mean that people won’t want to browse, build, and share their perfect ring on their daily commute to work. They might also be interested in price comparisons, reading reviews, or reading the marketing copy for their top choices.

In short: even if the key conversion won’t happen on a mobile phone, you shouldn’t assume that visitors aren’t interested in the same content hosted on the main website.

Look at your analytics to see what keywords your mobile visitors search for the most (if you’re using Google Analytics, that is the Search Engine Optimization report). Check keywords from organic search traffic as well as from internal site search to see what visitors look for once they arrive on your site. Make sure, at the very least, that the most popular topics are covered on the mobile version of your site.

A Note About Tablets:

The general recommendation for tablets is that you serve them the desktop site rather than your separate mobile site. This is because the screen size of most tablets is closer to that of a laptop than a smartphone, and a mobile-specific site won’t look right. This guidance may change, however, as we see more variation in tablet sizes.

Read More - Login or sign up - it's free!

Like what you've read so far?
Sign up now for free to read the remaining chapters:

  1. Development Considerations
  2. Technical Search Engine Optimization
  3. Setting Up and Using Analytics
  4. The Future of the Mobile Web