Mobile Web Mobile Portland March 2009

03/23/09LearnTheMobileWeb.com

Standards-BasedMobile Web Development

Mobile Portland, March 2009

1


Agenda

2

Introduction Why Study Mobile Web Development?

Mobile Web != Desktop Web Standards-Based Approach to Mobile Web

Development … with Healthy Skepticism of Mobility Standards

My Courses @ PCC Mobile Web Development

Featurephones and Smartphones Advanced Mobile Web Development

Deep Dive for Smartphone Browsers HTML 4 and 5 + JavaScript + AJAX


Introducing Me

3

Gail Rahn Frederick [email protected] / 503-260-0910

Mobile Developer and Enthusiast for 6+ Years Mobile Applications and Mobile Web Services on 6+

operators in 10+ countries in North America and Europe MS in Computer Science from University of

Washington Mobile Software Architect at Medio Systems

Mobile search and discovery for operators and publishers Mobility Speaker at JavaOne 2009

Smartphone Behavior on a Featurephone Budget with Java ME

mailto:[email protected]

mailto:[email protected]

http://medio.com/

http://medio.com/


Introducing You

4

Do you … Own a Mobile Phone? Own a Smartphone? Surf the Web on your Phone? Surf Primarily on your Phone?

Have you … Published a Mobile Application? Published a Mobile Web Site? Earned Money as a Mobile Publisher? Adapted Mobile Content Using a Device Database? Had Mobile-Adapted Content Re-Formatted by a

Transcoder?


Why Study Mobile Web Development?

5


Why Study Mobile Web Development?

6

The Mobile Web is Totally New Mobile Web != Desktop Web New Best Practices and New Gotchas Desktop Metaphors Simply Do Not Apply

The Mobile User is Totally New Usage Patterns, Session Lengths and Navigation

MethodsThe Mobile Browser is Totally New

Has Unique Benefits, Quirks and Workarounds Best Cross-Platform Mobile Technology

Especially for Smartphones Sorry, Java ME!


The Mobile Web is Totally New

7

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 User is Totally New

8

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

http://www.informationweek.com/blog/main/archives/2007/04/google_lays_out.html

http://www.informationweek.com/blog/main/archives/2007/04/google_lays_out.html


The Mobile Browser is Totally New

9

Renders Web Pages in WML and XHTML-MP and sometimes HTML

Limited Functionality for Low Power Devices Advanced Features Affect Battery Life

JavaScript and Timer-Based Refreshes Improperly Formatted Web Pages have Drastic

Effects Browser Hangs or Crashes Phone OS Resets or Powers Down


Mobile WebUsage Statistics

10


Prevalence of Mobile Phones

11

Source: Communities Dominate Brands Weblog and Mobile Web Development by Cameron Moll

Common Object Years in Existence World Usage

Automobile 100 800 millionPC 30 850 millionLandline Phone 110 1.3 billionCredit Card 40 1.4 billionTV 60 1.5 billionMobile Phone 35 3.3 billion

http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.html

http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.html

http://www.mobilewebbook.com/





Mobile Phone Usage Around the World

12

Dark Red is Lowest % of Mobile Phone Coverage – Emerging MarketsDark Green is Highest % of Mobile Phone Coverage – Saturated Markets


Mobile Web vs. Desktop Web

13

Mobile Web Desktop Web

Avg Session Length 3 minutes 10 – 15 minutes

Min Screen Size 90x60 800x600

Max Screen Size 240x400 Unlimited

Browser Mfgs 12+ and growing 4 (effectively, 2)

Browser Bugs Frequent and Permanent Rare and Patchable

W3C Standards Spotty and Sometimes Ignored Mature and Accepted

Markup Languages WML 1.1, WML 1.3, CHTML, XHTML-MP, XHTML-Basic, ...

HTML

JavaScript and AJAX Not on 90% of clients.Partial Implementations and Proprietary APIs.

Yes

Addressable Clients 3.3 Billion 1 Billion (desktops and servers)


Mobile Screen Size Trends

14

Source: Sender 11, mBricks analysis of WURFL, mobiForge.com.

Relative screen size difference is increasing.

Difference between the smallest and the largest screen sizes is a factor of 23. The largest screen is 23 times bigger than the smallest one.

The vast majority of devices share just three screen widths: 128, 240 and 176 pixels

Data Set is Color Mobile

Phones supportingJava ME =

Featurephones

http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html

http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html

http://www.mbricks.no/

