Standards-Based Mobile Web Development

Standards-BasedMobile Web Development
Portland Code Camp, May 2010
5/22/2010
1
LearnTheMobileWeb.com

Agenda
5/22/2010
2
Introduction
Why Learn Mobile Web Development?
… Mobile Web != Desktop Web
Explosive Growth of Mobile Web
… In Size and Influence
Standards-Based Approach to Mobile Web Development
… Web and Mobility Standards and Usability Best Practices
Learn the Mobile Web!
Courses, Book and User Group

Introducing Me
5/22/2010
3
Gail Rahn Frederick
gail.frederick@gmail.com / 503-260-0910
Mobile Developer and Enthusiast for 7+ Years
Mobile Applications and Mobile Web Services on 6+ operators in 10+ countries in North America and Europe
Mobile Software Architect at Medio Systems
Personalized mobile content discovery
Instructor of Mobile Web Development
PCC, Mt Hood CC and online at Learn the Mobile Web
Technology Writer
Blogs and Software Books

Introducing You
5/22/2010
4
Do you …
Own a Mobile Phone? A Smartphone?
Browse the Web on your Phone?
Browse Primarily on your Phone?
Have you …
Downloaded a Mobile App? Paid for an App?
Published a Mobile App? A Mobile Web Site?
Earned Money as a Mobile Publisher?
Adapted Mobile Content Using a Device Database?

It’s All One Web
5/22/2010
5
W3C’s One Web Vision
The same information and services available to users irrespective of the access device
However, the same information may not have the same representation across all devices
So … the same Web content should be available to mobile and desktop devices (i.e. browsers)
But the Mobile Web …
looks different (screen size, device capabilities)
acts different (user behavior, browser behavior, input methods)
is accessed differently (radio network, wi-fi, transcoders)
Mobile Web != Desktop Web

Why Learn Mobile Web Development?
5/22/2010
6

Why Study Mobile Web Development?
5/22/2010
7
The Mobile Web is Totally New
Mobile Web != Desktop Web
New Best Practices and New Gotchas
Desktop Metaphors Simply Do Not Apply
The Mobile Device is Totally New
It’s Your New PC … and Exceedingly Personal
The Mobile Browser is Totally New
Has Unique Benefits, Quirks and Workarounds
Best Cross-Platform Mobile Technology, Despite Fragmentation
Especially for Smartphones
The Mobile User is Totally New
Network and Website Use, Session Lengths and Navigation Methods

The Mobile Web is Totally New
5/22/2010
8
New Markup and Scripting Languages
WML, XHTML-MP, Compact HTML, CSS-MP, JavaScript-MP
Partial Implementations of Standards is OK
Flawed Implementations are OK, too!
Optimize for Network Bandwidth
Document Size Matters. Even for Smartphones.
The Mobile Web is the Wild, Wild West
Operators are Free to Block Traffic to Your Site
Transcoding Proxies Re-Format your Markup
Defensive Programming is Essential

The Mobile Device is Totally New
5/22/2010
9
Truly a Personal Computer
What do you speak, text and photograph on your phone?
Ultimate Companion for Day-to-Day Living
Stores your Location, Interests, Friends and even Money
This data can be stored, aggregated, leveraged and monetized by OEMs, operators and intermediaries.
Ultimate Platform for Social Networking
Contact List = Friends List
Motoblur, Windows Phone 7 and other Social OSes
Plenty of personal subscriber data to monetize!

The Mobile Browser is Totally New
5/22/2010
10
New and “Improved” Markup Languages
HTML and XHTML-MP with Proprietary Extensions
Older, Weirder Markups like WML and Compact HTML
Mobile is the Killer Use Case for HTML5
Persistence, Canvas and Geolocation
Advanced Features affect Battery Life
JavaScript, Timer-Based Refreshes, AJAX, etc.
Improperly Formatted Web Pages have Drastic Effects
Browser Hangs or Crashes
Phone OS Resets or Powers Down
Still relevant for featurephones and dumbphones!

