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

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 Geoﬀ Teehan

RETINA FIRST

SPEED V.S.AWESOME

2G IS THE NEW DIAL-UP

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

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

http://sara-cannon.com	1773
http://ran.ge	170
http://lanyrd.com	99
http://durumsama.wordpress.com	84
http://eventifier.co	49
http://eastbaywp.com	45
https://twitter.com	41
http://micasa.commandw.com	33
https://si0.twimg.com	14
http://dev.ran.ge	11
http://translate.googleusercontent.com	6
http://www.marketstech.com	4
http://localhost	4
http://www.acpomit.co.uk	2
http://bo.lt	2
http://rambshop.com	2
http://sabadellenvivo.es	2
http://turfje.nl	1
http://www.ykhong.com	1
http://tweetedtimes.com	1
http://marjhahne.com	1
http://www.eventifier.co	1
http://ireneshen.com	1
https://twimg0-a.akamaihd.net	1
http://www.linkedin.com	1
http://localhost.local	1
http://www.the-sub-mission.com	1
http://flexwage.lo	1
http://sara-cannon.com.	1
http://pinterest.com	1

Designing for The Modern Web

by Sara Cannon on Aug 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

30 Embeds 2,354

Statistics