Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk

Copilot
Creating a mobile web app in 8 days: What we learned.

Friday, November 30, 12

Sebastian Burkhart

github: opyh
twitter: opyh
app.net: hypo

working at bitcrowd.net, Berlin


Content: Technical & Design
pitfalls to avoid


= Checklist for your mobile
projects


http://m.moviepilot.com


App specs


App specs
Minimal Rails app
Backbone.Events
Backbone.Router
Zepto


swipe.js
Used for -like drill-down navigation

and -like side-bar menu


swipe.js
Has touch event handlers +
transform / transition CSS


swipe.js
Remove display: table-row for speed!


Micro MVC framework


Micro MVC framework
Inspired by iOS UIKit ViewController classes


Micro MVC framework
UITabBarController + UINavigationControllers


Technical lessons


Your desktop browser lies. :)


Test every browser / device
combination.


combination.
Chrome/Nexus 4 ≠ Chrome/Galaxy S III ≠ built-in
browser/Samsung S III


combination.
In our case: iPhone 3G faster than Galaxy S3

WTF


→ Don't develop with only one device type.
→ You will need to debug directly on your devices
(see Emma's talk).


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


Loading too many images will
crash your browser


What’s cool:
overflow: scroll
is working now.


What’s cool:
overflow: scroll
is working now (Almost.)


overflow: scroll
Avoid more than one top element


overflow: scroll
Use it together with -webkit-overflow-
scrolling: touch to enable native scrolling
with bounce and momentum


overflow: scroll
Build a fallback solution if you need to
support older devices


scrollTop is broken on Android
(You can’t set it via JS.)
https://code.google.com/p/android/issues/detail?id=19625


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?


scrollTop is broken mkII
= Many Android browsers reset the
scrollTop property to 0 when appending a
DOM element.


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.


Expect weird bugs
Some examples following…


Expect weird bugs
Swallowed events (many browsers)


Expect weird bugs
A specific <div> had to wider than 355px to
not break performance down completely
(iOS)


Expect weird bugs
Touch events were delivered to wrong
elements (Android, S III, built-in browser)


Expect weird bugs
Facebooks new mobile comment widget
seems not to work on mobile (the desktop
version does, though)


About performance…


About performance…
Don't forget your HTML/JS apps compete with native
apps.


Requests may be very slow


Requests may be very slow
Have HTML content preloaded if possible.
HTML strings in a JS map worked well for us.


Add caching on server-side


Add caching on server-side
Make your served content state-independent.
Use caching services, e.g. fastly.


Make rendering fast


Make rendering fast
Prefer native scrolling and positioning over transforms


Make rendering fast
Avoid z-index


Make rendering fast
Avoid big <div>s, their content may have to be cached in
graphics memory as bitmap


Make rendering fast
Avoid jQuery/Zepto's DOM manipulation methods like
append() etc., as they traverse/copy whole DOM
structures on JS level.


Make rendering fast
Use exactly sized images for smoother scrolling (might
be much eﬀort if you have to support many display
sizes…)


Make rendering fast
Good news: CSS box-shadows and gradients are fast on
most devices.


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.)


Design for small displays


iOS Human Interface
Guidelines


“44 x 44 points is the comfortable minimum size
of a tappable UI element.”

http://bit.ly/V6OmO9


Touchable UI areas
should be big


Responsive design


Responsive design
background-position: 50% 30%
background-size: cover
…fits landscape and portrait images.


Responsive design
Don’t forget to vary screen height when testing
CSS media queries


Responsive design
CSS media queries

very low in landscape mode


Responsive design
CSS media queries

very low in Facebook app


Responsive design
CSS media queries

low because of toolbars :(


Responsive design
Don’t hide the address bar just because you can.


Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk

Semelhante a Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk (20)

Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk