edenspiekermann_ amsterdam berlin stuttgart developing the RBMA webapp: 10 things we learned

harry keller @harryfk edenspiekermann_

edenspiekermann_

edenspiekermann_ 1. use the best tools available

edenspiekermann_ 2. mobile browsers source: netmarketshare.com Mobile Safari 62% Android browser 19% Opera Mobile 13% Others 6%

edenspiekermann_ 2. browser support Hooray, Webkit! gradients! background-size! offline cache! CSS transforms + animations! webfonts! HTML5 audio/video …

edenspiekermann_ 3. frameworks

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:

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; }

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!

edenspiekermann_ 7. switching to other apps is easy (iOS) %a(href="foursquare://venue/ 4b055dcef964a520f35722e3")

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

edenspiekermann_ 9. special 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")

edenspiekermann_ 10. testing, testing, testing

edenspiekermann_ berlin stuttgart amsterdam thank you! you can find the app here: http://rbmamadrid.es questions, feedback: -> h.keller@de.edenspiekermann.com -> @harry