Webapp development – 10 lessons learned

When I was working on the Red Bull Music Academy webapp called “Daily Note” at Edenspiekermann I learned a lot of new stuff about mobile webapp development. This presentation contains some general advice to beginners in this field. I held this talk at up.front user group in Berlin.

1. edenspiekermann_ amsterdam berlin stuttgart developing the RBMA webapp: 10 things we learned
2. harry keller @harryfk edenspiekermann_
3. edenspiekermann_
4. edenspiekermann_ 1. use the best tools available
5. edenspiekermann_ 2. mobile browsers source: netmarketshare.com Mobile Safari 62% Android browser 19% Opera Mobile 13% Others 6%
6. edenspiekermann_ 2. browser support Hooray, Webkit! gradients! background-size! offline cache! CSS transforms + animations! webfonts! HTML5 audio/video …
7. edenspiekermann_ 3. frameworks
8. edenspiekermann_ 4. handling different screen sizes %meta(name="viewport" content="width=device-width, user-scalable=no") scale markup with meta viewport tag: background-size: cover for interface imagery use big versions as bg-images, then apply: iPhone 1/3G/3GS: 320x480px iPhone 4/4S: 640x980px for content images generate multiple sizes:
9. edenspiekermann_ 5. accelerometer (iOS) var acc_x, acc_y, acc_z; window.ondevicemotion = function(event) { acc_x = event.accelerationIncludingGravity.x; acc_y = event.accelerationIncludingGravity.y; acc_z = event.accelerationIncludingGravity.z; }
10. edenspiekermann_ 6. animation performance .animated -webkit-transform: rotateZ(0) only 3D transforms are hardware accelerated, so cheat it: test what uses the GPU by running Safari from Terminal: CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari note: hardware acceleration eats up more memory – use wisely!
11. edenspiekermann_ 7. switching to other apps is easy (iOS) %a(href="foursquare://venue/ 4b055dcef964a520f35722e3")
12. edenspiekermann_ 8. performance + loading time lazy load when possible: aim for quick app start cache extensively using an appcache-manifest: CSS, JS, interface images compress everything: images via jpeg, serve text les gzipped
13. edenspiekermann_ 9. special <head> tags (mostly iOS) %meta(name="apple-mobile-web-app-capable" content="yes") %link(rel="apple-touch-icon" href="/apple-touch-icon.png") %link(rel="apple-touch-startup-image" href="/images/splash-screen-320x460.png") %meta(name="apple-mobile-web-app-status-bar-style" content="default") %meta(name="format-detection" content="telephone=no")
14. edenspiekermann_ 10. testing, testing, testing
15. edenspiekermann_ berlin stuttgart amsterdam thank you! you can find the app here: http://rbmamadrid.es questions, feedback: -> h.keller@de.edenspiekermann.com -> @harry