Más contenido relacionado La actualidad más candente (20) Similar a Designing for The Modern Web (20) Designing for The Modern Web2. 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
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
28. MACBOOK PRO
15-INCH RETINA
2880 PX
220 DPI
2,304,0OO
1800 PX
PIXELS
37. TEXT
PNG X2
JPG LOW QUALITY X2
BACKGROUNDS CSS MEDIA QUERY
SVG
ICONS ICONFONT
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%;
}
}
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