sebastian burkhart — berlin.apps.js nov 2012 talk

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

Friday, November 30, 12

Sebastian Burkhart

github: opyhtwitter: opyhapp.net: hypo

working at bitcrowd.net, Berlin


https://github.com/opyh


http://twitter.com/opyh


https://alpha.app.net/hypo


http://bitcrowd.net

http://bitcrowd.net

Content: Technical & Design pitfalls to avoid


= Checklist for your mobile projects


http://m.moviepilot.com




App specs


Minimal Rails appBackbone.EventsBackbone.Router

Zepto

App specs


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!

swipe.js


Micro MVC framework


Inspired by iOS UIKit ViewController classes

Micro MVC framework


UITabBarController + UINavigationControllers

Micro MVC framework


Technical lessons


Your desktop browser lies. :)


Test every browser / device combination.


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



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


overflow: scrollis working now.

What’s cool:


overflow: scrollis working now (Almost.)

What’s cool:


overflow: scrollAvoid more than one top element


overflow: scrollUse 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

https://code.google.com/p/android/issues/detail?id=19625

(You can’t set it via JS.)




scrollTop is broken on AndroidNo 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 aDOM element.


300ms lag on tap eventsMobile browsers wait for double-tap events.

If you want a native app-like feeling: create your own tap event handling.


Expect weird bugsSome examples following…


Expect weird bugsSwallowed events (many browsers)


Expect weird bugs

A speci"c <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 bugsFacebooks 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 slowHave HTML content preloaded if possible.

HTML strings in a JS map worked well for us.


Add caching on server-side


Add caching on server-sideMake your served content state-independent.

Use caching services, e.g. fastly.


Make rendering fast


Make rendering fastPrefer native scrolling and positioning over transforms


Make rendering fast


Make rendering fastAvoid z-index


Make rendering fast


Make rendering fastAvoid big <div>s, their content may have to be cached in

graphics memory as bitmap


Make rendering fast


Make rendering fastAvoid jQuery/Zepto's DOM manipulation methods like

append() etc., as they traverse/copy whole DOM structures on JS level.


Make rendering fast


Make rendering fastUse exactly sized images for smoother scrolling (might

be much effort if you have to support many display sizes…)


Make rendering fast


Make rendering fastGood news: CSS box-shadows and gradients are fast on

most devices.


Make rendering fast


Make rendering fastGood 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 areasshould be big


Responsive design


Responsive designbackground-position: 50% 30%

background-size: cover

…"ts landscape and portrait images.


Responsive design

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


Responsive design


very low in landscape mode


Responsive design

very low in Facebook app



Responsive design

low because of toolbars :(



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


Sebastian Burkhart

github: opyhtwitter: opyhapp.net: hypo

working at bitcrowd.net, Berlin








http://bitcrowd.net

http://bitcrowd.net

sebastian burkhart — berlin.apps.js nov 2012 talk

Documents

rendering fastfriday

desktop browser

browser device combination

mobile web app

weird bugs touch events

app specsfriday

native scrolling

browser updates