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) { }


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


@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



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!

Multi screen HTML5

Technology

css media

bootstrap

reow tables

jquery mobile

mobile web

ajax navigation

width max

media