Who?

+

@

• Blog:
• Slides: ido-green.appspot.com
• Hash Tag: #HTML5m

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

Mobile Browsers

Mobile is ~95% WebKit

Web Vs. Native

The case for Business

• Largely data-driven applications!
• app.ft.com
• workflowy.com
• mobile.twitter.com
• The mobile web is ready for apps.
• Users may even prefer web to native - Some reports claim that 87% actually do.

Good Examples

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

• http://pttrns.com
• http://mobile-patterns.com

Design - Low fidelity

Start with the UX
E.g. Balsamiq

Design - Per Device

Tablet != Phone != ...

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)
• Mobile Web Best Practices
• Media queri.es sites

Model View Controller

Model View Controller

Checkout The Top 10 Javascript MVC Frameworks Reviewed

Paradox of choice

There are many MVC frameworks

• Ember.js - Don't waste time making trivial choices.
• Backbone.js - gives structure to web applications by providing models with key-value binding, collections and views
• Angular.js - AngularJS lets you extend HTML vocabulary for your application.
• TodoMVC - one app written in all of them Comparison blog post - a high level comparison

Templating engines - 1

• Complex apps require complex DOM
• DOM manipulation is relatively slow
• Answer: JS templating
1. Embed

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

   into HTML, with text contents of the template.
2. Use template library to populate template with data.

CSS Frameworks

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

Layout - 2

Touch

Fingers != mouse. Design for multi-touch!

• touchstart
• touchmove
• touchend

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)

• Convert WebSQL To IndexedDB Tutorial

Debugging

• Remote debugging hack with jsconsole.com
• Chrome for Android.
• Opera also supports.
• Firefox mobile got a new option.
• iWebInspector is a free tool to debug, profile and inspect web applications running on iOS Simulator
• Adobe Shadow

Testing

• MVC provides separation of concerns
• Qunit - test your models
• Selenium and its mobile option Remote Web Driver

Optimization

• Blaze.io for mobile
• Mobile Perf
• In WebKit --remote-debugging-port=1337

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
• Simulate touch events using Chrome DevTool - Canary
• 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