Your SlideShare is downloading. ×
Multi screen HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Multi screen HTML5

5,779
views

Published 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.

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,779
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
59
Comments
0
Likes
2
Embeds 0
No embeds

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!