Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The new FT HTML5 website

The new FT HTML5 website

In June 2011, Assanka launched the Financial Times web app, built entirely in web technologies. The app works on a wide variety of tablets and smartphones, silently updates to the latest version and does not require an app store

Andrew Betts

April 20, 2012
Tweet

More Decks by Andrew Betts

Other Decks in Technology

Transcript

  1. Great stuff about the web •  Openness •  Community ownership

    •  Interoperability •  Accessibility •  Freedom •  Universal access •  Low regulation
  2. WAP

  3. Great stuff about apps •  Ease of use* *I'm only

    counting “information apps” developed for all mobile platforms, so there are no development speed benefits and hardware integration is unnecessary
  4. Bad stuff about apps •  Expensive to build for multiple

    platforms – iOS, WebOS, WinPhone, Android, QNX, BBOS •  App Store fees •  Loss of control over customer data •  No control over distribution channel promotion
  5. There is a video here To view the video, visit

    http://www.youtube.com/watch?v=JTywh4QJWMM
  6. The challenges •  Layout •  Offline use •  Navigation and

    interaction •  Change of mindset (remember WAP?)
  7. Flowed columns •  CSS columns not good enough •  CSS3

    Template Layouts would be awesome… if anyone supported them •  Adobe webkit fork also awesome, but not in iOS native webkit •  Solution we use: Measure the content and cut it into positioned containers using JavaScript
  8. Podcast player •  HTML5 Audio player embeds podcast content • 

    But we need audio to continue playing after navigating away
  9. Fastclick layer •  Touch is instant, click requires ~300ms linger

    •  Some taps are shorter •  'Fastclick' layer to detect very brief taps, convert to clicks. •  Used for devices that fire touch events •  Used eg for tapping through an article •  Disables interactions like double tap to zoom
  10. Offline access •  Launching the app offline •  Making text

    content available offline •  Storing content images offline •  Analytics
  11. Launching the app offline •  Ensure every resource the browser

    needs is in the manifest •  Attach event listeners to manifest events to allow progress feedback •  Manifest is atomic – download all or none •  Webkit manifest bug – obscure naming of the manifest helps •  Set dynamic comment in manifest for dev
  12. Offline text content •  Manifest stores framework, ‘scaffolding’ •  Need

    something else for editorial content •  IndexedDB is the emerging standard but not supported by Safari •  Currently use SQLite •  Small database mode < 5MB •  Large mode requires consent for 50MB •  Use localStorage for index, as it's faster
  13. Offline images •  Editorial images – too many and too

    temporary to put in manifest. But binary data from SQLite can't be put in an IMG tag •  Solution: Download images as base64 encoded strings •  Store in SQLite •  Render as data: URIs –  <img src=“data:image/png;……” /> •  Currently looking at File API
  14. Effects of using data URIs •  Operators don’t see images

    as images, so don’t do nasty recompression •  Multiple images can be batched in one HTTP response •  Response can be gzipped (resulting size is comparable to size of original images)
  15. Analytics •  Can’t use Google Analytics etc offline •  Instead

    log user actions into SQLite •  POST the log when requesting updated content •  Server-side, convert into an Apache-format access log •  Remember: logs are never definitive. Offline stats are reported on a variable delay.
  16. Unresolved problems •  SSL indicator / padlock •  Social media

    integration •  Offline adverts •  Automated QA
  17. What have we learned? •  Ease of use is absolutely

    critical •  The web can deliver on this almost as well, and in some cases, better, than native •  Web apps retain all the benefits of the web that you give up when building native apps •  So don’t build native apps. Build web apps!
  18. Questions? •  Andrew Betts •  [email protected] •  You should follow

    me on twitter here: @triblondon •  Assanka is hiring (assanka.net/jobs)