Author: Jeremy Weinstein, Google Webmaster
Mobile internet usage is skyrocketing worldwide. Throughout 2009, 50% of all new internet connections worldwide are coming from phones (eMarketer, 2008 and 2009). Google internal data shows that as mobile browsers improve, users' browsing habits increase.
Mobile browsers render web pages differently from desktop browsers, so some steps are needed to make them work well on phones. This article contains some basic technical and non-technical tips for making your web content faster and more suitable for consumption on mobile devices.
Make your pages and applications accessible to mobile
Provide an obvious link to the mobile version from the desktop version.
Do you really want users browsing your media-rich 800-pixel-plus wide site on mobile screens without even realizing there's a version you toiled over just for mobile? Make sure your users are even aware a mobile counterpart exists.
Use a conventional mobile URL, and advertise it.
No accepted standard exists for providing an address to a mobile version of a desktop service, but there are some recognized conventions: m.yoursite.com, mobile.yoursite.com or yoursite.com/mobile. Choose a simple mobile URL and publish it on your desktop site.
Make the user interface work for mobile devices.
Avoid requiring users to do a lot of typing. Provide large, actionable, clickable UI features. Provide URLs that are short and easy to type. Use easily actionable UI widgets and features that compose well together in a small format. Think about the scenario your mobile user is in when they're looking at your site: probably not sitting comfortable at a desk, so information must be able to be found fast. Make sure your content is clearly labeled and succinct.
Gmail provides a mobile version which is more accessible for mobile devices.
Format your website for a range of mobile browsers.
Full-featured (Mobile Safari, Android, etc.), half-featured (BlackBerry), and small-featured (older-style flip phones) browsers all exist in the mobile space. Consider how your mobile web page will look on screen sizes all the way from 150x128 to 640x480. Mobile browser standards can also differ by country. If you have an international audience, make sure your design is flexible enough to meet the devices available in those countries.
Reduce the number of requests and the amount of data transferred
To avoid a dramatic increase in latency, it is a good idea to reduce the number of times your website or application must make a round-trip request to your server. Single large objects load faster than many small ones due to TCP and socket behavior. Keep in mind that while these are general best practices, they especially apply to mobile.
Sprite your images using CSS or transfer your images using a data URI scheme. See the logo image on a Google Search result page for an example of a CSS sprite. Some of Google's services, such as Wave, consolidate static requests by using the data URI scheme, which is a way of including static data items in-line on a web page. The data URI technique will not work on older browsers and should be used for pages and applications specifically designed for iPhone, Android, or other modern mobile web browsers.
An image created with the data URI scheme.
Including an image by its base64 string may cause a loss in some compression provided by image formats (data transferred this way must rely solely on gzip for compression). But, you do avoid opening a new connection/HTTP request, which is often a more important savings factor for mobile.
Minify your code.
The less code, the smaller the amount of data transferred, the faster your page will load. While the size of data transferred is often not as important as minimizing round trips, every bit helps on high-latency mobile connections. See an article on HTML optional tags and CSS optimization.
Sometimes web pages and web services will redirect a single request several times. If your service requires redirects, perform the redirection server-side rather than client side, in order to reduce client-side round trip requests.
Load contents lazily.
Transfer data when needed and preload where appropriate. Don't load images that will never be seen by the end user. Time-to-text on mobile is important. If you have a mobile application that displays a gallery of images, consider downloading the previous and next image to increase UI speed, but don't load images that are far "out of reach."
Take advantage of new features in HTML
Use an application cache for local content storage.
HTML5 browsers (Mobile Safari, Android) can use an application cache to both reduce page startup time and to enable offline features.
Use CSS3 instead of images where possible.
HTML5 browsers that support CSS3 (again, Mobile Safari, Android) can use attributes for rounded corners, gradients, shadows, text transformations, canvas, and more. Using CSS to design your page instead of images can reduce data transfer.
New APIs provided by HTML5 are already being used to make Google's mobile applications. Some examples include: Mobile Gmail uses Application Cache. Mobile Google Search uses the HTML5 Geolocation API to show location-aware results. Google Maps for Mobile and Mobile Gmail both use the
canvas tag to avoid transferring images.
Plan for the lowest common denominator.
If you want your page or application to reach as many users as possible, you'll have to ensure its compatibility with varying degrees of support by mobile devices. Not only is minimalist code faster, but in general, the less complex the code, the more compatible it will be.
- Flash is currently not supported even by iPhone or Android browsers. Don't use it for mobile websites.
Test, test test
If you're a web developer, you're already familiar with the pains of cross-browser compatibility on desktop web browsers. Cross-browser testing is just as important for mobile devices.
In order to better format content for mobile device screens, mobile browsers may resize text and images and interpret CSS differently from desktop web browsers. Verify usability after the mobile browser has "had its way" with your page.
Reading a mobile web page or using a mobile application can feel very different once you try it in your hand. Don't assume interaction on your PC is equivalent to interaction on a mobile device.
- Android Emulator
- BlackBerry Device Simulators
- Opera Mini Simulator
- Palm Pre
- Windows Mobile
- User Agent Switcher extension for Firefox. Switch your desktop user agent to quickly test how a page may behave behind a different user agent.
- Page Speed Firefox/Firebug Addon. Evaluate a web page's performance and receive suggestions on how to improve it.