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!
