How To Create Web Sites For Mobile Clients

How to create web sites for mobile clients using . NET 4.0
Woody Pewitt
Product Manager
MindTouch
woodyp@mindtouch.com
woody@pewitt.org

Welcome to a Technology Revolution

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

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

Staggering Numbers
1996GSM 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

UK More mobile phones than humans...

Problem

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/

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/

Content Adaption Strategies
Do nothing
Strip images and styling
Handheld stylesheets
Mobile-specific site/app

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

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. “

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. “

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

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

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

Guide Input
Minimize Keystrokes & Free Text
Provide Defaults

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

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/

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

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

http://blog.pewitt.org	35
http://www.slideshare.net	12
http://www.linkedin.com	1

How To Create Web Sites For Mobile Clients

by Woody Pewitt

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 48

Statistics

How To Create Web Sites For Mobile Clients Presentation Transcript