|
Mobile Web Best Practices
Though most smart phones are capable of browsing websites, no mobile phone is as efficient as a desktop or laptop. Some smart phones are more capable than others, however. The W3C Mobile Web Initiative has developed a set of best practices that will help designers develop websites that will support mobile web browsing. These best practices used in conjunction with HTML5, XHTML and Wireless Markup Language (WML) have provided a foundation for mobile website development. Designers hope to improve the mobile browsing experience to meet the needs of the growing mobile web community.
The Importance of Preparing for Growth of Mobile Web Traffic
In 2010, web traffic from mobile devices increased significantly. More users are making retail transactions from their mobile phones and retrieving information from mobile phone browsers. In North America, the web traffic from mobile devices increased by 110%, according to a study conducted by Quantcast. Globally, web traffic increased by 148%. Mobile web traffic only accounted for 1.3% of all pages viewed in North America in 2009. This number is expected to reach 2.3% by the end of 2010. New devices catering to mobile web browsing is expected to fuel this growth. Globally, the mobile market share is expected to increase from 0.95% to 1.8%. Though these percentages are insignificant compared to overall web traffic, the practice is becoming more popular and is demanding attention from the website producing community.
Currently, there are approximately over four billion mobile devices in circulation. According to MobiThinking, experts expect 85% of these mobile phones to have Internet access by 2011. There are more mobile phones with Internet access than there are desktop computers or automobiles. Both desktop computers and automobiles have approximately 1 billion of each in circulation. With this number of users accessing the mobile Internet, website producers will soon have to develop applications to cater to this group.
Mobile retailing is also a growing industry. Currently, eBay and Amazon are competing for the number one position in mobile retail website traffic, according to Nielson Mobile Media View. According to results released in June 2010, eBay Mobile was ranked number one with 6.4 million unique visitors. Amazon was not far behind with 5.82 million unique visitors. PayPal ranked third with 2.47 million unique visitors. Experts speculate that the majority of the PayPal traffic originated from users paying on sites such as eBay. Many users on eBay will pay with PayPal. Mobile payments on PayPal are expected to increase 255% from 2009. This percentage represents $500 million in processed payments compared to last year’s $141 million.
For these reasons alone, companies with websites will have to consider creating websites that cater to mobile users. This will help companies maintain their competitive advantage by introducing mobile-compatible websites before the competition.
What to Consider When Building a Website viewed by Mobile Phone Users
Since mobile web use is growing rapidly, companies must be prepared to build websites that are compatible with mobile devices. Web design for mobile devices must account for differences in the browsers and the different screen sizes. While most mobile devices have screen sizes that are between 128x160 and 320x480, other mobile phones have screen sizes between 176x220 and 240x320. Designers must cater to these differences.
Website designers must write mark-up for mobile browsers. Wireless Markup Language (WML) is XML used for mobile phones. This mark-up is compatible with older phones, as well as, newer model phones. Web browsers designed only for desktop and laptop web browser use is often written in XHTML. While most modern phone browsers are capable of interpreting XHTML, designers must create mark-up that is valid for mobile phones as well.
Currently, basic phones account for a large majority of phones sold. WML caters to the basic phone user and web browser. Nokia supplies a large majority of basic phones. Currently, they have sold 200 million of their basic units worldwide. This is a large market that still uses WML as opposed to XHTML.
Since many mobile phones cannot handle extensive graphics or cannot scale to the screen size, web designers must determine what information to include on the website for easy loading. Phones like iPhone and Android-based phones have made significant advances in terms of usability. However, traditional websites are not optimized for these devices. Therefore, users may find it time-consuming to browse the web using these devices. Users of older phones may become even more frustrated. These users often have difficulty navigating through sites with form fields and other extensive graphics.
Some mobile phone designers will provide alternate versions of popular websites for mobile phone browsers. Experts recommend a separate website designed for mobile phones. These websites focus on only the features mobile visitors are most likely to use. Mobile users are expected to search for contact information, product information or store locators.
The process of creating mobile versions of websites has improved. Website designers may create a sub-domain or separate domain from the primary domain. This domain is typically designated by “mobile.yoursite.com” or “yoursite.mobi.” Without proper redirect, most users will still reach the primary domain, as opposed to the mobile domain. Browser detection will help direct users to the proper website format for their model phone.
Online emulators are available for designers to test their mobile websites. Emulators demonstrate how mobile websites will look on each mobile device. Most mobile devices are represented, but not all. However, this is a more economical solution to purchasing every available phone to test the mobile website.
Limitations of Viewing Websites on Mobile Phones
The small screen size is the source of most web browsing limitations on the mobile phone. Traditional websites are designed to be viewed on a desktop screen. Some mobile phone users can only retrieve basic text information from their mobile phones and cite this as a device limitation. Most mobile devices cannot load the extensive graphics such as flash, PDF files or form fields on mobile phones. If the form fields load, the website may time out before the user is able to enter and complete all of their information.
Some older mobile phones also have difficulty interpreting Java-based applications. Client-side scripting and storage of cookies are typically not supported by smart phones. Most websites use cookies to enhance the user experience or to keep track of unique visitors to the website. Since cookies cannot be stored by most devices, the data gathered for tracking unique visitors may be inaccurate. Many devices cannot access secured sites as well. This makes it difficult for viewers to view banking account information or other sites that do not have a special mobile website.
Mobile devices are also limited in their ability to multitask and open multiple browsers at once. iPhone 4 has made an attempt to improve this limitation, but most smart phones are only capable of viewing one page at a time. Applications are available that will allow multiple windows to be opened at once. Often, these windows may not be viewed on one screen.
Most websites are not designed to operate efficiently with mobile devices. Websites require clicking on a link to open a page. This action is easily performed with a mouse but is challenging on mobile devices that use a scrolling functionality. Mobile devices with touch screens are more efficient, however.
Because of the limitations, many web browsing experiences are slow and frustrating. Some experiences are even slower than dial-up Internet. Many devices that are not designed for business may limit the number of characters that may be sent in an email to prevent the device from operating slowly. Bandwidth charges may become quite expensive without flat fee rates. Charges may accumulate fast for consumers who are paying by the minute or by usage. Bandwidth is also lower for cellular devices than fixed connections. This slows the browsing process.
Website loading times and browsing may also be limited by the processor speed, the battery capacity, the memory amount and the storage amount available on the mobile device. Text input may also be slow on mobile devices because of the size of the keys on the keyboard.
Common Problems Websites have with Mobile Traffic
While experts are predicting that developers will design a universal website that will work on mobile phones, laptops and desktop computers, this technology is still not fully developed. In five years, experts expect to have most of these problems resolved. Until then, consumers have to contend with problems related to mobile traffic.
The major problem with mobile traffic is the inability to consistently record accurate mobile web analytics data.
Traditional analytics involves collecting data about the user, the page visits, conversions and any other behavioural aspects of the website visits. Mobile web analytics differ slightly. Traditional Google Analytics may provide misleading data from mobile websites. Only information from advanced devices such as iPhone and other smart phones will be recorded. The information recorded is often basic and includes only statistics such as page views and visits. Companies relying on this information may not receive information from the most basic browsing devices.
Traditional web analytics rely on different IP addresses to count the number of unique visitors to a site. Cellular wireless network website requests are not original and are initiated from the network access providers. Therefore, there is no unique identifier for each user on the web. This, however, depends solely on how the user is connected. If the wireless user is connected via, WiFi or fixed connection, the data may be more accurate than via cellular wireless or satellite wireless connections.
Mobile web analytics also measure metrics such as screen resolution, model and manufacturer. To obtain this information per user, a Device Atlas or WURFL may be combined with special HTTP headers to extract the information. This is usually extracted on websites designed specifically for mobile devices. Most designers cannot execute this properly on the mobile Web because JavaScript and cookies are so unreliable.
Cookies are the primary identifier of unique users on the web. Most metric gathering relies on cookies being placed on the device. The “HTTP referrer” is often used to determine where the navigator’s visit originated from; however, this is not available on many mobile devices. Many mobile device designers disable this function to conserve bandwidth.
Mobile web traffic is often deterred altogether by the differences between web browsers. Internet Explorer, Safari and Firefox are all remarkably different. Designers must account for the differences in order to even gain access to the website. iPhone and Google Android phones have fully functional browsers that make it easier to access web pages via mobile devices.
Best Practice for Solving Problems with Mobile Traffic
Designers have devised ways to collect mobile data and accommodate mobile traffic users. Some companies have developed website convertors to convert standard sites into sites that work specifically with mobile phones. In general, web designers should adhere to common principles to ensure that their websites are compatible with mobile devices:
-
Thematic Consistency: Thematic consistency ensures that content is accessible on a variety of sites regardless of the type of device.
- Page Content and Layout: Designers should present context in a way that is suitable for mobile viewing. The text should be written in clear, simple language. Limit scrolling to one direction. Most mobile devices cannot support scrolling in more than one direction. Graphics are not recommended for spacing. If a background image is used, ensure that it remains readable on the device.
- Page Definition: Many mobile devices do not support frames. Avoid the use of frames if possible. Always aim to provide a simple website that is also informative.
- Provide a Consistent Experience: Always design sites to meet the needs of Default Delivery Context. This will ensure that mobile users receive a consistent experience on all devices, including more capable devices.
- Testing: Designers should test mobile websites on emulators or actual devices. Emulators should be used with caution as they often behave differently than actual devices. Where practical, test mobile sites on as many actual devices as possible.
- Refreshes, Redirections and Pop-ups: Designers should avoid pop-up windows on websites. Mobile devices cannot support them. Do not automatically refresh the page on mobile page designs. Alternatively, provide a means to turn the function on or off. Redirects only operate quickly if the server is configured to redirect with HTTP 3xx codes.
- Resource URLs: Designers should strive whenever possible to keep URLs short for mobile devices. This will make it easier to type the information on the small cellular device. Designers should account for users linking to a site through a hyperlink and other sources as well.
- Minimize Navigation: When designing for websites, experts recommend minimizing navigation at the top of the page.
- Minimize Links: Balance the number of links provided on the page.
- Target Identification of Links: Mobile device users are often slowed by following links on websites. Always identify the target of the link to avoid unnecessary navigation by users on the website.
- Image Maps: Designers are encouraged to not use image maps unless the device supports the effectively.
- Externally Linked Resources: Externally linked resources may increase the load times of mobile context. Designers should keep them to a minimum.
- User Input: Always keep the required number of keystrokes to a minimum. Ensure that labels will appear along with any related form entries. Provide default values to make selection easier.
Web Analytics
Packet sniffing is a solution provided by designers to address the data capture problem. Tagless data capture or passive network capture records all users and works with all devices. This form of web analytics does not require JavaScript, plug-ins, cookies and server logs. The content is captured through the client/server exchange.
Referenced Websites:
- http://en.wikipedia.org/wiki/Mobile_Web
- http://ssb.mofusepremium.com/blog/mobile-web-traffic
- http://www.internetretailer.com/2010/08/05/mobile-site-traffic-rankings-look-lot-e-commerce-stats
- http://articles.sitepoint.com/article/designing-for-mobile-web
- http://www.stemkoski.com/how-to-design-websites-for-mobile-phones/
- http://www.webdesign.org/web-design-basics/templates-tuning/how-to-create-a-mobile-phone-friendly-website-design.17553.html
- http://en.wikipedia.org/wiki/Mobile_Web_Analytics
- http://www.webtrends.com/Products/Analytics/Mobile.aspx
- http://articles.techrepublic.com.com/5100-10878_11-6095452.html
|