Who?

Blog:

Slides: ido-green.appspot.com

Agenda

The State of the mobile web
Design philosophy
How to build mobile web app
Tips & Best practices

Mobile trends

Mobile internet usage to overtake desktop by 2014

global mobile devices pass desktop in 2015

Mobile Browsers

Mobile is 95% WebKit

Main missing features:

WebGL
Camera API
IndexedDB
Web Audio

Web Vs. Native

Web as a unified platform
Native is a moving target: iOS, Android, WP7, etc
Native pushes the boundary - APIs that are closer to the metal
Standardized web moves more slowly, but catching up!

The case for Business

Largely data-driven applications!

The mobile web is ready for apps.
Users may even prefer web to native - Some reports claim that 87% actually do.

Design Tips

Plan / Think about it up-front!
Don't let "web" and "enterprise" be an excuse for poor UX

            Be inspired by mobile patterns 

            e.g. Path, Flipboard, Twitter etc'.

Don't reinvent the wheel

Design - Low fidelity

Start with the UX
E.g. Balsamiq

Design - Per Device

Tablet != Phone != ...

a web app for phone is not for tablet and vs/vs

Philosophy: Adaptive Apps

Too hard to use one DOM tree for all form factors
Adaptive apps – Custom views and templates for each form factor, shared model
Use responsive design within the form factor (eg. same layout on iPad 4:3 and Galaxy Tablet 16:9)

Model View Controller

Fundamental pattern for separating concerns
Model handles data and server persistence layer View handles user input and rendering
Used to be on the server. Now moving to the thicker client.

Paradox of choice

There are many MVC frameworks

TodoMVC - one app written in all of them Comparison blog post - a high level comparison
Use Ember.js / Backbone.js for relatively simple apps

Templating engines - 1

Complex apps require complex DOM
DOM manipulation is relatively slow
Answer: JS templating

Embed

<script id="my-template" type=" text/my-template-language">

into HTML, with text contents of the template.

Use template library to populate template with data.

Templating engines - 2

Mustache.js is a logic-less templating engine

Example

          {{#items}} 
              {{#link}}<li><a href="{{url}}">{{name}}</a></li>{{/link}}
          {{/items}}
            +
            {"items": [{"name": "green", "link": true, "url": "#Green"},
                       {"name": "blue", "link": true, "url": "#Blue"}], }
            =
           <li><a href="#Green">green</a></li>
           <li><a href="#Blue">blue</a></li>

CSS Frameworks

Augmented CSS-style languages

$variables: true
.nesting { .allowed { font-color: bold; }}
mixins/inheritance

Many variants of syntax, but basically the same. My preference: SCSS

Layout - 1

Best practice:

Avoid: tables, absolute positioning, Relative positioning
Use CSS flex-box!

          #flexbox { 
            display: box; box-orient: horizontal;
          } 
          #flexbox > p:nth-child(2), 
          #flexbox > p:nth-child(3) {
            box-flex: 1;
          }

(!) Caveat: new API just landed, but relatively few changes .

Layout - 2

What about headers/footers?
```
Use position: fixed;
```
How to scroll inside elements?
```
Use overflow: scroll;
```
Inertial scrolling?
```
-webkit-overflow-scrolling: touch;
```

Touch

Fingers != mouse. Design for multi-touch!

touchstart
touchmove
touchend

(!) Click delayed by 300ms on mobile. Use fast click.
and Developing for Multi-Touch

Offline First

Storing assets: AppCache, Filesystem Storing data: localStorage, WebSQL, IndexedDB
Offline first – pretend that there's no internet connection, implement a sync layer that works only when online.

Offline/online events:

navigator.onLine & window.(ononline|onoffline)

Testing

MVC provides separation of concerns
Qunit - test your models
Selenium

Tips and tricks

Try tech stack like: thorax.js
Enable Safari console for logging on iOS (Settings -> Safari -> Developer)
Simulate touch events on desktop with MagicTouch.js
Remote debugging hack with jsconsole.com

It's all about speed

"...You can’t manage what you can’t mesure."
You will lose 13% of your users after 2sec!
You will lose 25% of your users after 4sec of load time.
You got more then ’2 connections’ on modern mobile browsers
For more: Mobile Web Performance

Mobile Web App Stack