Breaking Dev: Web Apps That Feel Native

by Luke Wroblewski April 22, 2011

At the Breaking Development Conference in Dallas TX, Jonathan Snook talked about techniques to development rich, app-like interfaces within mobile Web browsers in his presentation "Fake it 'til you make it: creating mobile apps that feel like native apps". Here's my notes from his talk:

Why Build Within Mobile Safari?

  • Mobile Safari allows us to manage information on the client using local storage. Minimum local storage is 2MB. That means we can store a whole dictionary on there!
  • CSS3 features like transforms, transitions, and animations allow us to create dynamic effects in Web apps. But CSS3 also allows us to save page weight. Yahoo! reduced the size of their initial Mail payload by over 30% when leaning on CSS3.
  • Additionally use can use: geolocation API to get access to a user’s location; HTML5 forms support additional input types like search, number, and email; SVG for vector graphics on the iPhone but not on Android or WebOS yet; some hardware acceleration.
  • If you don’t need access to device APIs or monetization and want to quickly iterate without app stores approvals, the Web is a good way to go.
  • 37signals built an application called Chalk using Canvas in the browser. Allows you to create an image that you can save and email/share.

Tips For Building in Mobile Web Browsers

  • There are meta tags that can trigger full-screen mode, set appropriate scale of viewport, and turn off zooming.
  • You don’t need a Javascript framework on mobile. DOM APIs in newer mobile browsers are quite capable. We rely on JQuery to smooth out differences in browser on the desktop Web but it is fairly easy to implement code in Webkit browsers.
  • Query selectors can get you elements just like jQuery. You can even write a function that works just like jQuery.
  • You can use CSS for UI elements (transforms and transitions)
  • Using touch events can make the app feel faster than click events.
  • You can customize tap highlight color. So it renders differently than click events.
  • When you rotate orientation –you can pop up a message if you want people to only use a specific orientation.
  • Performance: use CSS instead of Javascript for tranisitions and animations. Force 2D and 3D transforms to use hardware acceleration. Use translate x/y instead of top/left. Use rotateX(0) to push items with heavy CSS to use hardware acceleration.
  • What about Android & WebOS? Best to test on the device. For multi-touch testing –you have to test on the device. WebOS 2.1 has no support for touch events but has support for two finger actions.
  • Despite some difference, we can get pretty close to build once, run everywhere.

Mobile Web frameworks

  • You might want to prototype with a framework for rapid development.
  • JQTouch: targeted for iOS, makes Web apps look like iOS apps (list views, etc.)
  • JQuery Mobile: designed for iPhone, Android, WebOS, and more; includes touch and gesture support
  • Sencha Touch: designed for iPhone & Android; includes enhanced touch events

What About Native Apps?

  • If you need: access to native hardware and other applications like Camera, Address Book, Fliesystem, or a streamlined revenue process –you probably want a native app.
  • Many native applications, though, take advantage of Web View to load components from a remote server. This allows you to iterate on some components quickly without app store approval processes.
  • PhoneGap and Titanium allow you to build native apps using Web development code.