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

Transcript

1. The new FT.com web app We’ve got a website for that Andrew Betts, Assanka
2. THERE WAS THE WEB In the beginning
3. Great stuff about the web •  Openness •  Community ownership •  Interoperability •  Accessibility •  Freedom •  Universal access •  Low regulation
4. WAP
7. 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
8. Over-scroll to reload
9. Swipe navigation
10. Pinch to zoom
12. Big, easy to read buttons
14. 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
15. MAKE THE WEB AS EASY TO USE AS AN APP? Couldn’t we just…
16. There is a video here To view the video, visit http://www.youtube.com/watch?v=JTywh4QJWMM
17. The challenges •  Layout •  Offline use •  Navigation and interaction •  Change of mindset (remember WAP?)
18. Layout •  Flowed columns •  Content balancing •  Podcast player
19. Flowed columns
20. Flowed columns Headline   Media  insert   Media  insert  
21. Adobe webkit fork
22. 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
23. Content balancing
24. Classifying devices by resolution
25. Podcast player •  HTML5 Audio player embeds podcast content •  But we need audio to continue playing after navigating away
26. Continuous play
27. Navigation and interaction •  Swiping between sections •  Snapping article pagination •  Progress spinners
28. Swiping between sections
29. Swiping between sections
30. WeinRE pmuellr.github.com/weinre
31. Snapping article pagination •  Overflowed content panel •  Touchscroll container with snapping
32. 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
33. Offline access •  Launching the app offline •  Making text content available offline •  Storing content images offline •  Analytics
34. 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
35. Check resource requests Charlesproxy.com
36. 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
37. 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
38. 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)
39. 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.
40. Unresolved problems •  SSL indicator / padlock •  Social media integration •  Offline adverts •  Automated QA
41. 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!
42. Questions? •  Andrew Betts •  andrew.betts@assanka.net •  You should follow me on twitter here: @triblondon •  Assanka is hiring (assanka.net/jobs)