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. Walgreens GVP and Chief Technology Officer of eCommerce, Abhi Dhar, explains, "Our goal with everything we do on mobile is to make our customers’ lives easier."
Design your site to help make it easier for your customer to complete their most common tasks: from task conception, to visiting your site, to task completion.
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," cites MediaPost.
3. Select a mobile template, theme, or design that’s consistent for all devices (for example, use responsive web design).
"Responsive web design" or RWD 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 RWD over other design patterns. One of the benefits of RWD is that you’ll only need to maintain one version of your site instead of two (i.e., you won’t need 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).
"Using RWD enabled Baines & Ernst to optimise 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, see the developer content at 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?
Mistake 1 - 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 (one that looks pretty on mobile) because it stripped away all useful functionality. Instead, remember to build a mobile-friendly site (one that’s truly useful for mobile customers and optimized for customers most common tasks).
Mistake 2 - 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 (RWD) and serving desktop and mobile on the same URL! Responsive web design is Google’s recommended configuration.
Mistake 3 - 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. The Mobile Playbook and Google Multi-screen Success Stories are also full of ideas.
What should I think about when working with a developer?
Follow the following steps to ensure a good outcome when working with a developer to build your mobile-friendly site.
1. Ask to see your developer’s references and portfolio of mobile websites.
Ask if your developer has experience with responsive web design (RWD). If you have a desktop-only site, inquire whether your developer has transitioned a desktop site to a responsive site. Check out other sites they have built. Talk to their references and prior customers to see how they feel about your developer. You can use tools like Google’s PageSpeed Insights to look at a developer’s portfolio. PageSpeed Insights highlights factors that hinder a page’s speed or hurt a page’s usability.
2. Make sure your developer understands your mobile customer.
Tell the developer about your business and provide him/her with the most common tasks you want optimized on the mobile site. Make sure that they develop a site that supports the functionality that mobile customers need.
3. Ask your developer to make a commitment to speed.
Don't make customers wait too long for your pages to load in their browser. Ask if your developer is aware of PageSpeed Insights (the tool above) and if they're familiar with techniques to help pages load faster. Your contract can include pages "rendering" as fast as your competitors according to WebPagetest. Or, if that's too difficult, perhaps get their commitment to a PageSpeed Insights result with a green checkmark which doesn't have any issues marked "Should Fix". (If pages don't receive a green checkmark, it's up to you and your developer to weigh the costs and benefits of correcting the issue.) More information on mobile page speed can be found in the video "Quick fixes in mobile website performance".
4. Have your developer install web analytics.
Install web analytics such as Google Analytics, so that you can collect aggregate information about your site’s performance.
5. Make sure that you and your developer are aware of Google’s Webmaster Guidelines.
The guidelines contain information on how Google finds, processes, and ranks your site’s content.
6. Make sure your contract includes improving your mobile site after the initial launch.
You’ll likely collect feedback from customers and data from web analytics that you’ll want to incorporate to make your site even better.
You may want to consider Google AdWords’ list of recommended mobile and multiscreen vendors. For more information about mobile website implementation, see our docs on Mobile SEO.