We've got a website for that

A talk about the FT web app to Magento London and the Digital Pond user groups.

Transcript

1. We’ve got a website for that HTML5 and the future of the mobile web
3. In the beginning, there was the web And the web was Good.
4. The Web Free Open Interoperable Accessible Unregulated Uncontrolled Co-operative
6. The web has transformed our lives. Now we need that stuff on the move.
7. 1999: WAP . Seriously?
8. 2001: BlackBerry. Now we’re talking. (except ironically we’re not talking because Blackberry wouldn’t add phone capabilities for another 3 years)
9. 2007: iPhone. Cracked it.
10. 2008: Apps arrive. Web largely forgotten.
11. Apps Paid Proprietary Platform specific Inaccessible Regulated Controlled Uncooperative
12. But wait, what exactly is an app, anyway?
13. Adaptive design •  Completely flexible viewport size •  Use ALL of the space on the screen •  Nothing partial, everything balanced •  Like it was designed to fit your screen
14. Adaptive interface •  Mouse and keyboard •  Touchscreen •  TV remote •  Games console controller •  3D motion capture •  Speech •  Thought
15. People built apps because their websites weren’t adaptive to the new touch interfaces
17. But an ‘app strategy’ is questionable
18. So, couldn’t we just make a website do all that app stuff?
19. Challenges •  Layout •  Navigation and interaction •  Offline use •  Rethink backend architecture
20. Flowed columns
21. Flowed columns
22. Flowed columns •  CSS columns not good enough •  We measure content and cut it into positioned containers using JavaScript – Deal with fixed elements first – Columnflow library to be open sourced soon
23. Content balancing
24. Classifying devices by resolution
25. Swiping between sections
26. Fastclick •  Touch is instant, but click requires ~300ms linger •  Some taps are shorter •  'Fastclick' layer to detect very brief taps, and convert to clicks •  Used for devices that fire touch events •  Used eg. for tapping through pages of an article •  Disables interactions like double tap to zoom •  Open-sourced by Assanka, assanka.net/fastclick
27. Offline use •  Launching the app offline •  Making text content available offline •  Storing content images offline •  Analytics
28. Booting •  Every page needs to be able to initialise using old code, then update itself •  Not all users will see the same thing – We still have some running 6 month old code! •  Don’t break the web – remember you have pages, not a monolithic single page app. – Avoid tedious start-up sequence on every real pageload.
29. Offline technologies •  Application cache (manifest) is: –  used for bootstrap page and static files –  seriously flakey. Use sparing. –  extremely annoying. Set a dynamic comment or auto- change manifest when resources change •  WebSQL / SQLite / IndexedDB is: –  used for indexed content, articles, images etc. –  slow. Consider local storage instead. •  Local storage is: –  used for key/val storage, app settings, config, prefs –  fast and relatively reliable
30. Rethink the backend •  Build an API framework •  Use the API from your JS application •  Multiple API requests per HTTP request •  Multiple ways of requesting a page: – Fully wrapped – Fragment – API request
31. Unresolved problems •  SSL/padlock: We tell you it's secure, and, er, you trust us. •  Social media integration: Twitter/FB SSO mechanism can't be integrated into a one-page app •  Offline adverts: No clicks, no live impression recording, no advanced targeting •  Automated QA: Many times more complex than desktop apps
32. Useful tools •  Charles – www.charlesproxy.com •  WeinRE – phonegap.github.com/weinre/ •  WebDriver for mobile browsers – http://code.google.com/p/selenium/wiki/ WebDriverForMobileBrowsers
33. In summary •  Ease of use is critical. Adapt, adapt, adapt. •  The web can do this •  Web approach retains all the benefits of the web that you give up when building native.
34. “Don’t build native apps, build web apps” -­‐  Tim  Berners-­‐Lee  
35. Questions? •  Andrew Betts •  andrew.betts@assanka.net •  You should follow me on twitter here: – @triblondon •  Build this stuff: – assanka.net/jobs