Multi screen HTML5
•
3 likes•12,117 views
Learn how to design responsive HTML5 websites and applications, and learn how to choose the right tool for the job.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Multi screen HTML5
Similar to Multi screen HTML5 (20)
More from Ron Reiter
More from Ron Reiter (9)
Recently uploaded
Recently uploaded (20)
Multi screen HTML5
- 1. MULTI-SCREEN HTML5 Ron Reiter
- 2. Who am I? • Ron Reiter • HTML5 Google Developer Expert • HTML5-IL • Consultant, Freelancer
- 3. HTML5 != WEB • HTML5 is a platform for writing applications • Browser + Server = Web !=
- 4. 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
- 5. Why HTML5? • Cross platform development • FirefoxOS • PhoneGap • Desktops run JavaScript with great performance • Devices are only getting stronger (Zuckerberg, kiss my *ss)
- 6. Why NOT HTML5? • Millisecond grade interaction and animations • HTML5 is not quite there yet
- 8. OK, I WANT MULTISCREEN
- 10. 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”; } });
- 11. CSS Media Queries - After @media (max-‐width: 479px) { } @media (min-‐width: 480px) and (max-‐width: 939px) { } @media (min-‐width: 940px) { }
- 12. 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">
- 13. CSS Media Queries - After @import url(responsive-‐retina.css) (-‐webkit-‐min-‐device-‐ pixel-‐ratio: 1.5), (min-‐resolution: 144dpi);
- 14. Important media queries • print / screen • orientation • min-‐width • max-‐width • min-‐device-‐width • max-‐device-‐width • -‐webkit-‐min-‐device-‐pixel-‐ratio / min-‐resolution
- 15. Why is this better? • Declarative CSS allows hardware acceleration • Browser Optimizations • Less ugly
- 16. 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
- 18. App or mobile web? • You already have your website, and now you want to support mobile devices. • Website – Easier maintenance • Application – More abilities
- 19. 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).
- 20. Responsive web UI Frameworks Responsive Web Sites Mobile First Twi$er Bootstrap jQuery Mobile
- 21. HTML5 Mobile First Applications
- 22. Mobile First Web Applications • Make a mobile website • Mobile application development platform UI Frameworks jQuery Mobile Sencha Touch jqMobi DOM ManipulaMon Frameworks jQuery, Zepto MVC Frameworks Backbone.js Ember.js Angular.js
- 23. jQuery Mobile • Amazing mobile framework • Themable • Cross Platform • Around for a while
- 24. jQuery Mobile Prototyping - Codiqa
- 25. 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
- 26. How to use jQuery Mobile
- 27. What can jQuery Mobile do?
- 28. jQuery Mobile • What can I do with jQuery mobile? • Go to http://view.jquerymobile.com/1.3.0/ using your smartphone or tablet
- 34. jQuery Mobile Architecture & Navigation
- 35. jQuery Mobile Architecture AJAX / Preloaded Web NavigaMon One HTML, Two pages Two HTMLs, Two pages
- 36. 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”) ); });
- 37. AJAX Navigation • Once we navigate, a “navigate” event is fired $(window).on(“navigate”, function(event, data) { // load new content using AJAX });
- 38. 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>
- 39. 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);
- 40. 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
- 41. 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
- 42. PhoneGap Build • Removes the need for compiling to all platforms
- 43. Desktop?
- 45. 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
- 47. 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
- 48. 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!
- 49. 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>
- 50. Bootstrap Grid (web) span4 span4 span4
- 51. Bootstrap Grid (mobile) span4 span4 span4
- 52. Example (web)
- 53. Example (mobile)
- 54. Initializr
- 55. Responsive Design Bookmarklet http://responsive.victorcoulon.fr/
- 57. THANK YOU!