Multi screen HTML5
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Multi screen HTML5

  • 6,051 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,051
On Slideshare
6,001
From Embeds
50
Number of Embeds
2

Actions

Shares
Downloads
57
Comments
0
Likes
2

Embeds 50

http://webofthink.tistory.com 49
http://christopherwebdesignz.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 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 - 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
  • 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: <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
  • 29. Responsive Applications
  • 30. Responsive Applications
  • 31. Responsive Applications
  • 32. Reflow Tables (web)
  • 33. Reflow 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 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?
  • 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: <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/
  • 56. Viewport Resizerhttp://lab.maltewassermann.com/viewport-resizer/
  • 57. THANK YOU!