Luke Crouch

Mobile Web

  • Mozilla
  • Mozilla & Mobile
  • Mozilla & Mobile Web
  • Mobile Strategy
  • Mobile Web Design
  • Mobile Web Implementation
  • Mobile Web Today
  • Mobile Web Tomorrow

Mozilla Mission

Mozilla's mission is to promote openness, innovation and opportunity on the web.

Mozilla

More to Mozilla

Mozilla Developer Network

Mozilla Developer Network

Mozilla & Mobile

Fennec 1.0a1 - Oct 2010

Firefox 6.0 - Aug 2011

Firefox Home for iPhone

Boot to Gecko (B2G)

Mozilla & Mobile Web

support.mozilla.com/mobile

addons.mozilla.org/mobile

Open Web Apps

Totally unbiased

Mobile Strategy

It is important to remember that although many brands and creative agencies believe that they need to develop iPhone apps, what they need in reality is a good mobile site. It costs less to develop, manage and work across all handsets.
Via HTML5 and Web apps, the future is likely to bring better, faster more integrated mobile sites. After all, what will take precedence is the ability to access relevant content anywhere anytime, whether on an app or through the mobile browser.
Mobile Europe - HTML5 - The End of Apps?

Not a mobile strategy

  • Don't do anything - smartphones display regular websites
    • Zooming in/out, Scrolling?
  • Just make a WML file
    • WML experience isn't the best we can do
  • Just make an HTML file with width="240px"
    • 3,000 devices & 300 different browser/version variations
  • People don't use their mobile web browsers
    • Chicken-and-egg - Web producers don't make good mobile websites
  • Native mobile apps will kill the mobile web
    • We'll see. (AOL, CompuServe, Prodigy, etc.)

Mobile Site

  • Cross-platform
  • Distribution
  • Share code with desktop site
  • Performance of non-native code (3d, augmented reality, etc.)
  • No background apps (on most platforms)
  • Requires constant connectivity

Offline Web "App"

  • Offline functionality
  • Introduces "sync" overhead

Native App

  • Full device features
  • User Experience
  • Offline & background operation
  • Platform-specific - iOS, Android, Blackberry, Windows Phone, Palm, etc.
    • PhoneGap or Titanium mitigates some of this
  • Distribution - app market approval for launch & updates

So ...

Mobile Site

  • Existing Site
  • Maximize Reach

Mobile Web App

  • Offline functionality

Native

  • CPU-intensive
  • All Device Features (camera, etc.)

Mobile Web Design

Mobile "Friendy" Sites

Jason Grlicky

  • Presentation
    • Single-column
    • No mouse-over
    • Large UI elements
  • Content
    • Context is king e.g., Alaska Air
      • Desktop - booking flight
      • Mobile - checking in
  • Performance
    • Regular web performance practices
    • Mobile-specific practices
      • JS & CSS on low-power CPU's
      • Convoluted network connections
      • State of Speed

6 Rules to Designing
Amazing Mobile Apps

Brian Fling

  1. Understand the medium
  2. Get your data dialed
  3. Be a master of context
  4. Design for interaction
  5. Focus on the details
  6. Allow ample time

Mobile Design & Development

Brian Fling

Context is King

Mobile Context, C. Enrique Ortiz

Mobile Web Implementation

Webdev Blog Series

Jason Grlicky

Anatomy of an HTML5 Mobile App

Brian Fling

Programming the Mobile Web

Maximiliano Firtman

jQuery Mobile Up and Running

Maximiliano Firtman

Mobile Web Today

jQuery Mobile Demos

basecamphq.com

alaskaair.com

touch.linkedin.com

mail.google.com

Mobile Web Tomorrow

caniuse.com

CSS Hologram

Firefox Only

Web API