The Mobile User is Totally New
5/22/2010
11
Mobile Users fit into Three Behavioral Groups
According to Google Usability Professionals
Repetitive Now
Checking same data over and over: weather, stocks, scores, news, etc.
Optimize information access using cookies
Bored Now
People with time on their hands – commuters, cafes, etc.
Casual web surfers
Urgent Now
Business locations, directions to airport, etc
Location-based search activity. Wants to find important data fast.
Source: Google Presentation at NY Chapter of Usable Professionals Association, 2007

Mobile WebUsage Statistics
5/22/2010
12

Prevalence of Mobile Phones
5/22/2010
13
Source: Communities Dominate Brands Weblog and Mobile Web Development by Cameron Moll

Mobile Web vs. Desktop Web
5/22/2010
14

Mobile Web as Cross-Platform SDK
5/22/2010
15
Today:
iPhone, Android, RIM, Windows Phone 7, LiMo, Meego …
Fragmentation Concern:
An API for Every Handset Vendor
What is the new cross-platform technology?
A standards-based mobile Web browser.
Source: Sender 11

Smartphone Use is Exploding
5/22/2010
16
41% Percent of Consumers Will Buy a Smartphone Next
Smartphones are 38% of US handsets in 2013
By now, the average U.S. consumer has had 4 mobile devices
Appetite for more advanced features
Source: Yankee Group, June 2009
People want smartphones but don’t know how to use them.
Source: 2010 BestBuy Survey

Mobile Data Adoption Skyrockets
5/22/2010
17
25% of consumers without mobile data services intend to start using them shortly
Consumers intend to dramatically increase use of mobile data services by 2011 ― with a significant ramp-up in 2010.
Up to 71% of consumers anticipate daily use of services such as mobile Internet
But, concerns about cost, speed and quality of service.
Source: Nielsen and Tellabs Study of Mobile Web Usage, Feb 2009

Mobile Web Grows Faster than Expected
5/22/2010
18
440,100 Touch-Enabled Mobile Web Sites
185,000 Apps in iPhone App Store
35,947 apps in the Android Market
Touch-Enabled Mobile Web sites are growing at an annual rate of 232%
iPhoneapps are growing at an annual rate of 144%
Android apps are growing at an annual rate of 403%
Source: Taptu Mobile Touch Web Report

What does Google Think?
5/22/2010
19
Mobile will be the #1 advertising growth area in 2010
Widespread uptake of data-enabled mobile devices
With GPS, cameras, personalization, social and local features, Google SVP of product management, Jonathan Rosenberg, said
“There is potential to make this mobile web better than the PC web.”
Source: GigaOM, Jan 2010

Standards-Based Approach to Mobile Web Development
5/22/2010
20

Formula for Success
5/22/2010
21
Mobile Web Development =
Web Standards + Mobile Usability + Content Adaptation + Network Optimization

Web Standards
5/22/2010
22

Crowded Web Standards Landscape
5/22/2010
23
Markup
HTML5, HTML, XHTML Mobile Profile, Legacy Markups
Styling
CSS, Wireless CSS, CSS-MP
Scripting
EcmaScript-MP, JavaScript 1.3 – 1.7
Device Databases
WURFL, Device Atlas, DDR-Simple API
Best Practices
Page Design, Transcoder Defense, Mobile Advertising
Validators
Markup Languages, Styling, Mobile Readiness
Standards Organizations
W3C, dotMobi, Open Mobile Alliance, Mobile Marketing Association, ECMA and Open Source projects like WURFL

Skepticism of Mobile Standards
5/22/2010
24
Membership of Standards Bodies
Members from Big Companies with Agendas
Independent Developers are Under-Represented
Mobile Web in its Infancy
Rush to Standardize Leads to Re-Work and Missed Targets

