The document provides guidelines and best practices for developing mobile web content, including: - Start with a lowest common denominator approach using simple XHTML and stylesheets to ensure broad compatibility. Then build apps optimized for specific devices. - Keep pages small by minimizing images, stylesheets, and file sizes. Guide user input and provide defaults to reduce keystrokes. - Consider content adaptation strategies like redirection to mobile-optimized sites, or serving the same content with reformatting. Unification allowing shared bookmarks is the ideal approach. - Resources and tools are recommended to test mobile web pages and emulate different devices.

1. Mobile Web Best Practices
Woody Pewitt
Technical Evangelist
DevExpress
woodyp@devexpress.com

2. Welcome to a Technology
Revolution

3. • Rare availability
• Desired functionality
• Expensive initial cost
• Ever reducing costs and greater availability
• And it all started in…
1910

5. “Pocket watches provide the
closest historical parallel to
the remarkable rise of the
mobile phone.”
—Jon Agar , Constant Touch

8. Staggering Numbers
1996 GSM phones in 103 countries
2000 10 million i-mode users (Japan)
2002 1 billion mobile phone users worldwide
2009 3 billion mobile phone users worldwide

9. UK More mobile phones than humans...

10. Problem

11. Reader Poll
• ~400 Participants
• 159 Unique handsets
(Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, Nokia 6230...)
• 19 Manufacturers
• 44 Countries
– Cameron Moll
• Test!
– http://cameronmoll.com/mobile/mkp/

13. Symbian
41%
Research In
Motion
18%
Android
17%
iOS
14%
Win Mobile
5%
Linux
3%
Other OSs
2%
Q2 2010 Market Share (%)
Symbian Research In Motion
Android iOS
Microsoft Windows Mobile Linux
Other OSs
Symbian
51%
Research In
Motion
19%
Android
2%
iOS
13%
Win Mobile
9%
Linux
5%
Other OSs
1%
Q2 2009 Market Share (%)
Symbian Research In Motion
Android iOS
Microsoft Windows Mobile Linux
Other OSs

14. Symbian
6%
Research In
Motion
11%
Android
33%
iOS
14%
Win Mobile
-8%
Linux
-9%
Other OSs
19%
Market Growth
Symbian Research In Motion
Android iOS
Microsoft Windows Mobile Linux
Other OSs

15. So What Now?
• Wireless Access Protocol (WAP)
http://en.wikipedia.org/wiki/Wireless_Application_
Protocol
• Simple HTML/XHTML
• HTML 4.0 Guidelines for Mobile Access
– http://www.w3.org/TR/NOTE-html40-mobile/
• Mobile Web Best Practices 1.0
– http://www.w3.org/TR/mobile-bp/

16. W3c Default Delivery Context
• Usable Screen Width
– 120 pixels, minimum.
• Markup Language Support
– XHTML Basic 1.1 delivered with content type application/xhtml+xml.
• Character Encoding
– UTF-8 [UTF-8].
• Image Format Support
– JPEG.
– GIF 89a.
• Maximum Total Page Weight
– 20 kilobytes.
• Colors
– 256 Colors, minimum.
• Style Sheet Support
– CSS Level 1. In addition, CSS Level 2 @media rule together with the handheld and all media
types.
• HTTP
– HTTP/1.0 or more recent [HTTP1.1].
• Script
– No support for client side scripting.

17. Content Adaption Strategies
1. Do nothing
2. Strip images and styling
3. Handheld stylesheets
4. Mobile-specific site/app

19. Content Adaption Strategies
• One Size Fits All
– No Change
– Easy for the (lazy) Developer
– Reasonable on Advanced Phones (ie: iPhone)
– HORRIBLE for most phones.
• Minimal Adaption
– Cater to the lowest dominator
– Will Look OK on most phones
– But fails to leverage of features of more advanced
phones

20. Content Adaption Strategies: Redirection
• Redirection
– Server Recognizes the Browser is from a
mobile device and redirects it to a different
webpage (ie: .mobi v. .com)
– Web Fragmentation / Can’t Share Bookmarks
– dotMobi – ”this approach is probably best
considered a temporary solution. “

21. Content Adaption Strategies: Unification
• One Site for Everyone
– Server Recognizes the Browser is on a
mobile device and reformats the website
accordingly.
– Allows for bookmark sharing
– Hardest on Developers
– Easiest on Users
– dotMobi – ” ultimately leads to more
satisfactory user experiences and repeat
visits to your site. “

22. Optimize Navigation
• Provide a consistent but minimal navigation at
the top
• Use descriptive links texts, with access keys for
the most important ones
• Use an easy-to-type address for your entry page
• Don't put too many links on a page, but make
sure each page of your site is easily reachable

23. Keep it Small
• Minimize
– Terse, efficient markup
– Keep style sheets small
• Page Size Limit
– Be aware of memory limitations
• Scrolling
– Avoid 2D scrolling at all costs

24. Minimize Network
• Users have to pay!
– Most people don’t have unlimited internet
plans
• Avoid
– AutoRefresh
– Redirection
– Externally linked Resources
• Enable Caching

25. Guide Input
• Minimize Keystrokes & Free Text
• Provide Defaults

26. Users on the Go
• Clarity
– Sparse
– Short Page Title
– Clear Central Meaning
• Suitable for a Mobile Context

27. Recommended Approach
Recommend that a mobile web application strategy is developed in
stages in the following order:
• Start with Lowest Common Denominator: build a mobile website
using simple XHTML and web 1.0 technologies to guarantee
compatibility with most mobile browsers.
• Then build specific Web Apps for better user acceptance and user
experience on the particular device
– iPhone
– Symbian S60
– Blackberry
– Android
– Opera Mini
This approach will make the web app available to a large percentage of
mobile users and at the same time provides optimal user experience
for the particular device and mobile browser.
Your mileage may vary!

28. Mobile Web Checkers
• How to ‘debug’ HTML?
• Use these programs to ensure your code
is compliant
– W3C Mobile Web Best Practices checker
• http://validator.w3.org/mobile/
– Ready.mobi
• http://ready.mobi/

29. Resources
• Designing Web Sites for Windows Mobile Powered Devices
– http://msdn.microsoft.com/en-us/library/bb415387.aspx
• Mobile Web Design
– http://www.cameronmoll.com/archives/000398.html
• How to Design and Build a Mobile Website
– http://www.webpagefx.com/design-build-mobile-web-site.html
• A Look At Mobile Web Design – 5 Sites To Visit From Your Android Phone
– http://androidandme.com/2009/06/news/a-look-at-mobile-web-design-5-sites-to-visit-from-your-android-
phone/
• Guidance
– http://en.wikipedia.org/wiki/Mobile_Web
– http://www.w3.org/2006/07/Mobile_Web_Design.pdf
• Mobile Web Best Practices 1.0
– http://www.w3.org/TR/mobile-bp/
• Mobile Web
– http://www.w3.org/standards/webdesign/mobilweb
• ASP.NET Web Sites for Mobile Devices
– http://msdn.microsoft.com/en-us/library/ms178619(VS.100).aspx
• Mobile Web Developer’s Guide
– http://www.networksolutions.com/help/mobi-guide.pdf
• DeviceAtlas (database of mobile devices )
– http://deviceatlas.com/
• Gartner Worldwide Mobile Device Study
– http://www.gartner.com/it/page.jsp?id=1421013

30. Tools
• Google Mobile Proxy
– http://www.google.com/gwt/n
• mobiReady testing tool
– http://ready.mobi/
• Mobile Emulators
– http://mobiforge.com/emulators/page/mobile-
emulators