Designing for The Modern Web
•
19 gefällt mir•16,390 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Designing for The Modern Web
Ähnlich wie Designing for The Modern Web (20)
Mehr von Sara Cannon
Mehr von Sara Cannon (19)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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
- 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
- 19. MOBILE FIRST
- 20. FLEXIBLE GRIDS
- 21. FLEXIBLE MEDIA
- 22. ADAPTIVE IMAGES
- 23. RETINA
- 25. iPHONE 3GS - 480 PX 163 DPI 320 PX 153,600 PIXELS
- 26. iPHONE 4 + 96O PX 326 DPI 64O PX 614,4OO PIXELS
- 27. iPHONE 3GS - iPHONE 4 + 460,800 MORE PIXELS
- 28. MACBOOK PRO 15-INCH RETINA 2880 PX 220 DPI 2,304,0OO 1800 PX PIXELS
- 29. image by Geoff Teehan
- 30. RETINA FIRST
- 33. 2G IS THE NEW DIAL-UP
- 37. TEXT PNG X2 JPG LOW QUALITY X2 BACKGROUNDS CSS MEDIA QUERY SVG ICONS ICONFONT
- 38. HTTP://MIR.ACULO.US THOMAS FUCHS
- 39. HTTP://RETINAFY.ME THOMAS FUCHS
- 40. CSS DETECTION
- 41. 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 */ }
- 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%; } }
- 44. DEVICE-PIXEL-RATIO DETECTION function isRetina(){ return (('devicePixelRatio' in window && devicePixelRatio > 1) || ('matchMedia' in window && !matchMedia("(-‐moz-‐device-‐pixel-‐ratio:1.0)").matches)) }
- 45. KITTY.JPG KITTY@X2.JPG
- 46. retina.js
- 49. SVG
- 51. 5 KB 1 KB
- 52. 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>
- 53. 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' ); } );
- 54. SVG GRACEFUL DEGRADATION CSS #site-‐title { background-‐image: url(../images/logo.svg); } .nosvg #site-‐title { background-‐image: url(../images/logo.png); }
- 56. SVG 14KB X2 PNG 13KB LOW RES X2 JPG 12KB
- 57. ICONFONTS
- 59. WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE- YOUR-OWN-ICON-WEBFONT/ INKSCAPE.ORG
- 60. TESTING
- 66. “ Our work is never over. - DAFT PUNK