Click here to load reader
Multi screen HTML5
Nov 05, 2014
Learn how to design responsive HTML5 websites and applications, and learn how to choose the right tool for the job.
- 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 trafc now represents roughly 13% of Internet trafc 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
- 7. Why Multi-screen?
- 8. OK, I WANT MULTISCREEN
- 9. CSS Media Queries
- 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 - [email protected] (max-width: 479px) { } @media (min-width: 480px) and (max-width: 939px) { } @media (min-width: 940px) { }
- 12. CSS Media Queries - After
- 13. CSS Media Queries - [email protected] 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: Use it when you build responsive interfaces
- 17. http://mediaqueri.es
- 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: 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
- 29. Responsive Applications
- 30. Responsive Applications
- 31. Responsive Applications
- 32. Reow Tables (web)
- 33. Reow Tables (mobile)
- 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 red $(window).on(navigate, function(event, data) { // load new content using AJAX });
- 38. Navigating between loaded pagesJavaScript: $.mobile.changePage(#page2, pop, false, true); $.mobile.back(); HTML:
- 39. Creating a page dynamicallyJavaScript: $(document.body).append(); $.mobile.initializePage(); $.mobile.changePage(#page2, pop, false, true);+ content +
- 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?
- 44. Responsive Web Design
- 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
- 46. Twitter Bootstrap
- 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: And youre ready to go!
- 49. Twitter Bootstrap Gridcontentcontentcontent
- 50. Bootstrap Grid (web)span4 span4 span4
Related Documents See more >
