DESIGNING FOR THEMODERN WEB
SARA CANNON RAN.GE/WCSF2012
SARA CANNONArtist, Designer, & WordPress Developer In Birmingham, AL
Co-founder / Creative DirectorRange http://ran.ge @rangeinc
sara-cannon.com @saracannon slideshare.net/saracannon
DESIGNING FOR THEMODERN WEB
DESIGNING FOR THEFUTURE WEB
2015IN THE YEAR
2015
INTERNATIONAL DATA CORPORATION (IDC)http://www.idc.com/getdoc.jsp?containerId=prUS23028711
The total number of people using the web on mobile devices is set to surpass desktops by 2015.
DESKTOP MOBILE
2007 20152009 20132011
DESKTOP MOBILE
2007 20152009 20132011
THE MOBILE WEB
THE MOBILE WEB
THE WEB
ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
MOBILE SHOULD NEVER BE AN AFTERTHOUGHT
CONTENT
RESPONSIVE WEB DESIGN
MOBILE FIRST
FLEXIBLE GRIDS
FLEXIBLE MEDIA
ADAPTIVE IMAGES
RETINA
163 DPI153,600 PIXELS
480 P
X
320 PX
iPHONE 3GS -
326 DPI614,4OO PIXELS
96O P
X
64O PX
iPHONE 4 +
460,800 MORE PIXELS
iPHONE 4 +iPHONE 3GS -
220 DPI2,304,0OO PIXELS
2880
PX
1800 PX
MACBOOK PRO 15-INCH RETINA
image by Geoff Teehan
RETINA FIRST
SPEED
AWESOMEV.S.
2G IS THE NEW DIAL-UP
CON
NEC
TION
SPE
ED
IMAGE SIZE
CON
NEC
TION
SPE
ED
IMAGE SIZE
SERVING UP GRAPHICS
TEXTPNG JPG
BACKGROUNDSSVG
ICONS
X2 LOW QUALITY X2CSS MEDIA QUERY
ICONFONT
HTTP://MIR.ACULO.US THOMAS FUCHS
HTTP://RETINAFY.ME THOMAS FUCHS
CSS DETECTION
@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 */}
DEVICE-PIXEL-RATIO MEDIA QUERY
#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
function isRetina(){ return (('devicePixelRatio' in window && devicePixelRatio > 1) || ('matchMedia' in window && !matchMedia("(-‐moz-‐device-‐pixel-‐ratio:1.0)").matches))}
DEVICE-PIXEL-RATIO DETECTION
KITTY.JPG [email protected]
retina.js
github.com/retina-images/retina-images
Retina-images.complexcompulsions.com
wordpress.org/extend/plugins/wp-retina-2x
SVG
1 KB5 KB
<?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>
VBLOGO.SVG
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' );} );
SVG GRACEFUL DEGRADATION JQUERY
#site-‐title { background-‐image: url(../images/logo.svg);}
.nosvg #site-‐title { background-‐image: url(../images/logo.png);}
SVG GRACEFUL DEGRADATION CSS
SVG
X2 PNG
LOW RES X2 JPG
14KB
13KB
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
