Multi screen HTML5

7,678
-1

Published on

Learn how to design responsive HTML5 websites and applications, and learn how to choose the right tool for the job.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,678
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
73
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Multi screen HTML5

  1. 1. MULTI-SCREEN HTML5 Ron Reiter
  2. 2. Who am I? •  Ron Reiter •  HTML5 Google Developer Expert •  HTML5-IL •  Consultant, Freelancer
  3. 3. HTML5 != WEB •  HTML5 is a platform for writing applications •  Browser + Server = Web !=  
  4. 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. 5. Why HTML5? •  Cross platform development •  FirefoxOS •  PhoneGap •  Desktops run JavaScript with great performance •  Devices are only getting stronger (Zuckerberg, kiss my *ss)
  6. 6. Why NOT HTML5? •  Millisecond grade interaction and animations •  HTML5 is not quite there yet
  7. 7. Why Multi-screen?
  8. 8. OK, I WANT MULTISCREEN
  9. 9. CSS Media Queries
  10. 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. 11. CSS Media Queries - After @media  (max-­‐width:  479px)  {    }    @media  (min-­‐width:  480px)  and  (max-­‐width:  939px)  {    }    @media  (min-­‐width:  940px)  {    }      
  12. 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. 13. CSS Media Queries - After @import  url(responsive-­‐retina.css)  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.5),  (min-­‐resolution:  144dpi);  
  14. 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. 15. Why is this better? •  Declarative CSS allows hardware acceleration •  Browser Optimizations •  Less ugly
  16. 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
  17. 17. http://mediaqueri.es
  18. 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. 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. 20. Responsive web UI Frameworks Responsive  Web  Sites   Mobile  First   Twi$er  Bootstrap   jQuery  Mobile  
  21. 21. HTML5 Mobile First Applications
  22. 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. 23. jQuery Mobile •  Amazing mobile framework •  Themable •  Cross Platform •  Around for a while
  24. 24. jQuery Mobile Prototyping - Codiqa
  25. 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. 26. How to use jQuery Mobile
  27. 27. What can jQuery Mobile do?
  28. 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. 29. Responsive Applications
  30. 30. Responsive Applications
  31. 31. Responsive Applications
  32. 32. Reflow Tables (web)
  33. 33. Reflow Tables (mobile)
  34. 34. jQuery Mobile Architecture & Navigation
  35. 35. jQuery Mobile Architecture AJAX  /  Preloaded Web  NavigaMon  One  HTML,  Two  pages   Two  HTMLs,  Two  pages  
  36. 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. 37. AJAX Navigation •  Once we navigate, a “navigate” event is fired  $(window).on(“navigate”,  function(event,  data)  {          //  load  new  content  using  AJAX  });  
  38. 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. 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. 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. 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. 42. PhoneGap Build •  Removes the need for compiling to all platforms
  43. 43. Desktop?
  44. 44. Responsive Web Design
  45. 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. 46. Twitter Bootstrap
  47. 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. 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. 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. 50. Bootstrap Grid (web) span4   span4   span4  
  51. 51. Bootstrap Grid (mobile) span4   span4   span4  
  52. 52. Example (web)
  53. 53. Example (mobile)
  54. 54. Initializr
  55. 55. Responsive Design Bookmarklet http://responsive.victorcoulon.fr/
  56. 56. Viewport Resizerhttp://lab.maltewassermann.com/viewport-resizer/
  57. 57. THANK YOU!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×