Designing for The Modern Web

14,285 views

Published on

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.

Published in: Technology, Art & Photos
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,285
On SlideShare
0
From Embeds
0
Number of Embeds
2,614
Actions
Shares
0
Downloads
134
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Designing for The Modern Web

  1. DESIGNING FOR THE MODERN WEBSARA CANNON RAN.GE/WCSF2012
  2. SARA CANNON Artist, Designer, & WordPress Developer In Birmingham, AL Co-founder / Creative Director Range http://ran.ge @rangeincsara-cannon.com @saracannon slideshare.net/saracannon
  3. DESIGNING FOR THE MODERN WEB
  4. DESIGNING FOR THE FUTURE WEB
  5. IN THE YEAR 2015 2015
  6. The total number ofpeople using the web onmobile devices is set tosurpass desktops by 2015. INTERNATIONAL DATA CORPORATION (IDC) http://www.idc.com/getdoc.jsp?containerId=prUS23028711
  7. 2007 2009 2011 2013 2015 DESKTOP MOBILE
  8. 2007 2009 2011 2013 2015 DESKTOP MOBILE
  9. THE MOBILE WEB
  10. THE MOBILE WEB
  11. THE WEB
  12. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
  13. MOBILE SHOULDNEVER BE ANAFTERTHOUGHT
  14. CONTENT
  15. RESPONSIVE WEB DESIGN
  16. MOBILE FIRST
  17. FLEXIBLE GRIDS
  18. FLEXIBLE MEDIA
  19. ADAPTIVE IMAGES
  20. RETINA
  21. iPHONE 3GS -480 PX 163 DPI 320 PX 153,600 PIXELS
  22. iPHONE 4 +96O PX 326 DPI 64O PX 614,4OO PIXELS
  23. iPHONE 3GS - iPHONE 4 + 460,800 MORE PIXELS
  24. MACBOOK PRO 15-INCH RETINA2880 PX 220 DPI 2,304,0OO 1800 PX PIXELS
  25. image by Geoff Teehan
  26. RETINA FIRST
  27. SPEED V.S.AWESOME
  28. 2G IS THE NEW DIAL-UP
  29. CONNECTION SPEEDIMAGE SIZE
  30. CONNECTION SPEEDIMAGE SIZE
  31. SERVING UP GRAPHICS
  32. TEXT PNG X2 JPG LOW QUALITY X2BACKGROUNDS CSS MEDIA QUERY SVG ICONS ICONFONT
  33. HTTP://MIR.ACULO.US THOMAS FUCHS
  34. HTTP://RETINAFY.ME THOMAS FUCHS
  35. CSS DETECTION
  36. DEVICE-PIXEL-RATIO MEDIA QUERY@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  */}
  37. #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%;}}
  38. JAVASCRIPT DETECTION
  39. DEVICE-PIXEL-RATIO DETECTIONfunction  isRetina(){   return  ((devicePixelRatio  in  window  &&     devicePixelRatio  >  1)  ||     (matchMedia  in  window  &&     !matchMedia("(-­‐moz-­‐device-­‐pixel-­‐ratio:1.0)").matches))}
  40. KITTY.JPG KITTY@X2.JPG
  41. retina.js
  42. github.com/retina-images/retina-imagesRetina-images.complexcompulsions.com
  43. wordpress.org/extend/plugins/wp-retina-2x
  44. SVG
  45. 5 KB 1 KB
  46. VBLOGO.SVG<?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>
  47. SVG GRACEFUL DEGRADATION JQUERYjQuery(  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  );}  );
  48. SVG GRACEFUL DEGRADATION CSS#site-­‐title  {   background-­‐image:  url(../images/logo.svg);}.nosvg  #site-­‐title  {   background-­‐image:  url(../images/logo.png);}
  49. SVG 14KB X2 PNG 13KBLOW RES X2 JPG 12KB
  50. ICONFONTS
  51. CSS-TRICKS.COM/EXAMPLES/ICONFONT
  52. WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE- YOUR-OWN-ICON-WEBFONT/ INKSCAPE.ORG
  53. TESTING
  54. make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mb
  55. NETWORK LINK CONDITIONER
  56. “ Our work is never over. - DAFT PUNK

×