Download as PDF, PPTX
Uploaded bySara Cannon
Designing for The Modern Web
The document discusses the importance of designing for mobile devices as the number of users on mobile is expected to surpass desktop users by 2015. It emphasizes a mobile-first approach to web design, incorporating responsive web design principles, flexible grids, and retina images. Additionally, it addresses practical implementations like CSS media queries and the use of JavaScript for detecting device pixel ratios to enhance user experience on varying devices.
More Related Content
![[Azure Council Experts (ACE) 第14回定例会] Microsoft Azureアップデート情報 (2015/10/22-201...](https://cdn.slidesharecdn.com/ss_thumbnails/20151211aceazureupdate-151211083949-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Azure Council Experts (ACE) 第33回定例会] Microsoft Azureアップデート情報 (2018/12/14-201...](https://cdn.slidesharecdn.com/ss_thumbnails/20190215aceazureupdate-190215080003-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Azure Council Experts (ACE) 第10回定例会] Microsoft Azureアップデート情報 (2015/02/19-201...](https://cdn.slidesharecdn.com/ss_thumbnails/20150416aceazureupdate-150416040639-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Designing for The Modern Web
![[convergese] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/2012-adaptive-images-convergese-120509135732-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[cssdevconf] Adaptive Images in RWD](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv6-121210084537-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[rwdsummit2012] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/schmitt-adaptive-imagesv2-120829225201-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[html5tx] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-images-html5tx-130202100125-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[CSSDevConf] Adaptive Images in Responsive Web Design 2014](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-images-cssdevconf-141013185313-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
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 numberof 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.
- 10.
- 11.
- 12. ILLUSTRATION INSPIRED BYBRAD FROST http://sar.ac/IJF7Rf
- 13. MOBILE SHOULD NEVER BEAN AFTERTHOUGHT
- 14.
- 15.
- 19.
- 20.
- 21.
- 22.
- 23.
- 25. iPHONE 3GS - 480PX 163 DPI 320 PX 153,600 PIXELS
- 26. iPHONE 4 + 96OPX 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 GeoffTeehan
- 30.
- 32.
- 33. 2G IS THENEW DIAL-UP
- 34.
- 35.
- 36.
- 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.
- 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%; } }
- 43.
- 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.
- 47.
- 48.
- 49.
- 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 DEGRADATIONJQUERY 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 DEGRADATIONCSS #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.
- 58.
- 59. WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE- YOUR-OWN-ICON-WEBFONT/ INKSCAPE.ORG
- 60.
- 61.
- 62.
- 66. “ Our workis never over. - DAFT PUNK