Mobile internet usage has more than doubled in the past year and a half, when we first published this guide:
With just under 30% of traffic coming from mobile devices (and some sectors seeing an even higher proportion of mobile traffic), making your website mobile-friendly is a worthwhile effort, and can push you ahead of your competitors. The only problem is: how? Where do you get started? What makes a site good for mobile devices?
To help you determine the best approach to handle your mobile traffic, we’ve put together an outline 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:
Choosing the Right Approach
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.
- RESS/Adaptive/Dynamic Serving: the URL remains the same, but the server sends different HTML and CSS based on what type of device is requesting the page.
- 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.
Various considerations will determine which of these approaches is best for your site. See the flowchart below to guide your choice.
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: design, development, and monitoring once the site is live. 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. Responsive design is probably your best option here, since there are a lot of pre-made responsive designed CMS’s, and responsive design takes the least amount of content creation.
Here are some of our recommendations for good responsive Wordpress themes and other CMS services. There are plenty of other options available.
- Elegant Themes have several responsive themes, priced at ~$69/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.
- WooThemes make excellent premium Wordpress themes. Some of them are free, most are about $80 - $140, all are mobile-ready and highly customisable.
- 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 $17 a month.
But if you’re ready and able to do it yourself, let’s get started!
Designing the Mobile Version of Your Site
Mobile visitors want to see a version of your site with colors, themes, and content similar to the main site so they can be certain that they’re on the right site. But they expect the actual structure of the page to be fairly different: the screen should really only display one or two elements at a time, rather than the multitude of options we show desktop visitors all at once.
Recommended: Mobile First
Mobile first is a growing movement in the design world. The basic idea is that mobile sites should be designed first, then expanded into 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.
Designing a Mobile Site Second
If Mobile First design isn’t an option, your task will be more difficult, but not impossible.
Start by figuring out which elements of a desktop page need to be on a mobile page:
You can gather user data through your standard web analytics tools, custom tools like CrazyEgg, and UX testing. Ask the questions:
- What content is important to visitors?
- What is ignored?
- What is the typical path visitors take?
- Look internally, too. If you need ads to support your site, you’re obviously not going to remove them just because you found out they were ignored in your user tests. On the other hand, if your site primarily runs on subscriptions but includes ads for a bit more profit, you may want to remove them from the mobile version of the site to speed up page loading time and optimize user experience.
Run some speed tests to identify elements that take awhile to load. Find out:
- Are they important to the content of the page?
- Can they be minimized?
Use insights from this research to identify what you will and won’t have on the mobile version of your site. Some of this research may help you clean up your desktop site, too: if you’ve found content that visitors are ignoring, why is it on the desktop site at all?
Next, map out the content path visitors take on the page. This will be simple on most article pages, but may be complex for category pages and product pages. Some excellent examples are:
- Facebook: Of course, they’re the king of mobile. The desktop version of the site has three columns: side navigation, a primary list of content, and a secondary list of trends and ads. The mobile version moves all navigation to the top of the page and just shows the primary column.
Amazon: Probably the best example of a mobile ecommerce site. Its mobile product pages display snippets of all of the information that the desktop version has, limiting the amount of content phones have to download but still giving visitors access to all the information they expect. The content is prioritized to get you to buy quickly, by putting the buy button at the top, then the product info, then the reviews.
Nordstrom: One of the better mobile sites for a primarily offline company. Product pages start with multiple images of the product that visitors can swipe through, then product selections, then reviews. Although reviews are below purchase information, there’s a link to them and a summary at the top, so mobile visitors get a lot of information at a glance.
Once you have an idea of visual flow, you can lay out your initial designs for a mobile screen and get into the nitty gritty of mobile design.
- You can gather user data through your standard web analytics tools, custom tools like CrazyEgg, and UX testing. Ask the questions:
Universal Mobile Design Concerns
Navigation on a Small Screen
Mobile phone screens are too small to view a large navigation menu in addition to the primary content. Rather than showing the desktop site’s navigation, mobile navigation options should be minimized. Most sites do this with the three line method and magnifying glass:
nytimes.com modcloth.com facebook.com
Size Variances of Smartphones
Most smartphones display 320px to 400px across, (in CSS pixels, which is what matters for design) although old iPhones are only 240px across. If they’re flipped on their sides, they can be up to 640px across. Tablets are from 480px to 800px across when held like a book, but they’re more likely to be held like a television, making their maximum pixels across 1280px.
That gives you a pretty wide variance to design for: 320px to 1280px. Rather than serving everyone, find out which screen sizes people usually use on your site. If you use analytics software like Google Analytics you should 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.
Pro tip: Since each element spans the entire screen size, you can usually 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.
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:
- 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.
- 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.
- 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.
- 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:
- 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.
- 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 Sites
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.
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:
- 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.
- 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 or Dynamically Served 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. A good, intuitive way to allow them to research their diamond ring purchase on their mobile phones is to simply have a similar shopping experience to what you have on your desktop site.
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:
- Development Considerations
- Technical Search Engine Optimization
- Setting Up and Using Analytics
- The Future of the Mobile Web