multi screen html5

MULTI-SCREEN HTML5

Ron Reiter

Who am I?

•  Ron Reiter •  HTML5 Google Developer

Expert •  HTML5-IL •  Consultant, Freelancer

HTML5 != WEB

•  HTML5 is a platform for writing applications

•  Browser + Server = Web

!=  

Why mobile web? •  Global mobile traffic now represents roughly 13% of Internet traffic •  Gartner research: In 2013 more than half of users will surf the web via

smartphones •  Nearly 1/3 of UK page views are from mobiles and tablets

BECAUSE YOU NEED TO DO IT

Why HTML5?

•  Cross platform development •  FirefoxOS •  PhoneGap •  Desktops run JavaScript with great

performance •  Devices are only getting stronger

(Zuckerberg, kiss my *ss)

Why NOT HTML5?

•  Millisecond grade interaction and animations •  HTML5 is not quite there yet

Why Multi-screen?

OK, I WANT MULTISCREEN

CSS Media Queries

CSS Media Queries - Before

$(window).resize(  function()  {          if  ($(window).width()  <  480)  {              document.body.className  =  “smartphone”;          }  else  if  ($(window).width()  >=  480  &&  $(window).width()  <  940)  {              document.body.className  =  “tablet”;          }  else  {              document.body.className  =  “desktop”;          }    });  

CSS Media Queries - After

@media  (max-­‐width:  479px)  {    }    @media  (min-­‐width:  480px)  and  (max-­‐width:  939px)  {    }    @media  (min-­‐width:  940px)  {    }      

CSS Media Queries - After

<link  rel="stylesheet"        type="text/css"  media="screen"  href="sans-­‐serif.css">    <link  rel="stylesheet"        type="text/css"  media="print"  href="serif.css">  

CSS Media Queries - After

@import  url(responsive-­‐retina.css)  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.5),  (min-­‐resolution:  144dpi);  

Important media queries

•  print  /  screen  •  orientation  •  min-­‐width  •  max-­‐width  •  min-­‐device-­‐width  •  max-­‐device-­‐width  •  -­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio    /  min-­‐resolution  

Why is this better?

•  Declarative CSS allows hardware acceleration •  Browser Optimizations •  Less ugly

Viewport meta tag

•  This viewport tag disables mobile viewport resizing: <meta  name="viewport”  content=”          width=device-­‐width,  initial-­‐scale=1.0,  maximum-­‐scale=1.0,  user-­‐scalable=no  ”>  

•  Use it when you build responsive interfaces

http://mediaqueri.es

App or mobile web?

•  You already have your website, and now you want to support mobile devices.

•  Website – Easier maintenance

•  Application – More abilities

What are my options?

•  Change your current website to a responsive web site

•  Your original website + Special website for tablets and smartphones

•  Just make an app (HTML5, native, etc).

Responsive web UI Frameworks

Responsive  Web  Sites  Twi$er  Bootstrap  

Mobile  First  jQuery  Mobile  

HTML5 Mobile First Applications

Mobile First Web Applications

•  Make a mobile website •  Mobile application development platform

jQuery  Mobile   Sencha  Touch   jqMobi  

Backbone.js   Ember.js   Angular.js  

jQuery,  Zepto  

UI  Frameworks  

MVC  Frameworks  

DOM  ManipulaMon  Frameworks  

jQuery Mobile

•  Amazing mobile framework •  Themable •  Cross Platform •  Around for a while

jQuery Mobile Prototyping - Codiqa

How to start

•  Create a new HTML page with: <link  rel="stylesheet"  href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-­‐1.3.0.min.css"  />  

<script  src="http://code.jquery.com/jquery-­‐1.8.2.min.js"></script>  

<script  src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-­‐1.3.0.min.js"></script>  

•  Or use Codiqa to download your app

How to use jQuery Mobile

What can jQuery Mobile do?

jQuery Mobile

•  What can I do with jQuery mobile? •  Go to http://view.jquerymobile.com/1.3.0/

using your smartphone or tablet

Responsive Applications

Responsive Applications

Responsive Applications

Reflow Tables (web)

Reflow Tables (mobile)

jQuery Mobile Architecture & Navigation

jQuery Mobile Architecture

AJAX  /  Preloaded One  HTML,  Two  pages  

Web  NavigaMon  Two  HTMLs,  Two  pages  

AJAX Navigation

•  Instead of changing the document location, we use $.mobile.navigate (saves history) $(“a”).on(“click”,  function(  event  )  {    event.preventDefault();    $.mobile.navigate  (  this.attr(“href”)  );  

});  

AJAX Navigation

•  Once we navigate, a “navigate” event is fired  $(window).on(“navigate”,  function(event,  data)  {          //  load  new  content  using  AJAX  });  

Navigating between loaded pages

JavaScript:  $.mobile.changePage(“#page2”,  “pop”,  false,  true);  $.mobile.back();  

HTML:  <div  data-­‐role=“page”  id=“page1”></div>  <div  data-­‐role=“page”  id=“page2”></div>  

Creating a page dynamically

JavaScript:    $(document.body).append('<div  data-­‐role="page"  id=”page2"><div  data-­‐role="content">'  +  content  +  '</div></div>');  $.mobile.initializePage();  $.mobile.changePage(“#page2”,  “pop”,  false,  true);  

jQuery Mobile + MVC

•  Angular – https://github.com/tigbro/jquery-mobile-angular-

adapter

•  Backbone – we need a special router – https://github.com/azicchetti/jquerymobile-router

•  Ember + jQuery Mobile is a bit harder since both frameworks utilize a fair amount of voodoo

OK, I want an app!

•  PhoneGap / Apache Cordova – Gives native API access from JavaScript

•  PhoneGap was bought by Adobe, so that non-Adobe development is done in Cordova

PhoneGap Build

•  Removes the need for compiling to all platforms

Desktop?

Responsive Web Design

Responsive Web Design

•  Web sites with a simple UI need to adapt to multiple screen form factors

•  Web sites are less complicated than web applications, but still very similar

•  jQuery mobile is also a tool for responsive web design – http://view.jquerymobile.com/1.3.0/docs/intro/

rwd.php

Twitter Bootstrap

Twitter Bootstrap

•  UI framework is more straightforward than jQuery Mobile

•  The UI elements are not as good for mobile as jQuery Mobile

•  Mobile browsers do not behave well with advanced Bootstrap UI elements like jQuery Mobile does

How to make Bootstrap responsive?

•  Add this to your Bootstrap app: <meta  name="viewport"  content="width=device-­‐width,  initial-­‐scale=1.0">  <link  href="assets/css/bootstrap-­‐responsive.css"  rel="stylesheet">  

•  And you’re ready to go!

Twitter Bootstrap Grid

<div  class=“container”>      <div  class=“row”>  <!-­‐-­‐  columns  must  sum  up  to  12  -­‐-­‐>          <div  class=“span4”>  …  content  …  </div>          <div  class=“span4”>  …  content  …  </div>                  <div  class=“span4”>  …  content  …  </div>      </div>  </div>  

Bootstrap Grid (web)

span4   span4   span4  

Bootstrap Grid (mobile)

span4  

span4  

span4  

Example (web)

Example (mobile)

Initializr

Responsive Design Bookmarklet���http://responsive.victorcoulon.fr/

Viewport Resizer���http://lab.maltewassermann.com/viewport-resizer/

THANK YOU!