http://www.mbricks.no/

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes


Screen Sizes on the Mobile Web

15

Screen Size Markup Support Worldwide United States

128x160 and Smaller WML Only 24.5% 18.5%Up to 176x220 WML or XHTML-MP 24.0% 23.9%Up to 240x320 XHTML-MP or HTML 23.8% 18.9%

320x240 and Larger XHTML-MP or HTML 27.7% 38.7%

Browser traffic seen by AdMob (AdMob Mobile Metrics Report, Dec 2008):

Jan 2009 statistics from worldwide mobile traffic to GetJar.com:Screen Size Markup Support Worldwide

128x128 and 128x160 WML Only 18.9%

Up to 176x220 WML or XHTML-MP 28.9%

Up to 240x320 XHTML-MP or HTML 30.1%

Larger than 320x240 XHTML-MP or HTML 4.5%

http://www.admob.com/marketing/pdf/mobile_metrics_dec_08.pdf

http://www.admob.com/marketing/pdf/mobile_metrics_dec_08.pdf

http://www.getjar.com/software

http://www.getjar.com/software


Mobile Data Adoption through 2010

16

Average Intended Mobile Data Usage Increase over Next 24 Months USA Europe

Current Users of Mobile Data 58% 55%

Non-Users of Mobile Data 27% 28%

Top Five Mobile Data Services that Non-Users Intend to Start Using

USA Europe

Mobile Internet 49% 34%

MMS 38% 39%

Uploading Photos 34% 27%

Software / Application Download 30% 30%

E-mail 28% 32%

Source: Nielsen and Tellabs Study of Mobile Web Usage, Feb 2009

http://www.tellabs.com/news/2009/index.cfm/nr/53.cfm

http://www.tellabs.com/news/2009/index.cfm/nr/53.cfm


Mobile Meaning of Cross-Platform

17

Source: Sender 11

The Old Days: Java ME for FeaturephonesFragmentation Concern: Java ME API support across OEMs and devicesBad Joke: There are a billion Java phones and each runs its own version of Java ME!

http://sender11.typepad.com/sender11/2009/01/one-step-forward-one-step-back.htmlhttp:/sender11.typepad.com/sender11/2008/04/mobile-screen-s.html



Mobile Meaning of Cross-Platform

18

Source: Sender 11

Today: iPhone, Android, RIM, Windows Mobile, LiMo, Moblin …Fragmentation Concern: An SDK for Every Handset VendorWhat is the new Cross-Platform technology? A standards-based mobile browser.




Standards-Based Approach to Mobile Web Development

19


Which Standards and Best Practices?

20

Markup Languages WML, XHTML-MP, HTML

Styling CSS, CSS-MP

Interactivity 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


Healthy Skepticism aboutMobile Standards

21

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 Missed Targets and Re-

Work In class … we learn and critique standards and

best practices.

Wireless Markup Language (WML)

22

XML-Based Language for Mobile Devices Conforms to XML 1.0 Standard. Strict syntax. Mobile browsers do not render invalid WML.

Instead … they choke! WML is XML. Tags must be properly nested and closed.

i.e. vs i.e. …..

All tags must be lowercase Attribute values must be surrounded by quotation

marks No single quotes … no assumed quotes

DOCTYPE declaration is required

Wireless Markup Language (WML)

23

WML uses a card metaphor A WML document is called a deck. One WML deck contains one or more cards. One card is displayed in the browser at a time.

Root tag in is <wml> Valid child tags are <card>, <head> or <template> Valid child tags of <card> are , <do> and <pre>

 contains textual content and links. <do> contains actions <pre> contains…

WML supports user input, state variables, and scripting.

XHTML-MP Syntax

24

XHTML and XHTML-MP are Very Similar We’ll Learn XHTML-MP by Subtraction

Devil is in the Details Bugs in mobile browsers Burden of QA on many actual devices

Start with XHTML Use a DTD for XHTML-MP No frame or iframe support. Tables are very simple. Similar to WML.

No colspan, rowspan or advanced formatting. No tag. Use CSS instead. Great XHTML-MP reference @ cameronmoll.com

Add mobile-specific features Access keys increase link usability<a href=“foo.xhtml” accesskey="1“> … </a>

http://www.cameronmoll.com/archives/000577.html

http://www.cameronmoll.com/archives/000577.html

XHTML-MP Best Practices, 1 of 2

25

