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.

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
19. MOBILE FIRST
20. FLEXIBLE GRIDS
21. FLEXIBLE MEDIA
22. ADAPTIVE IMAGES
23. RETINA
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
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
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
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
66. Our work is never over. “ - DAFT PUNK