Designing Web Sites for Phone Browsers

Designing Web Sites for Phone Browsers April 2010 Microsoft Corporation Rev. 2.0 2 Information in this document, including URL and other Internet Web site references, is subject to change without notice. Unless otherwise noted, the companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted in examples herein are fictitious. No association with any real company, organization, product, domain name, e-mail address, logo, person, place, or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.  2010 Microsoft Corporation. All rights reserved. Microsoft, ActiveX, Internet Explorer, Windows, and Windows Phone are trademarks of the Microsoft group of companies. All other trademarks are property of their respective owners. 3 Contents Designing Web Sites for Phone Browsers ...................................................................................... 4 Understanding the Mobile Context ............................................................................................... 4 Considering Mobile Browsers ...................................................................................................... 5 Design for One Web ................................................................................................................. 5 Detecting Mobile Browsers .......................................................................................................... 6 Client-Side Browser Detection .................................................................................................. 7 Server-Side Browser Detection ................................................................................................ 7 Tiered Browser Support ............................................................................................................ 8 The ASP.NET Mobile Device Browser File .............................................................................. 8 Adapting for Mobile Browsers ...................................................................................................... 9 HandheldFriendly ...................................................................................................................... 9 MobileOptimized ....................................................................................................................... 9 Viewport .................................................................................................................................... 9 Progressive Enhancement with Script and CSS .................................................................... 10 Targeting Mobile Browsers ........................................................................................................ 15 Default to Available Fonts ....................................................................................................... 16 Be Aware of CSS Properties in the Mobile Context ............................................................... 16 Avoid Popup Windows ............................................................................................................ 17 Avoid Page Auto-Refresh ....................................................................................................... 17 Redirect from the Server ......................................................................................................... 17 Hover and Mouse-over Events ............................................................................................... 18 Handling Key Events .............................................................................................................. 18 Handling Screen Orientation Changes ................................................................................... 18 Expanded JavaScript .............................................................................................................. 19 XHTML Page Rendering ......................................................................................................... 19 Adjusting Text Size with Custom CSS .................................................................................... 19 Behavior of Fixed Positioning ................................................................................................. 20 Unsupported Plugins .............................................................................................................. 21 Designing Web Sites for Phone Browsers 4 Designing Web Sites for Phone Browsers These guidelines are provided to assist developers in optimizing Web content for mobile browsers, particularly for Internet Explorer® Mobile. Whether or not you are experienced in the art of Web content design and application development, you should read this document to understand what users expect of mobile content and how to design and build Web sites that meet or exceed their expectations. Understanding the Mobile Context You should assume that at some point your content will go mobile. With the dramatic increase in mobile Web traffic and consumer expectations of available high-quality content, developers are presented with a new set of opportunities and challenges. Device form factors and capabilities will vary, for example between laptop, netbook, tablet computer, and smart phone. It is important to note that we cannot simply categorize mobile devices by a single characteristic such as small screen size. This paper will later describe how to target Internet Explorer Mobile, where characteristics such as screen size and orientation come into play. We will first examine the broad context which draws a line between stationary and mobile Internet browsing. Stationary browsing occurs in a fixed location, with or without privacy, single-tasking or multi-tasking, and with expectations of consistent availability, network speed, and environmental conditions such as noise and lighting. The mobile browsing experience does not offer those same guarantees. That said, best practices are in place for considering, adapting, and targeting content for mobile devices. Thus, the remaining bulk of this paper is divided into four sections.  Considering Mobile Browsers: This section shares best practices for being considerate of the mobile browsing experience without dependencies on specific browsers or devices.  Detecting Mobile Browsers: Whether you are reusing content and adapting existing Web pages or creating new content targeted for the phone browser, the techniques described in this section may be relevant and useful.  Adapting for Mobile Browsers: This section explains how something as simple as adding a single HTML tag to an existing Web page can enhance the mobile browsing experience. Also, by customizing the browsing experience with CSS and JavaScript, developers can deliver the same content with progressive enhancements to both desktop and mobile browsers.  Targeting Mobile Browsers: This approach may involve repurposing or retailoring Web pages, but focuses more on how to create new content specifically for viewing in mobile browsers such as Internet Explorer Mobile. The approaches described in these sections are not mutually exclusive, in that for any given Web site each page or sub-element may or may not be designed to target mobile devices on a case by case basis. Designing Web Sites for Phone Browsers 5 Considering Mobile Browsers From a pure content perspective, Web developers have traditionally focused on who, what, when, and why information is accessed. Mobile browsing raises the stakes on prior considerations, and brings renewed awareness to where and how content is browsed.  Who: Mobile people who are away from their home and office. Use cookies to store and reuse common session data and save the user time during subsequent visits.  Where: Consider that network data connections are inconsistent, limited, and potentially expensive. Also consider environmental conditions: loud or quiet; bright or dark; sitting or walking; with or without privacy.  What: Yours, or someone else‟s content. Remember that you are competing for the attention of someone on the go. Be crisp, clear, and succinct. Avoid small fonts, subtle colors, complicated splash or introductory screens, large image files, and unsupported third party plugins. You should also design intelligently to avoid sending unused or irrelevant style sheets and script files.  When: Given accessibility to their devices, mobile users could browse your site at any time of the day. Depending on the scope of your content, consider optimizing for the date and time.  Why: Consider that mobile users are likely either in need of a solution, or bored and casually browsing.  How: Consider that mobile users are often focused on single-tasking and want quick access to perform targeted actions. Don‟t assume access to a keyboard or mouse. Consider that mobile users will interact with a stylus or finger gestures, so try to minimize the required input. Design for One Web In the simplest case, your site may be simple or fluid enough not to need mobile adaptation. If so, Internet Explorer Mobile will render the entire Web page zoomed-out and allow the user to zoom in on an area of interest. Internet Explorer Mobile assumes a default page width of 1024 and scales accordingly so that the entire page is in view. It is not expected that mobile users will be granted the same presentation or interactivity through a given site, but at a minimum all content should be visible even without applying style sheets or scripting. Here are some best practices for general Web design with a focus on the mobile context.  Use well defined standards such as HTML4.0, XHTML1.0, XHTML-MP, ECMAScript 3, AJAX (i.e. XMLHttpRequest), DOM Level 1, and Cascading Style Sheets (CSS) Level 2.1. Designing Web Sites for Phone Browsers 6  Use widely supported static content such as JPEG, GIF, and PNG, as well as rich media formats such as WMV, AVI, 3GP, MP4, and MP3. Caution: Internet Explorer Mobile currently supports streaming media via HTTP, but not through the Real-Time Streaming Protocol (RTSP) or Microsoft Media Server (MMS) protocol. Also note that rich media files are currently recognized and handled by their file type extension, and not by their Multipurpose Internet Mail Extension (MIME) types, so make sure that the file extension is the last text within the URL string for such links.  In consideration of small mobile browsers, use short and descriptive page titles.  Always use a DOCTYPE to ensure that your content is displayed as intended.  Separate content, presentation, and behavior to ease the path towards mobile adoption.  Clearly identify the file type or resulting action of links that would take the user out of the browser or otherwise break the user browsing experience.  Use CSS instead of tables for layout positioning. Using tables to position elements results in overly complicated code that may not abide by the principle of separating content from presentation. It is also more difficult to create table-based layouts that respond well to the varying screen sizes of mobile devices, particularly ones that are able to change their dimensions.  When you must use tables to display tabular data, avoid nested tables and limit the number of columns in consideration of small screen sizes.  Although supported within Internet Explorer Mobile, avoid using image maps since interactions within small mobile browsers can be limited and challenging.  Avoid using frames and framesets since they would occupy too much of the display area on small mobile browsers. Internet Explorer Mobile expands each frame by default to eliminate scroll bars and optimize the browsing experience. Detecting Mobile Browsers Whether you are reusing content and adapting existing Web pages or creating new content targeted for the phone browser, device detection can help to ensure a rich mobile Web browsing experience on a range of mobile devices. Browser detection can be implemented both on the client and the server. Client-side script is used to detect device and browser characteristics and capabilities, while script on the Web server examines the incoming user agent string from the browser. Additional techniques, including tiered browser support and third party databases will be discussed later in this section. Designing Web Sites for Phone Browsers 7 Client-Side Browser Detection A best practice for client-side browser detection is to test for the presence of particular criteria. For example, to query whether or not the browser supports DOM Level 1 use a script such as the following: function hasBasicDOM() { // Check for support of DOM Level 1 functions if (document.getElementById && document.getElementsByTagName) return true; return false; } A series of similarly themed tests could be run which focus purely on what the device and browser can or cannot do. Server-Side Browser Detection The most common server-side detection practice is to examine the user agent. For example, the user agent string for Internet Explorer Mobile is the following: Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0) ; Thus, one way of detecting Internet Explorer Mobile would be to look for the “IEMobile/7” sub- string. In practice, this kind of string search would be part of a larger detection scheme that segments incoming user agents into up-level and down-level tiers, and delivering the HTML content along with the corresponding style sheets and script resources to give the user the richest experience as appropriate. However, there are some pitfalls to consider when relying on the user agent string:  Complex logic could mistakenly exclude rich media capable browsers and devices.  Maintenance of a user agent string list as new browsers and devices come to market.  Devices could modify the user agent string and resemble another device or become unrecognizable. Designing Web Sites for Phone Browsers 8 Tiered Browser Support Since the user agent string cannot be relied on independently, it is recommended to segment your intended supported browsers into discrete levels or tiers. Some browsers may receive a richer set of content and presentation elements, while less capable browsers display a down-level experience. For more information about such progressive enhancements, read the Adapting for Mobile Browsers section later in this paper. There are various thresholds which draw the line between browser tiers, but a general rule of thumb is that rich media browsers meet the following criteria:  ECMAScript 3  W3C DOM Level 1  W3C standard box model support  CSS2 rendering  Client-side cookies support  AJAX XMLHttpRequest object support The ASP.NET Mobile Device Browser File The Mobile Device Browser File (MDBF) is a freely available third-party database file that can be downloaded from CodePlex at http://mdbf.codeplex.com that contains data on more than 1,500 mobile devices. Once this file is installed on your ASP.NET server, you can use the Request.Browser object to detect capabilities through dozens of browser properties. Here is a simple example: /* Query whether or not this is a mobile device */ if (Request.Browser.IsMobileDevice) /* This is a mobile device */ else /* This is not a mobile device */ Most requests take the form of Request.Browser[“PropName”], where PropName corresponds to the queried property. Here is an example to identify the input system that the device supports: // Returns “keyboard”, “telephoneKeypad”, or “virtualKeyboard” string sInputType = Request.Browser[“InputType”]; The MDBF file is continuously maintained, so be sure to check back for updates. A full list of supported capabilities is documented at the MDBF page on CodePlex. Designing Web Sites for Phone Browsers 9 Adapting for Mobile Browsers This section explains the techniques that you can use to adapt existing desktop Web content to work in the mobile context. At a basic level, Internet Explorer Mobile enables users to zoom in on an area of interest. Simple steps can be taken to provide an even better experience. One of the easiest practices is through the use of mobile ready tags. HTML tags can be inserted within the content section of a Web page and provide specific information about display capabilities. From oldest to newest, the mobile ready tags are HandheldFriendly, MobileOptimized, and Viewport. Tip: The HandheldFriendly and MobileOptimized tags are not required to target content for Internet Explorer Mobile, for which the Viewport tag is preferred. To be compatible with a wider range of browsers, it is recommended to use all three tags in the order listed above. HandheldFriendly The HandheldFriendly tag indicates whether or not the content is designed for a mobile browser. Setting this tag value as true signals that the content is mobile or handheld friendly. This tag also tells mobile browsers that the content should be displayed without applying scaling. MobileOptimized The MobileOptimized tag provides the browser with an integer that corresponds to the intended display width of the screen. This tag is also used by search engines to determine if the page is mobile-optimized. When this tag is set, the browser forces the page into a single-column layout at the width that is specified by the tag, and prevents the layout engine from attempting to fit the content on the screen. Viewport The viewport is a rectangular region that controls how the document‟s content is laid out and where text will wrap on the page. The default display width for Internet Explorer Mobile is 1024 pixels, so if your Web page width is less than 1024 pixels you should set the viewport width accordingly. Designing Web Sites for Phone Browsers 10 Internet Explorer Mobile supports the following viewport property and value paired settings. Property name Value width Sets the width of the viewport. Can be any integer number or device-width. The range is from 320 to 10,000. The default value is 320. height Sets the height of the viewport. Can be any integer number or device-height. The range is from 480 to 10,000. user-scalable Indicates whether or not the user can scale the viewport, or in other words whether or not they can zoom in and out within content. yes or no The de