Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Designing for The Modern Web Slide 1 Designing for The Modern Web Slide 2 Designing for The Modern Web Slide 3 Designing for The Modern Web Slide 4 Designing for The Modern Web Slide 5 Designing for The Modern Web Slide 6 Designing for The Modern Web Slide 7 Designing for The Modern Web Slide 8 Designing for The Modern Web Slide 9 Designing for The Modern Web Slide 10 Designing for The Modern Web Slide 11 Designing for The Modern Web Slide 12 Designing for The Modern Web Slide 13 Designing for The Modern Web Slide 14 Designing for The Modern Web Slide 15 Designing for The Modern Web Slide 16 Designing for The Modern Web Slide 17 Designing for The Modern Web Slide 18 Designing for The Modern Web Slide 19 Designing for The Modern Web Slide 20 Designing for The Modern Web Slide 21 Designing for The Modern Web Slide 22 Designing for The Modern Web Slide 23 Designing for The Modern Web Slide 24 Designing for The Modern Web Slide 25 Designing for The Modern Web Slide 26 Designing for The Modern Web Slide 27 Designing for The Modern Web Slide 28 Designing for The Modern Web Slide 29 Designing for The Modern Web Slide 30 Designing for The Modern Web Slide 31 Designing for The Modern Web Slide 32 Designing for The Modern Web Slide 33 Designing for The Modern Web Slide 34 Designing for The Modern Web Slide 35 Designing for The Modern Web Slide 36 Designing for The Modern Web Slide 37 Designing for The Modern Web Slide 38 Designing for The Modern Web Slide 39 Designing for The Modern Web Slide 40 Designing for The Modern Web Slide 41 Designing for The Modern Web Slide 42 Designing for The Modern Web Slide 43 Designing for The Modern Web Slide 44 Designing for The Modern Web Slide 45 Designing for The Modern Web Slide 46 Designing for The Modern Web Slide 47 Designing for The Modern Web Slide 48 Designing for The Modern Web Slide 49 Designing for The Modern Web Slide 50 Designing for The Modern Web Slide 51 Designing for The Modern Web Slide 52 Designing for The Modern Web Slide 53 Designing for The Modern Web Slide 54 Designing for The Modern Web Slide 55 Designing for The Modern Web Slide 56 Designing for The Modern Web Slide 57 Designing for The Modern Web Slide 58 Designing for The Modern Web Slide 59 Designing for The Modern Web Slide 60 Designing for The Modern Web Slide 61 Designing for The Modern Web Slide 62 Designing for The Modern Web Slide 63 Designing for The Modern Web Slide 64 Designing for The Modern Web Slide 65 Designing for The Modern Web Slide 66
Upcoming SlideShare
What I Learned at WCSF 2012
Next
Download to read offline and view in fullscreen.

19 Likes

Share

Download to read offline

Designing for The Modern Web

Download to read offline

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.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Designing for The Modern Web

  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. IN THE YEAR 2015 2015
  6. The total number of people using the web on mobile devices is set to surpass 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 SHOULD NEVER BE AN AFTERTHOUGHT
  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 RETINA 2880 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 SPEED IMAGE SIZE
  30. CONNECTION SPEED IMAGE SIZE
  31. SERVING UP GRAPHICS
  32. TEXT PNG X2 JPG LOW QUALITY X2 BACKGROUNDS 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 DETECTION function  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-images Retina-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 JQUERY 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'  ); }  );
  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 13KB LOW 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
  • Vhjkjh

    Jun. 29, 2018
  • JeffStokvis

    Mar. 27, 2014
  • Tenchu55

    Jul. 1, 2013
  • zackwragg

    Feb. 11, 2013
  • TiareMedia

    Feb. 1, 2013
  • rsunay

    Nov. 26, 2012
  • acebal

    Nov. 26, 2012
  • vfowler

    Aug. 29, 2012
  • stooni

    Aug. 18, 2012
  • geedub

    Aug. 17, 2012
  • torumiki

    Aug. 13, 2012
  • Codylandefeld

    Aug. 9, 2012
  • krm0229

    Aug. 8, 2012
  • edouardpetit

    Aug. 7, 2012
  • LukasY

    Aug. 7, 2012
  • bardiasoleimanzadeh

    Aug. 6, 2012
  • Japho

    Aug. 6, 2012
  • Taylor4484

    Aug. 4, 2012
  • ISThoresen

    Aug. 4, 2012

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.

Views

Total views

21,178

On Slideshare

0

From embeds

0

Number of embeds

2,709

Actions

Downloads

135

Shares

0

Comments

0

Likes

19

×