Mobile is changing the world. Today, everyone has smartphones with them, constantly communicating and looking for information. In many countries, the number of smartphones has surpassed the number of personal computers; having a mobile-friendly website has become a critical part of having an online presence.
- If you don't know if your website is mobile-friendly, take the Mobile Friendly Test.
- If you used content management software (CMS) like Wordpress to build your website, check out our guide to customizing your website software.
- If you're technical enough to do it yourself, get started by choosing a mobile configuration.
Why make a website mobile-friendly?
If not mobile-friendly, a site can be difficult to view and use on a mobile device. A non-mobile-friendly site requires users to pinch or zoom in order to read the content. Users find this a frustrating experience and are likely to abandon the site. Alternatively, the mobile-friendly version is readable and immediately usable.
In the USA, 94% of people with smartphones search for local information on their phones. Interestingly, 77% of mobile searches occur at home or at work, places where desktop computers are likely to be present.
Mobile is critical to your business – whether you're blogging about your favorite sports team, working on the website for your community theater, or selling products to potential clients. Make sure that visitors can have a good experience on your site when they're visiting from their mobile devices.
How do I start?
The work involved in making a mobile-friendly site depends on your developer resources, business model, and expertise. For an example of how a desktop site might be redesigned to work on mobile, see the following diagram:
On a very basic implementation level, transitioning an existing desktop site to mobile entails using existing sections of content from the desktop site and organizing them in a mobile-friendly design pattern. For more information on the technical implementation of a mobile site, learn about the Mobile SEO configuration options.
What are the top three things I should know when building a site for mobile devices?
1. Make it easy for customers.
Help your site's visitors to complete their objectives. They may want to be entertained by your blog posts, get your restaurant's address, or check reviews on your products. Design your site to help make it easier for your customer to visit your site and complete a task.
Outline the potential steps in your customers' journey to make sure that the steps are easy to complete on a mobile device. Try to streamline the experience and reduce the number of user interactions. In this example: (1) the customer clicks on a site after searching for lamps to buy; (2) browses through a selection of lamps; and (3) purchases the desired lamp.
2. Measure the effectiveness of your website by how easily mobile customers can complete common tasks.
Making a mobile site requires prioritization. Start by working out what the most important and common tasks are for your customers on mobile. Being able to support these tasks is critical and this is why the measure of your mobile site is how well customers can complete their objectives. There are ways to make the design of your site support ease of use too. Focus on consistency in your interface and providing an unified experience across platforms.
"Mobile shoppers put ease of use foremost when it comes to mobile shopping sites, with 48% of respondents citing it as the most important quality of a mobile site they visit," says MediaPost.
3. Select a mobile template, theme, or design that's consistent for all devices (for example, use responsive web design).
Responsive web design means that the page uses
the same URL and the same code whether the user is on a desktop computer, tablet, or mobile
phone – only the display adjusts or responds according to the screen size. Google recommends
using responsive web design over other design patterns. One of the benefits of responsive
web design is that you only need to maintain one version of your site instead of two. You
don't have to maintain the desktop site at www.example.com and the mobile
version at m.example.com – you'll maintain only one site, such as
www.example.com, for desktop and mobile visitors.
A responsive site adjusts the display to various screen sizes while using the same URL and
code. All three devices above use www.example.com (rather than the mobile page at
m.example.com and the tablet page at t.example.com).
"Using responsive web design enabled Baines & Ernst to optimize its site experience across different screen sizes without creating multiple websites. They noticed that visitors visited 11% more pages on their site per visit and mobile conversions grew by 51%."
Conversions happen when a customer performs a desired action, such as buying products, calling the business, or signing-up for a newsletter.
For details on how to implement responsive web design, refer to Web Fundamentals. If you'd like to weigh the pros and cons of different implementations for mobile, tablet, and desktop websites, read Building Websites for the Multi-Screen Consumer.
What are the top three mistakes beginners want to avoid?
- Forgetting their mobile customer. Remember that good mobile sites are useful – they help visitors complete their tasks, whether that's reading an interesting article or checking your store's location. Don't get caught in the trap of only creating a mobile-formatted site that doesn't provide the full functionality. Instead, remember to build a mobile-friendly site (one that's truly useful for mobile customers and optimized for customers most common tasks).
- Implementing the mobile site on a different domain, subdomain, or subdirectory from the desktop site. While Google supports multiple mobile site configurations, creating separate mobile URLs greatly increases the amount of work required to maintain and update your site, and introduces possible sources of technical problems. You can often simplify things significantly by using responsive web design and serving desktop and mobile on the same URL. Responsive web design is Google's recommended configuration.
- Working in isolation rather than looking around for inspiration. Check out other sites in your space or your competitors for inspiration and best practices. While you may not be the first in your industry with a mobile site, you have the benefit of being able to learn from those before you.