Mobile Web Development Best Practices
5/22/2010
25
Simple Design and Fast Rendering
Slow-to-Load Sites Lose Users
Mobile users browse with images turned off
Even smartphone users…
Scrolling Sucks
Minimize document byte size. Whitespace is Expensive.
Validate! Validate! Validate!
http://validator.w3.org, http://ready.mobi, etc…
Test! Test! Test!
Firefox, Emulators and on Actual Devices.
Mobile browsers are Buggy

Mobile Usability
5/22/2010
26

Utility on the Mobile Web
5/22/2010
27
“Utility is the engine of the mobile web”
Solve a real problem for a consumer on the move.
What can mobile users do on the site?
How many clicks to complete a task?
Are tasks optimized for mobile?
Likely to be performed by mobile users
Provide timely information
Do mobile site results match desktop results?
i.e. same flight status info, same news headlines, etc.

Targeted, Constrained Focus
5/22/2010
28
Rethink, repackage, reformat.
Distill site down to essentials.
Remove extraneous content.
Content = features, pages and graphics.
Simplify, but don’t over-simplify.
The one-page mobile web siteis so 2006!
Promote user interest in the brand.
Optimize for most common mobile use cases – may be different from desktop access.

Access to Relevant, Timely Information
5/22/2010
29
Prioritize and organize features. Optimize for easy access to most popular tasks.
Airlines: Flight Status first. Baggage contracts last.
News: Top Stories first. Search nearby.
Promote snackability.
Small bites of content served up quickly and easily.
Mobile users have a short attention span.
Average Session Length is 3 Minutes
Remember Thematic Consistency
Also Thematic Currency
http://oregonlive.com/ vs. http://mobile.oregonlive.com

Content Adaptation
5/22/2010
30

The Meaning of Content Adaptation
5/22/2010
31
Adapting Markup to Suit Browser Capabilities and Bugs
Adapting Content to Fit the Screen Size
Adapting Usability to Fit Device Input Methods
Touchscreens, Screen Orientation, Etc.
The best mobile web applications exploit strengths of each platform.
The best markup for the mobile device.
Design appropriately for screen size.

Content Adaptation Realities
5/22/2010
32
Insufficient to target only iPhones!
Most mobile web users do not use iPhone or iTouch.
Despite the hype and Admob statistics
iPhone-only sites reach 10%-15% of mobile market
Demographics and Geography Matters
Enterprise users: BlackBerry or Palm or Windows Mobile
Teenagers: Low-cost featurephones and dumbphones
Europe and Asia: Nokia
Africa: Low-cost featurephones
Smartphone Fragmentation is a Reality
19 Flavors of WebKit on Mobile Devices
HTML5 Implementations are New and Changing

Content Adaptation Strategy
5/22/2010
33
Expect and Manage Diversity
Embrace change.
Create Device Groups
Classify the universe of mobile devices into groups
Device database helps identify and classify devices
Group Count and Criteria based on Project Requirements
Create a Reference Design for the Mobile Web Site
Select a reference screen size (screen width)
OK to create multiple reference designs, as project permits
A fluid reference design eases adaptation
Create Rules for Adapting the Reference Design to Device Groups
Changing or Removing design components
Scaling and transcoding graphics
Style Changes (i.e. CSS)
Implement!
Device Database used to Classify Groups and Drive Content Adaptation

Popular Device Databases
5/22/2010
34
WURFL
The industry standard. Open Data and Open Source.
Device Atlas
owned by dotMobi
Commercial but affordable
W3C is in the mix
Recommends a standard API for accessing device repositories.
Recommends a standard meta-layer for evaluating device properties.
Others
J2ME Polish – JSR support for Java ME devices
Alembic by Mobile Distillery (and Celsius for Automated Porting)
Aside: Automated porting is a myth!
Mobile Research – Expensive, proprietary device database tracking hundreds of capabilities per device model.

Network Optimization
5/22/2010
35