Consider Your Target Screens and Target Users Simple Designs Win Slow-to-Load Sites Lose Users Mobile users browse with images turned off Mobile users have per-kilobyte tariff Scrolling Sucks on Featurephones

Setting font size in pixels or points is supported … but a folly.

Use headers or CSS instead to achieve visual differentiation.

Access keys are free in <ol>.


XHTML-MP Best Practices, 2 of 2

26

Minimize document byte size. Whitespace counts! Review total download byte size of document + linked

resources. Review and minimize server round-trips.

Validate! Validate! Validate! http://validator.w3.org

Test in Firefox Loose syntax and layout compatibility tests.

Test in Emulators Tests document size and stricter markup compliance.

Test on Device The gold standard. Tests actual rendering on mobile

devices.

http://validator.w3.org/

http://validator.w3.org/


Is the Site Mobilized?

27

Recognize mobile devices Uses valid mobile markup language

dotMobi: Markup documents must be formatted in XHTML-MP or a markup format know to be supported by the browser.

dotMobi: No frames or iframes unless browser is known to support them. W3C: No frames.

Right-sized markup for the device? Document size in bytes with and without external resources

Acceptable Page Load Time? Markup and external resources How many HTTP 302 redirects to mobile version?

Provides an optimized mobile experience Snackable chunks of content sized for mobile device?

Ready.mobi score for home page Ensure that content provided by accessing a URI yields a thematically

coherent experience when accessed from different devices. i.e. mobile version of desktop weather site should show weather not flights!

http://ready.mobi/

http://ready.mobi/


Utility on the Mobile Web

28

“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

29

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 site

is so 2006! Promote user interest in the

brand. Optimize for mobile use cases.


Access to Relevant, Timely Information

30

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

http://oregonlive.com/

http://oregonlive.com/

http://mobile.oregonlive.com/

http://mobile.oregonlive.com/


Device Awareness

31

Exploit device capabilities. Do not take a least common denominator approach. Take reasonable steps to work around deficient

implementations. Provide a better user experience on more capable devices

Serve the best markup for the mobile device. Syntactically Correct Design Appropriate for Screen Size

Not sufficient to build an iPhone site! Most mobile web users do not use iPhone or iTouch. 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 Europe and Asia: Nokia Africa: Low-cost featurephones


The Meaning of Content Adaptation

32

More than just conditional execution in mobile templates

Mobile platforms offer different presentation capabilities. iPhone Menus != WML Menus != WAP Menus

The best mobile web applications exploit strengths of each platform.


Content Adaptation Strategy

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

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.

http://www.w3.org/TR/DDR-Simple-API/

http://www.w3.org/TR/DDR-Simple-API/

http://devices.j2mepolish.org/interactivedb/welcome.faces

http://devices.j2mepolish.org/interactivedb/welcome.faces

http://www.mobile-distillery.com/alembic-9.htm

http://www.mobile-distillery.com/alembic-9.htm

http://www.mobileresearch.com/mdd.html

http://www.mobileresearch.com/mdd.html


Mobile Web Development @ PCC

35


Mobile Web Courses @ PCC

36

Mobile Web Development Mobile Web Sites for Featurephones and

Smartphones Focus on Mobilized Development Practices Spring 2009: May – June Fall 2009: October - November

Advanced Mobile Web Development Rich Mobile Web Applications for Smart Devices Surviving in the Mobile Ecosystem Summer 2009: Curriculum Development Fall 2009: October - November

Part of Computer Education Program @ PCC


Mobile Web Development

37

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/

http://learnthemobileweb.com/mobile-web-development/





Advanced Mobile Web Development

38

Mobile web applications for smartphones Smartphone = HTML 4 and 5 + JavaScript + AJAX

Forget Today’s Mainstream Featurephones Forget microbrowser quirks and workarounds

Focus on Rich Mobile Web Apps for Smart Devices Web Standards Applied to Small Screens and Mobile Users Single Path to Market across Many Platform SDKs

iPhone, Android, RIM, Windows Mobile, … Safari, Chrome, Opera Mobile, Pocket IE, Skyfire, …

WebKit, JavaScript, AJAX in a Mobile Context Designing for Finger and Stylus Touch Interaction Evaluation of Open-Source Libraries for Mobile Web Apps

Surviving in the Mobile Ecosystem Defensive Programming against Transcoders


Learn more atLearnTheMobileWeb.com

Standards-Based Mobile Web Development

39

Thank You!

Mobile Web Mobile Portland March 2009

Technology

Transcript of Mobile Web Mobile Portland March 2009