Breaking Dev: Breaking the Mobile Web

by Luke Wroblewski September 12, 2011

In his Breaking the Mobile Web presentation at Breaking Development in Nashville TN, Maximliano Firtman described some of the challenges in mobile Web development today and highlighted exciting new opportunties for the future. Here are my notes from his talk:

  • Mobile devices are the future in our hands. They are personal computers that we can use everywhere and anywhere. But the mobile industry is a minefield. Because of the scope of changes happening all the time it’s hard to know which direction to move.
  • There are problems with the mobile Web. We are second-class designers/developers when compared to native app developers. There is vague, non-existent, or outdated documentation. New features are often discovered by third parties -not through product launches. There is a lack of examples and few developer tools.
  • We even have problems with terminology. HTML5 is: w3c standards in draft mode, de-facto standards, w3c ex-standards, or everything “new” on the browser.
  • There is not a lot of documentation for developing HTML5 mobile solutions. In fact, some tools provide inaccurate information.
  • There are over 200 mobile browsers out there: some are too limited, some too innovative, some proxy based, most without documentation and most without a debugging tool. Some browsers are cursor based, others are focus based, touch based, multi-touch based, with zooming support, etc.
  • Pseudo-browsers use internal Web control (on iOS or Android) but they add different behaviors.
  • Internet Explorer 9 (on Mango update) is a pretty decent Web browser. But many Web sites are using webkit- only prefixes. IE9 doesn’t use this prefix. So you need to maintain standard CSS properties as well. Take care of the other mobile browsers out there. Don’t just focus on Webkit.
  • Despite all this don’t give up.

New Things to Learn

  • Forget about: pixels, static designs, desktop frameworks (start without it and see if you actually need it), always connected, unlimited power, everyone sees the same thing, and insulting your users.
  • Learn about: server-side detection, progressive enhancement, responsive design but... be very mindful of performance and mobile use cases, the viewport and how it applies to designs, and data URIs
  • Top model: count kilobytes like top models count kilograms. Performance matters on mobile.
  • Mobile Web Toolkit: have a few emulators you can test on. They are not the same as desktop browsers but much closer to what you’ll see on every device. You can use virtual labs to test real devices on real networks.
  • Debugging tools: remote Web inspector (Blackberry 7 w/ Playbook), opera mobile (Dragonfly), and Weinre
  • HTML5 mobile features: offline installation, geolocation, offline Web storage, multimedia API (codecs are a problem), server-sent events (reduce AJAX/Comet solutions), canvas (javascript-based drawing), svg (has good support), motion sensors, new form controls, CSS3, touch events
  • APIs just starting to appear: XMLHttpRequest2 (Android 3), Navigation Timing (IE 9), Notifications (Firefox 6), Network Information (Android 2.2), File and FileReader (Android 3), Cross-domain Ajax (Android 2.2, iOS 3.2), Media Camera (Android 3), IndexDB (FireFox 6).
  • What to expect next year: augmented reality on the Web (need camera and accelerometer access), real camera API (that includes preview), MathML, Idle detection, Speech detection, 3D drawing, native integration, contacts and calendars, messaging, debugging, and more.
  • W3C Device APIs Working Group, Mozilla WebAPI effort, and WAC are all working on defining these APIs now. PhoneGap and BlackBerry WebWorks support most of these APIs now.
  • Focus on performance, use best practices, don’t be fanatical, be multi-platform, and aim for the best experience for every context.