Minimize External Resources
5/22/2010
36
Optimize the number of Mobile Web resources. Each linked external resource causes an expensive network round-trip.
Embed into a Mobile Web document only:
One CSS stylesheet
One JavaScript library
Absolutely necessary images

Remove Unnecessary Whitespace
5/22/2010
37
Optimize the content of Mobile Web resources. Remove HTML comments, whitespace and unnecessary markup.
i.e. minification
Reduces overall byte size of document.
Speeds download times, especially for radio networks.
Improves cacheability in mobile browser.

Compress Response Documents
5/22/2010
38
Optimize the delivery of Mobile Web resources.
Use GZIP response compression when requested in HTTP headers.
Supported by ~80% of mobile browsers
Use Caching Directives in HTTP Response Headers
Whether and for how long clients should cache a Web document
Supported on smartphones
It’s Safe! Ignored by browsers without persistent caches
Use Vary response header for content-adapted pages.

Learn the Mobile Web!
5/22/2010
39

Mobile Web Courses
5/22/2010
40
Mobile Web Development
Create Web Content for Any Mobile Browser
Web and Mobility Best Practices and Standards
For Web Developers/Designers with No Mobile Experience
Advanced Mobile Web Development
Rich Mobile Web Applications for Smartphones
HTML5, JavaScript, AJAX and WebKit for Mobile Devices
Home Screen Widgets using Web Technologies
Surviving in the Mobile Ecosystem
Part of Computer Education Program @ PCC and Mt Hood CC

Mobile Web Development
5/22/2010
41
Standards-compliant web sites for mobile phones
Featurephones and Smartphones
Mobile Markup Syntax
Mobile Web Design and Usability
Content Adaptation for Mobile Devices
Validation, Optimization, Testing and Deployment
Mobile Web Discoverability, Traffic Acquisition and SEO
Monetizing the Mobile Web
Mobile JavaScript and AJAX for Featurephones
Mobile Ecosystems
Operators, transcoders and proxies, oh my!
http://learnthemobileweb.com/mobile-web-development/

Advanced Mobile Web Development
5/22/2010
42
Mobile web applications for smartphones
Smartphone = HTML 5 + JavaScript + AJAX
Forget Today’s Mainstream Featurephones
Forget microbrowser quirks and workarounds
Focus on Rich Mobile Web Apps for Smartphones
Small Screens and Mobile Users
Single Path to Market for all Mobile Platforms
iPhone, Android, RIM, Windows Phone 7, …
Safari, Chrome, Opera Mobile, Pocket IE, Skyfire, …
WebKit, JavaScript and AJAX in a Mobile Context
Designing for Touch
Open-Source Libraries
Home Screen Widgets using Web Technologies
Surviving in the Mobile Ecosystem

Beginning Smartphone Web Development
5/22/2010
43
Textbook for Mobile Web Development classes (mine and others)
Available at Amazon.com for $26.39

Mobile Portland Users Group
5/22/2010
44
http://mobileportland.com
Local user group focused on mobile.
Fourth Monday of every month for presentations, discussion and networking.
If you're interested, join the Mobile Portland Google Group.

Learn more atLearnTheMobileWeb.com
Standards-Based Mobile Web Development
5/22/2010
45
Thank You!

http://learnthemobileweb.com	693
http://blog.macronimous.com	346
http://www.slideshare.net	136
http://translate.googleusercontent.com	7
http://www.linkedin.com	6
http://tariqsobh.wordpress.com	6
http://localhost	5
http://shreymishra.blogspot.com	3
http://weblow.blogspot.com	3
http://twintwo.ipg.pt	3
http://webcache.googleusercontent.com	2
http://90.0.0.225	2
http://static.slidesharecdn.com	1
file://	1
http://ibloglearning.blogspot.com	1
http://zootool.com	1
http://www.lmodules.com	1

Standards-Based Mobile Web Development

by Gail Frederick

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 1,217

Statistics

Standards-Based Mobile Web Development Presentation Transcript