The document discusses lessons learned from creating a mobile web app in 8 days. It provides technical specifications for the app, including the frameworks and libraries used. It then covers various technical, performance, and design challenges encountered, such as different browser behaviors, slow loading times, rendering issues, and ensuring responsiveness on small screens. Tips are provided for testing across devices, improving performance, and following responsive and mobile-friendly design principles.
1 of 72
Downloaded 10 times
More Related Content
Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk
1. Copilot
Creating a mobile web app in 8 days: What we learned.
Friday, November 30, 12
2. Sebastian Burkhart
github: opyh
twitter: opyh
app.net: hypo
working at bitcrowd.net, Berlin
Friday, November 30, 12
22. Test every browser / device
combination.
Chrome/Nexus 4 ≠ Chrome/Galaxy S III ≠ built-in
browser/Samsung S III
Friday, November 30, 12
23. Test every browser / device
combination.
In our case: iPhone 3G faster than Galaxy S3
WTF
Friday, November 30, 12
24. → Don't develop with only one device type.
→ You will need to debug directly on your devices
(see Emma's talk).
Friday, November 30, 12
25. iOS
• Use Safari's Inspector via USB
• Enable debugging in your phone settings
• Enable Develop menu in desktop Safari preferences
• Connect phone via USB
• Open inspector via Develop menu item
Android
• Download Android SDK
• Enable USB web debugging on phone (Settings > Advanced > Developer tools)
• Connect phone via USB
• Use adb forward tcp:9222 localabstract:chrome_devtools_remote on the
command line to start a debugging server
• Get a remote inspector running inside your desktop browser by navigating to
localhost:9222
• Often proposed on the web, but: adb logcat is not reliable for seeing
console.log output
Friday, November 30, 12
26. Loading too many images will
crash your browser
Friday, November 30, 12
27. What’s cool:
overflow: scroll
is working now.
Friday, November 30, 12
28. What’s cool:
overflow: scroll
is working now (Almost.)
Friday, November 30, 12
29. overflow: scroll
Avoid more than one top element
Friday, November 30, 12
30. overflow: scroll
Use it together with -webkit-overflow-
scrolling: touch to enable native scrolling
with bounce and momentum
Friday, November 30, 12
31. overflow: scroll
Build a fallback solution if you need to
support older devices
Friday, November 30, 12
32. scrollTop is broken on Android
(You can’t set it via JS.)
https://code.google.com/p/android/issues/detail?id=19625
Friday, November 30, 12
33. scrollTop is broken on Android
No good solutions available:
Libs like iScroll-4 don’t work reliably
Fallback to a non-single-page app?
Ignore and wait for browser updates?
Use transforms instead?
Friday, November 30, 12
34. scrollTop is broken mkII
= Many Android browsers reset the
scrollTop property to 0 when appending a
DOM element.
Friday, November 30, 12
35. 300ms lag on tap events
Mobile browsers wait for double-tap events.
If you want a native app-like feeling: create
your own tap event handling.
Friday, November 30, 12
54. Make rendering fast
Avoid jQuery/Zepto's DOM manipulation methods like
append() etc., as they traverse/copy whole DOM
structures on JS level.
Friday, November 30, 12
56. Make rendering fast
Use exactly sized images for smoother scrolling (might
be much effort if you have to support many display
sizes…)
Friday, November 30, 12
60. Make rendering fast
Good news: CSS box-shadows and gradients are fast on
most devices.
(...but make them <10px wide. And use inset shadows
sparingly, and not over images.)
Friday, November 30, 12