7. Responsive web
design offers us
for a sensible way to deal
with device diversity.
http://www.flickr.com/photos/superfantastic/50088733/
http://www.flickr.com/photos/darrentunnicliff/4232232092/
8. And yet the one question I frequently ask myself is…
http://www.flickr.com/photos/classblog/5136926303
28. 80% during misc downtime
76% while waiting in lines
86% while watchingTV
69% for point of sale research
http://www.flickr.com/photos/carbonnyc/5140154965
37. http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
People demand fast web sites Slow sites mean real dollars are lost
67% of consumers cite slow
websites as the main cause of
basket abandonment
Daily Pulse Newsletter
Get our free Daily Pulse Newsletter to
keep informed about the latest news and
insights in Digital Marketing.
Register for our free Daily Pulse
ADVERTISE HERE »
by David Moth 06 December 2012 11:40 8 comments Print
TweetTweet 236 3
Everyone hates slow loading websites, and a new survey
highlights just how damaging a slow site can be to the user
experience.
The study by Brand Perfect found that two thirds of UK
consumers (67%) cite slow loading times as the main reason
they would abandon an online purchase.
It’s a topic we’ve looked at in more detail in our post 'Site
speed: case studies, tips and tools for improving your conversion rate', with stats showing that
slow loading websites are losing businesses up to £1.73bn a year.
Home / Blog
Subscribe Reports Training Events Jobs Blog More Browse by topic
Like 14 ShareShare 20
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Top ecommerce sites are 22% slower than last year
http://www.webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-slower-than-they-were-last-year/
68. “Awesome.We’ll devote a chapter to Mobile
First ResponsiveWeb Design in our book.”
Famous last words.
69. 9%
4%
21%
38%
4%
25%
Mobile is Larger
Same Size
Less than 10% Savings
11 to 50% Savings
51% to 100% Savings
Greater than 100% Savings
Where are the Mobile First RWDs?
106 sites from mediaqueri.es tested
http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
70. Guy Podjarny repeated the experiment
2013: 476 sites from mediaqueri.es tested
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
82. Being Responsive from a layout perspective should not preclude us from being
responsive from a performance and interaction perspective.
—Scott Jehl
“ https://twitter.com/scottjehl/status/243025352069349377
88. /* Wider viewports/higher resolutions (e.g. desktop) */
@media screen and (min-width:481px) {
[Desktop layout rules here]
}
/* Mobile/lower-resolution devices */
@media screen and (max-width:480px) {
[Mobile layout rules here]
}
Move the mobile media query block
above the desktop media query.
By doing this, we’re making sure
the cascading effect of CSS is
consistent with our mobile first
progressive enhancement approach.
89. Reorder media queries so cascade
goes from small to large screens
/* Wider viewports/higher resolutions (e.g. desktop) */
@media screen and (min-width:481px) {
[Desktop layout rules here]
}
/* Mobile/lower-resolution devices */
@media screen and (max-width:480px) {
[Mobile layout rules here]
}
Move the mobile media query block
above the desktop media query.
By doing this, we’re making sure
the cascading effect of CSS is
consistent with our mobile first
progressive enhancement approach.Keep basic styles outside of media queries.
90. The absence of support for media queries is in fact the first media query.
—Bryan Rieger
“
93. Desktop First ResponsiveWeb Design = Desktop Fallback
Mobile First ResponsiveWeb Design = Mobile Fallback
What do you see if your browser doesn’t support media queries?
94. <link rel="stylesheet" type="text/css" href="taps.css" />
<link rel="stylesheet" type="text/css" href="layout.css" media="all and
(min-width: 481px)">
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="layout.css" media="all" />
<![endif]-->
The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.
95. <link rel="stylesheet" type="text/css" href="taps.css" />
<link rel="stylesheet" type="text/css" href="layout.css" media="all and
(min-width: 481px)">
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="layout.css" media="all" />
<![endif]-->
The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.
or use Respond.js
(a media query polyfill for IE)
97. The taps.jpg file is 440.7K making it
the largest file on the page.
@media screen and (max-width:480px) {
[Other CSS rules are here]
.header {display:none;}
}
98. The taps.jpg file is 440.7K making it
the largest file on the page.
@media screen and (max-width:480px) {
[Other CSS rules are here]
.header {display:none;}
}
Images with display:none are still downloaded
102. Image override with a
media query
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
<div
id="test4"></div>
#test4
{
background-‐image:url('images/test4-‐desktop.png');
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test4
{
background-‐image:url('images/test4-‐mobile.png');
}
}
103. #3 Conditionally load JS
based on screen size
and capabilities
http://www.flickr.com/photos/lyza/7382255242/
104. <iframe id="map" width="300" height="300" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>
Extremely long URL abbreviated
This single iframe causes 47 files to be downloaded!
105. Hiding content with display:none does not prevent it from downloading.
<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>
Extremely long URL abbreviated
This single iframe causes 47 files to be downloaded!
107. <a
href="articles/latest/"
data-‐append="articles/latest/fragment"
data-‐media="(min-‐width:
30em)">
Latest
Articles
</a>
https://github.com/filamentgroup/Ajax-Include-Pattern/
Use AJAX to bring more content into the page as
the viewport width gets bigger
AJAX Include Pattern
108. Behaviorial Breakpoints
Better yet, keep your breakpoints in your CSS and
have your JavaScript watch to changes to the DOM
triggered by media queries.
110. <img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
There are 16 beer labels on the On
Tap Now page that use an img tag
like this one for the Bensons Bubbler.
Despite the need for multiple versions of this image depending on thescreen size, HTML only allows one value for the src.
111. <img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
There are 16 beer labels on the On
Tap Now page that use an img tag
like this one for the Bensons Bubbler.
Despite the need for multiple versions of this image depending on thescreen size, HTML only allows one value for the src.
One SRC to rule all images
120. Art Direction Images with text
Sign In Account Get Email Español Shopping Bag
Features
New Arrivals
Show Off Tees
Backpacks
Tech Toys
2/$30 & 2/$40 PINK Favorites
Spin the Panty Wheel
Tops
All Tops
Hoodies & Crews
Tees & Tanks
Bottoms
All Bottoms
Sweats
Shorts
Yoga
PINK Loves Yoga
Panties
5/$26 Styles
3/$33 Styles
Shop by Style
Bras
All Bras
Bandeaus & Bralettes
2/$42 Wear Everywhere Bras
Bras 101
Swim
Search
125. In the meantime, pick a hack.
My fave is PictureFill.
<div
data-‐picture
data-‐alt="A
giant
stone
face
at
The
Bayon
temple
in
Angkor
Thom,
Cambodia">
<div
data-‐src="small.jpg"></div>
<div
data-‐src="medium.jpg"
data-‐media="(min-‐width:
400px)"></div>
<div
data-‐src="large.jpg"
data-‐media="(min-‐width:
800px)"></div>
<!-‐-‐
Fallback
content
for
non-‐JS
browsers.
-‐-‐>
<noscript>
<img
src="small.jpg"
alt="A
giant
stone
face
at
The
Bayon
temple
in
Angkor
Thom,
Cambodia">
</noscript>
</div>https://github.com/scottjehl/picturefill
129. Apple.com is an anti-pattern.
Downloads both standard and retina.
The total size of the page goes from 502.90K to 2.13MB
when the retina versions of images are downloaded.
130. If possible, use CSS for now.
@media
screen
and
(-‐webkit-‐device-‐pixel-‐ratio:
1)
{
/*
Image
for
normal
displays.
*/
#main
{
background-‐image:
url(dog.jpg);
}
}
@media
screen
and
(-‐webkit-‐min-‐device-‐pixel-‐ratio:
2)
{
/*
Image
for
high
resolution
displays.
*/
#main
{
background-‐image:
(dog-‐hi-‐res.jpg);
}
}
137. IcoMoon.io makes font icons easy
IcoMoon App Premium Icons Font CDN
Browse 3800+ Free Vector Icons 1200+ Vector Icons & Counting Serve Custom-Built Fonts
IcoMoonIcoMoon
Custom Built and Crisp Icon Fonts, Done Right
Home App Icon Packs Font CDN Demo Documentation Blog About
138. Grumpicon.com helps with SVG
Based on open source grunticon
/'
//
. //
|//7
/' "
.
| (
_ _ - -_ | '._ '
_ __ _- _ _/ '-'
// _/
| |
|| | /
/ | /
|VV ||--__________/-||-/|
|| || || ||
{ } { } { }{ }
. .
Drag & Drop ur SVGs on the Grumpicon plz.
What Is This Issues?
141. Images can be resized to any
size with URL parameters#4 <img
src="http://src.sencha.io/320/http://sencha.com/files/u.jpg"
alt="My constrained image"
/>
143. Provide automated output
of PictureFill or alternative#5
{
"source":"/source.jpg",
"breakpoints":
[
{
"max-‐width":"30em","pixel-‐density":1,"width":360px},
{
"max-‐width":"30em","pixel-‐density":2,"width":720px},
{
"max-‐width":"30em","pixel-‐density":1,"width":800px},
{
"max-‐width":"30em","pixel-‐density":2,"width":1600px},
{
"pixel-‐density":1,"width":800px},
{
"pixel-‐density":2,"width":1600px},
]
}
templates contain breakpoint information
Responsive Images Markup Function
PictureFill
Markup
Sample syntax.Don’t get hung upon details.
Markup for allimages can bechanged in one spot.
144. Provide a way to override resized
images for art direction needs#6
146. Bonus: Detect support forWebP
image format and use it#8
The averageWebP file size is 25% - 34% smaller
compared to JPEG file size.
WebP compresses 34% better than libpng, and 26%
better than pngout for loseless images.
147. The only rule for your responsive images implementation:
Plan for the fact that it will be deprecated. Make it easy to change.