RESPONSIVE DESIGN      @doxaras     @niobiumlabs
RESPONSIVE WEB DESIGN
TH     EN       EED
APPLE IS EVIL
HTML5 APPS
SCREEN FRAGMENTATION    http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
JSFIDDLE DEMO http://jsfiddle.net/doxaras/nCGUu/
GOOGLE’S APPROACHhttp://androidandme.com/2012/02/applications/goodbye-old-browser-chrome-to-become-the-standard-browser-on...
BROWSER GRADING           “Any device that           doesn’t support           media queries will           receive the ba...
AN OLD STORY REVIVINGhttp://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
LETS GET THING FROM THE       BEGINNING
fluid   elastic   fixed
VIEWPORTS<meta name=”viewport” content=”width:device-width”>     always use it for mobile and fluid designs
MEDIA QUERIES                       CSS 2.1<link rel="stylesheet" type="text/css" href="core.css"media="screen" /><link re...
WAIT THERE IS MORE!!<link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 480px) and(resolution: 16...
AND MORE@media only screen and (min-device-width : 320px) (max-device-width : 569px) {...}
AND MORE@media only screen and (min-width : 480px) { .box{ width:200px; height:200px;background:yellow; } }@media only scr...
DEVICE-WIDTH                      Question:Is max/min-width the same as max/min-device-width?                           An...
DEVICE-PIXELdevice-pixel-ratio could help you know the resolution of the devicescreen, iPhone 4 and certain other smartpho...
ORIENTATIONiPad introduced orientation to help with detecting orientation change, belowis how you can specify landscape an...
IT              OT        I   G    KO
US     ET          HE               FO                    RC                      E
JSFIDDLE DEMO http://jsfiddle.net/doxaras/LeB47/
TYPOGRAPHY
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...
IMAGES
SIZING.figure {  float: right;  margin-bottom: 0.5em;  margin-left: 2.53164557%; /* 12px / 474px */  width: 48.7341772%; /...
SIZINGimg { max-width: 100%; }<img src="smallRes.jpg"data-fullsrc="largeRes.jpg">
JSFIDDLE DEMO http://jsfiddle.net/doxaras/T66wQ/
DESIGN PATTERNS
COLUMN MERGING
DEALING WITH TABLEShttp://css-tricks.com/examples/ResponsiveTables/responsive.php
DISPLAY:NONEhttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
IMAGEShttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://css-tricks.com/convert-menu-to-dropdown/
JSFIDDLE DEMO http://jsfiddle.net/doxaras/CKPnJ/
THE TOOLS
WEB DEVELOPER
PIXEL 2 EM
APART.JS
LETTERING.JS
FITTEXT.JS
FLUID 960
MODERNIZR
RESPOND.JS• really   small script < 1kb• enabling   old browsers IE7 IE8• responsive    is not just a mobile problem• back...
LESS FRAMEWORK
TIPS & TRICKS
APPLE VIEWPORT<meta name="viewport" content="width=device-width; initial-scale=1.0">
SELECTORS SHOULD BE PRESENT ALSO IN THE         PLAIN CSS DOCUMENTS
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...
TRANSITIONSbody {     transition:all .2s linear;     -o-transition:all .2s linear;     -moz-transition:all .2s linear;    ...
RETINA DISPLAY SELECTORS<link rel="stylesheet"media="only screen and (-webkit-min-device-pixel-ratio: 2)"type="text/css"hr...
HIDE NAVIGATION// When ready...window.addEventListener("load",function() {  // Set a timeout...  setTimeout(function(){   ...
META TAG FOR NAME<meta name="apple-mobile-web-app-capable"content="yes" />
KNOW THY DIMENSIONS
THAT’S ALL FOLKS     DROP ME AN EMAIL ATYIANNIS@NIOBIUMLABS.COM
Responsive design
Responsive design
Responsive design
Upcoming SlideShare
Loading in...5
×

Responsive design

5,209

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
  1. A particular slide catching your eye?

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

×