Responsive design

5,732 views
5,648 views

Published on

Published in: Technology, Design

Responsive design

  1. 1. RESPONSIVE DESIGN @doxaras @niobiumlabs
  2. 2. RESPONSIVE WEB DESIGN
  3. 3. TH EN EED
  4. 4. APPLE IS EVIL
  5. 5. HTML5 APPS
  6. 6. SCREEN FRAGMENTATION http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
  7. 7. JSFIDDLE DEMO http://jsfiddle.net/doxaras/nCGUu/
  8. 8. GOOGLE’S APPROACHhttp://androidandme.com/2012/02/applications/goodbye-old-browser-chrome-to-become-the-standard-browser-on-android-4-0-and-above/
  9. 9. BROWSER GRADING “Any device that doesn’t support media queries will receive the basic C- grade experience
  10. 10. AN OLD STORY REVIVINGhttp://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
  11. 11. LETS GET THING FROM THE BEGINNING
  12. 12. fluid elastic fixed
  13. 13. VIEWPORTS<meta name=”viewport” content=”width:device-width”> always use it for mobile and fluid designs
  14. 14. MEDIA QUERIES CSS 2.1<link rel="stylesheet" type="text/css" href="core.css"media="screen" /><link rel="stylesheet" type="text/css" href="print.css"media="print" /> CSS3<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
  15. 15. WAIT THERE IS MORE!!<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and(resolution: 163dpi)" href="shetland.css" />@media screen and (max-device-width: 480px) { .column { float: none; }} @import url("shetland.css") screen and (max-device-width: 480px);
  16. 16. AND MORE@media only screen and (min-device-width : 320px) (max-device-width : 569px) {...}
  17. 17. AND MORE@media only screen and (min-width : 480px) { .box{ width:200px; height:200px;background:yellow; } }@media only screen and (max-width : 320px) { .box{width:200px; height:200px; background:red; } }
  18. 18. DEVICE-WIDTH Question:Is max/min-width the same as max/min-device-width? Answer:If you set width=device-width, then max/min-width is the sameas max/min-device-width in portrait mode, and different whenin landscape mode. In short, the difference is max/min-widthwill update when you rotate the screen, whereas, max/min-device-width wont.
  19. 19. DEVICE-PIXELdevice-pixel-ratio could help you know the resolution of the devicescreen, iPhone 4 and certain other smartphones have pixel ration equalor higher than 1.5, so if you want to target high resolution devices, youcan use the media query below:@media only screenand (-webkit-min-device-pixel-ratio : 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio : 1.5) { .imagebox {background:(url:"images/high/demo.jpg");}} image will be downloaded even if the page doesnt fit the rule above!!
  20. 20. ORIENTATIONiPad introduced orientation to help with detecting orientation change, belowis how you can specify landscape and portrait style/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */}/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */}
  21. 21. IT OT I G KO
  22. 22. US ET HE FO RC E
  23. 23. JSFIDDLE DEMO http://jsfiddle.net/doxaras/LeB47/
  24. 24. TYPOGRAPHY
  25. 25. 62.5% RULE (EM2PX)• modern browsers have a 16px font default size*•body{font-size:62.5%}• 16x62.5=10px•p{font-size:1.3em;} add html{font-size:16px; } just to be sure
  26. 26. IMAGES
  27. 27. SIZING.figure { float: right; margin-bottom: 0.5em; margin-left: 2.53164557%; /* 12px / 474px */ width: 48.7341772%; /* 231px / 474px */} img { max-width: 100%; }http://www.alistapart.com/articles/fluid-images/
  28. 28. SIZINGimg { max-width: 100%; }<img src="smallRes.jpg"data-fullsrc="largeRes.jpg">
  29. 29. JSFIDDLE DEMO http://jsfiddle.net/doxaras/T66wQ/
  30. 30. DESIGN PATTERNS
  31. 31. COLUMN MERGING
  32. 32. DEALING WITH TABLEShttp://css-tricks.com/examples/ResponsiveTables/responsive.php
  33. 33. DISPLAY:NONEhttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  34. 34. IMAGEShttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  35. 35. http://css-tricks.com/convert-menu-to-dropdown/
  36. 36. JSFIDDLE DEMO http://jsfiddle.net/doxaras/CKPnJ/
  37. 37. THE TOOLS
  38. 38. WEB DEVELOPER
  39. 39. PIXEL 2 EM
  40. 40. APART.JS
  41. 41. LETTERING.JS
  42. 42. FITTEXT.JS
  43. 43. FLUID 960
  44. 44. MODERNIZR
  45. 45. RESPOND.JS• really small script < 1kb• enabling old browsers IE7 IE8• responsive is not just a mobile problem• backwords compatibility of your designs
  46. 46. LESS FRAMEWORK
  47. 47. TIPS & TRICKS
  48. 48. APPLE VIEWPORT<meta name="viewport" content="width=device-width; initial-scale=1.0">
  49. 49. SELECTORS SHOULD BE PRESENT ALSO IN THE PLAIN CSS DOCUMENTS
  50. 50. EM’S AND PX’S• local DOM scope overrides the default 62.5% rule• left and right• top and line-height should be em’s• avoid nested em definitions
  51. 51. TRANSITIONSbody { transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear;}
  52. 52. RETINA DISPLAY SELECTORS<link rel="stylesheet"media="only screen and (-webkit-min-device-pixel-ratio: 2)"type="text/css"href="../iphone4.css" />
  53. 53. HIDE NAVIGATION// When ready...window.addEventListener("load",function() { // Set a timeout... setTimeout(function(){ // Hide the address bar! window.scrollTo(0, 1); }, 0);});
  54. 54. META TAG FOR NAME<meta name="apple-mobile-web-app-capable"content="yes" />
  55. 55. KNOW THY DIMENSIONS
  56. 56. THAT’S ALL FOLKS DROP ME AN EMAIL ATYIANNIS@NIOBIUMLABS.COM

×