Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing for the Modern Web

32b34f5d4fdde3f24996bc8c5ec38f10?s=47 Sara Cannon
August 04, 2012

Designing for the Modern Web

Devices that consume the web are being created at a never-before heard of rate. They’re getting smaller, lighter, faster, sharper, and sexier. Life is awesome right? But what about us web designers?

Let’s talk about how to get the best possible ratio of speed vs awesome, and what techniques to use for fast and stunning visual experiences.

32b34f5d4fdde3f24996bc8c5ec38f10?s=128

Sara Cannon

August 04, 2012
Tweet

Transcript

  1. DESIGNING FOR THE MODERN WEB SARA CANNON RAN.GE/WCSF2012

  2. SARA CANNON Artist, Designer, & WordPress Developer In Birmingham, AL

    Co-founder / Creative Director Range http://ran.ge @rangeinc sara-cannon.com @saracannon slideshare.net/saracannon
  3. DESIGNING FOR THE MODERN WEB

  4. DESIGNING FOR THE FUTURE WEB

  5. 2015 IN THE YEAR 2015

  6. INTERNATIONAL DATA CORPORATION (IDC) http://www.idc.com/getdoc.jsp?containerId=prUS23028711 The total number of people

    using the web on mobile devices is set to surpass desktops by 2015.
  7. DESKTOP MOBILE 2007 2015 2009 2013 2011

  8. DESKTOP MOBILE 2007 2015 2009 2013 2011

  9. THE MOBILE WEB

  10. THE MOBILE WEB

  11. THE WEB

  12. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf

  13. MOBILE SHOULD NEVER BE AN AFTERTHOUGHT

  14. CONTENT

  15. RESPONSIVE WEB DESIGN

  16. None
  17. None
  18. None
  19. MOBILE FIRST

  20. FLEXIBLE GRIDS

  21. FLEXIBLE MEDIA

  22. ADAPTIVE IMAGES

  23. RETINA

  24. None
  25. 163 DPI 153,600 PIXELS 480 PX 320 PX iPHONE 3GS

    -
  26. 326 DPI 614,4OO PIXELS 96O PX 64O PX iPHONE 4

    +
  27. 460,800 MORE PIXELS iPHONE 4 + iPHONE 3GS -

  28. 220 DPI 2,304,0OO PIXELS 2880 PX 1800 PX MACBOOK PRO

    15-INCH RETINA
  29. image by Geoff Teehan

  30. RETINA FIRST

  31. None
  32. SPEED AWESOME V.S.

  33. 2G IS THE NEW DIAL-UP

  34. CONNECTION SPEED IMAGE SIZE

  35. CONNECTION SPEED IMAGE SIZE

  36. SERVING UP GRAPHICS

  37. TEXT PNG JPG BACKGROUNDS SVG ICONS X2 LOW QUALITY X2

    CSS MEDIA QUERY ICONFONT
  38. HTTP://MIR.ACULO.US THOMAS FUCHS

  39. HTTP://RETINAFY.ME THOMAS FUCHS

  40. CSS DETECTION

  41. @media      (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.5),         (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:

     3/2),         (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.5),         (min-­‐resolution:  1.5dppx)  {             /*  your  retina  rules  here  */ } DEVICE-PIXEL-RATIO MEDIA QUERY
  42. #site-­‐title  {   background-­‐image:  url(../images/logo.png); } @media    (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.5),

            (-­‐o-­‐min-­‐device-­‐pixel-­‐ratio:  3/2),         (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.5),         (min-­‐resolution:  1.5dppx)  { #site-­‐title  {   background-­‐image:  url(../images/logo-­‐x2.png);   background-­‐size:  50%  50%; } }
  43. JAVASCRIPT DETECTION

  44. function  isRetina(){   return  (('devicePixelRatio'  in  window  &&    

    devicePixelRatio  >  1)  ||     ('matchMedia'  in  window  &&     !matchMedia("(-­‐moz-­‐device-­‐pixel-­‐ratio:1.0)").matches)) } DEVICE-PIXEL-RATIO DETECTION
  45. KITTY.JPG KITTY@X2.JPG

  46. retina.js

  47. github.com/retina-images/retina-images Retina-images.complexcompulsions.com

  48. wordpress.org/extend/plugins/wp-retina-2x

  49. SVG

  50. None
  51. 1 KB 5 KB

  52. <?xml  version="1.0"  encoding="utf-­‐8"?> <!-­‐-­‐  Generator:  Adobe  Illustrator  15.0.2,  SVG  Export

     Plug-­‐In  .  SVG  Version:  6.00  Build  0)    -­‐-­‐> <!DOCTYPE  svg  PUBLIC  "-­‐//W3C//DTD  SVG  1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg  version="1.1"  id="Layer_1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  x="0px"  y="0px"    width="249.994px"  height="141.198px"  viewBox="125.209  169.552  249.994  141.198"    enable-­‐background="new  125.209  169.552  249.994  141.198"  xml:space="preserve"> <g>   <path  fill="#101010"  d="M185.807,169.552v28.799l-­‐12.4-­‐0.2l20.6,80.799l22.2-­‐80.799l-­‐12.399,0.2v-­‐28.799h55.599v28.799l-­‐9.6-­‐0.2     l-­‐34.6,112.598h-­‐45.799l-­‐35.399-­‐112.598l-­‐8.8,0.2v-­‐28.799H185.807z"/>   <path  fill="#FF0013"  d="M258.404,310.75v-­‐28.8l12.601,0.2v-­‐84l-­‐12.601,0.2v-­‐28.799h61.601c16.399,0.4,36.999,1,46.199,18     c4.601,8.4,5,16.6,5,19.8c0,2.4,0,7.8-­‐2.601,13.6c-­‐4.201,9.6-­‐11.601,13.4-­‐20.601,17.8c7,2,13,4,18,9.6c3.399,3.6,9.2,12.6,9.2,25.6     c0,11.999-­‐5.2,22.601-­‐15.2,29.397c-­‐11,7.2-­‐24.198,7.2-­‐36.601,7.4H258.404L258.404,310.75z  M307.805,226.351     c7.801,0,12.801,0.2,16-­‐0.6c6.801-­‐1.8,10.6-­‐7.2,10.6-­‐13.8c0-­‐1.6,0-­‐5.6-­‐2.799-­‐9.2c-­‐4.4-­‐6.2-­‐10.801-­‐5.4-­‐23.801-­‐5.6V226.351     L307.805,226.351z  M307.805,281.95c12.399,0,20.199,0.601,25-­‐2.8c4.6-­‐3.199,4.6-­‐9.4,4.6-­‐10.801c0-­‐4.8-­‐1.6-­‐7.6-­‐2.6-­‐9.199     c-­‐4.199-­‐5.601-­‐10.199-­‐5.799-­‐16.601-­‐5.799h-­‐10.399V281.95z"/> </g> </svg> VBLOGO.SVG
  53. jQuery(  function($)  {   var  supportsSVG  =  false;   try

     {     var  svg  =  document.createElementNS("http://     www.w3.org/2000/svg",'svg');     supportsSVG  =  typeof  svg.createSVGPoint  ==  'function';   }  catch(e){}   if  (  !  supportsSVG  )     $(  'body'  ).addClass(  'nosvg'  ); }  ); SVG GRACEFUL DEGRADATION JQUERY
  54. #site-­‐title  {   background-­‐image:  url(../images/logo.svg); } .nosvg  #site-­‐title  {  

    background-­‐image:  url(../images/logo.png); } SVG GRACEFUL DEGRADATION CSS
  55. None
  56. SVG X2 PNG LOW RES X2 JPG 14KB 13KB 12KB

  57. ICONFONTS

  58. CSS-TRICKS.COM/EXAMPLES/ICONFONT

  59. WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE- YOUR-OWN-ICON-WEBFONT/ INKSCAPE.ORG

  60. TESTING

  61. make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mb

  62. NETWORK LINK CONDITIONER

  63. None
  64. None
  65. None
  66. Our work is never over. “ - DAFT PUNK