Mobile Web vs. Web

Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)

Erik Wilde, UC Berkeley School of Information
2010-02-26

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License
[http://creativecommons.org/licenses/by/3.0/]

Contents Erik Wilde: Mobile Web vs. Web

Contents

Erik Wilde: Mobile Web vs. Web

(2) Abstract

Web-based mobile applications inherit important properties and constraints both because of their dependency on the Web, and because of their focus on mobile scenarios. In the previous two lectures, we have looked at the differences caused by typical mobile device usage, which often translate into different designs, and might even make Web-based solutions less than optimal in some situations. From the technical perspective, an important question is how easy it is to design and build Web-based applications for mobile devices, and in this lecture we look at the most important component in that picture, the mobile browser.



Mobile Browsers and Browsers

Outline (Mobile Browsers and Browsers)

  1. Mobile Browsers and Browsers [8]
  2. Browser Evaluation [6]
  3. Developing Mobile Web Applications [4]
Mobile Browsers and Browsers Erik Wilde: Mobile Web vs. Web

(4) Mobile's Share of Web Consumption

mobile-web-share.png

Mobile Browsers and Browsers Erik Wilde: Mobile Web vs. Web

(5) Smartphone Sales Q2 2009

smartphone-os-q2-2009.png

Mobile Browsers and Browsers Erik Wilde: Mobile Web vs. Web

(6) Web Requests by Smartphone OS

smartphone-os-share.png

Mobile Browsers and Browsers Erik Wilde: Mobile Web vs. Web

(7) Browser Wars Revisited



Mobile Browsers and Browsers Erik Wilde: Mobile Web vs. Web

(8) Browser War I

browser-war-one.png

Mobile Browsers and Browsers Erik Wilde: Mobile Web vs. Web

(9) Browser War II

browser-war-two.png      Firefox      Safari      Opera      Netscape      Mozilla      Chrome      Other


Mobile Browsers and Browsers Erik Wilde: Mobile Web vs. Web

(10) Browser War III



Mobile Browsers and Browsers Erik Wilde: Mobile Web vs. Web

(11) Application Stores



Browser Evaluation

Outline (Browser Evaluation)

  1. Mobile Browsers and Browsers [8]
  2. Browser Evaluation [6]
  3. Developing Mobile Web Applications [4]
Browser Evaluation Erik Wilde: Mobile Web vs. Web

(13) Mobile Browser Evolution



Browser Evaluation Erik Wilde: Mobile Web vs. Web

(14) Acid2

   /* picture setup */
   #top { margin: 100em 3em 0; padding: 2em 0 0 .5em; text-align: left; font: 2em/24px sans-serif; color: navy; white-space: pre; } /* "Hello World!" text */
   .picture { position: relative; border: 1em solid transparent; margin: 0 0 100em 3em; } /* containing block for face */
   .picture { background: red; } /* overriden by preferred stylesheet below */

   /* top line of face (scalp): fixed positioning and min/max height/width */
   .picture p { position: fixed; margin: 0; padding: 0; border: 0; top: 9em; left: 11em; width: 140%; max-width: 4em; height: 8px; min-height: 1em; max-height: 2mm; /* min-height overrides max-height, see 10.7 */ background: black; border-bottom: 0.5em yellow solid; }

   /* bits that shouldn't be part of the top line (and shouldn't be visible at all): HTML parsing, "+" combinator, stacking order */
   .picture p.bad { border-bottom: red solid; /* shouldn't matter, because the "p + table + p" rule below should match it too, thus hiding it */ }
   .picture p + p { background: maroon; z-index: 1; } /* shouldn't match anything */
   .picture p + table + p { margin-top: 3em; /* should end up under the absolutely positioned table below, and thus not be visible */ }

   /* second line of face: attribute selectors, float positioning */
   [class~=one].first.one { position: absolute; top: 0; margin: 36px 0 0 60px; padding: 0; border: black 2em; border-style: none solid; /* shrink wraps around float */ }
   [class~=one][class~=first] [class=second\ two][class="second two"] { float: right; width: 48px; height: 12px; background: yellow; margin: 0; padding: 0; } /* only content of abs pos block */


Browser Evaluation Erik Wilde: Mobile Web vs. Web

(15) CSS3 Selectors Test

tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */
[http://www.w3.org/TR/css3-selectors/#nth-child-pseudo]

Browser Evaluation Erik Wilde: Mobile Web vs. Web

(16) Acid3



Browser Evaluation Erik Wilde: Mobile Web vs. Web

(17) Acid3 Result

Acid3 for Firefox 3.6

Browser Evaluation Erik Wilde: Mobile Web vs. Web

(18) W3C Mobile Browser Test



Developing Mobile Web Applications

Outline (Developing Mobile Web Applications)

  1. Mobile Browsers and Browsers [8]
  2. Browser Evaluation [6]
  3. Developing Mobile Web Applications [4]
Developing Mobile Web Applications Erik Wilde: Mobile Web vs. Web

(20) Targeting One Platform



Developing Mobile Web Applications Erik Wilde: Mobile Web vs. Web

(21) Least Common Denominator



Developing Mobile Web Applications Erik Wilde: Mobile Web vs. Web

(22) Class-Based Development

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
[http://www.w3.org/TR/css3-mediaqueries/#orientation]
<link rel="stylesheet" media="print and (color)" href="http://…" />
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />
[http://www.w3.org/TR/css3-mediaqueries/#monochrome]

Developing Mobile Web Applications Erik Wilde: Mobile Web vs. Web

(23) Translation/Adaptation



2010-02-26 Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)