Próxima SlideShare
Designing for The Modern Web
- DESIGNING FOR THE MODERN WEBSARA CANNON RAN.GE/WCSF2012
- SARA CANNON Artist, Designer, & WordPress Developer In Birmingham, AL Co-founder / Creative Director Range http://ran.ge @rangeincsara-cannon.com @saracannon slideshare.net/saracannon
- DESIGNING FOR THE MODERN WEB
- DESIGNING FOR THE FUTURE WEB
- IN THE YEAR 2015 2015
- 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
- 2007 2009 2011 2013 2015 DESKTOP MOBILE
- 2007 2009 2011 2013 2015 DESKTOP MOBILE
- THE MOBILE WEB
- THE MOBILE WEB
- THE WEB
- ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
- MOBILE SHOULDNEVER BE ANAFTERTHOUGHT
- CONTENT
- RESPONSIVE WEB DESIGN
- MOBILE FIRST
- FLEXIBLE GRIDS
- FLEXIBLE MEDIA
- ADAPTIVE IMAGES
- RETINA
- iPHONE 3GS -480 PX 163 DPI 320 PX 153,600 PIXELS
- iPHONE 4 +96O PX 326 DPI 64O PX 614,4OO PIXELS
- iPHONE 3GS - iPHONE 4 + 460,800 MORE PIXELS
- MACBOOK PRO 15-INCH RETINA2880 PX 220 DPI 2,304,0OO 1800 PX PIXELS
- image by Geoff Teehan
- RETINA FIRST
- SPEED V.S.AWESOME
- 2G IS THE NEW DIAL-UP
- CONNECTION SPEEDIMAGE SIZE
- CONNECTION SPEEDIMAGE SIZE
- SERVING UP GRAPHICS
- TEXT PNG X2 JPG LOW QUALITY X2BACKGROUNDS CSS MEDIA QUERY SVG ICONS ICONFONT
- HTTP://MIR.ACULO.US THOMAS FUCHS
- HTTP://RETINAFY.ME THOMAS FUCHS
- CSS DETECTION
- 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 */}
- #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%;}}
- JAVASCRIPT DETECTION
- DEVICE-PIXEL-RATIO DETECTIONfunction isRetina(){ return ((devicePixelRatio in window && devicePixelRatio > 1) || (matchMedia in window && !matchMedia("(-‐moz-‐device-‐pixel-‐ratio:1.0)").matches))}
- KITTY.JPG KITTY@X2.JPG
- retina.js
- github.com/retina-images/retina-imagesRetina-images.complexcompulsions.com
- wordpress.org/extend/plugins/wp-retina-2x
- SVG
- 5 KB 1 KB
- 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>
- 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 );} );
- SVG GRACEFUL DEGRADATION CSS#site-‐title { background-‐image: url(../images/logo.svg);}.nosvg #site-‐title { background-‐image: url(../images/logo.png);}
- SVG 14KB X2 PNG 13KBLOW RES X2 JPG 12KB
- ICONFONTS
- CSS-TRICKS.COM/EXAMPLES/ICONFONT
- WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE- YOUR-OWN-ICON-WEBFONT/ INKSCAPE.ORG
- TESTING
- make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mb
- NETWORK LINK CONDITIONER
- “ Our work is never over. - DAFT PUNK
Inicia sesión para ver los comentarios