21. What about mobile context?
http://www.flickr.com/photos/brunauto/5062644167/
22. 80% during misc downtime
76% while waiting in lines
86% while watching TV
69% for point of sale research
http://www.flickr.com/photos/carbonnyc/5140154965
29. Privacy and cookie policy
Log In
Subscribe
Subscribe
Slow sites
mean real
dollars
are lost.
Basket
Reports
Contact Us
Training
Events
i am looking for...
Jobs
Blog
More
Browse by topic
Home / Blog
67% of consumers cite slow
websites as the main cause of
basket abandonment
by David Moth
Tweet
236
06 December 2012 11:40
3
8 comments
Like
14
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
Print
Share
20
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.
ADVERTISE HERE »
30. 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/
31. Mobile users don’t care that their network is slow.
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
49. “Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
Famous last words.
50. Where are the Mobile First RWDs?
106 sites from mediaqueri.es tested
9%
4%
25%
21%
4%
Mobile is Larger
Same Size
Less than 10% Savings
11 to 50% Savings
51% to 100% Savings
Greater than 100% Savings
38%
http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
51. Guy Podjarny repeated the experiment
2013: 476 sites from mediaqueri.es tested
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
60. Time to pen another fool’s gold post?
http://www.flickr.com/photos/myklroventine/3400040943/
61.
62.
63. “
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
67. Mobile First Responsive Web Design is a
technical approach for responsive designs.
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
68. 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]
}
*/
e mobile media query block
Move th
e desktop media query.
above th
this, we’re making sure
By doing
he cascading effect of CSSiris
t
nsistent with our mobile f ostch.
co
ogressive enhancement appr a
pr
Keep basic styles outside of media queries.
69.
70. “
The absence of support for media queries is in fact
the first media query.
—Bryan Rieger, Yiibu
75. What do you see if your browser doesn’t support media queries?
Desktop First Responsive Web Design =
Desktop Fallback
Mobile First Responsive Web Design =
Mobile Fallback
76. IE conditional comments
<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.
77. IE conditional comments
<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)
78. #2
Keep CSS images
in their place
http://www.flickr.com/photos/lintmachine/2306383943/
79. Images with display:none are still downloaded
@media screen and (max-width:480px) {
[Other CSS rules are here]
.header {display:none;}
}
it
s.jpg file is 440.7K making
The tap
.
the largest file on the page
81. Images scoped within media queries
<div
id="test5"></div>
@media
all
and
(min-‐width:
601px)
{
#test5
{
background-‐image:url('images/test5-‐desktop.png');
width:200px;
height:75px;
}
}
@media
all
and
(max-‐width:
600px)
{
#test5
{
background-‐image:url('images/test5-‐mobile.png');
width:200px;
height:75px;
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
82. display:none on parent element
<div
id="test3">
<div></div>
</div>
#test3
div
{
background-‐image:url('images/test3.png');
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test3
{
display:none;
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
83. Image override with a media query
<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');
}
}
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
84. #3
Conditionally load JS based on
screen size and capabilities
http://www.flickr.com/photos/lyza/7382255242/
85. 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>
This single iframe causes 47 files to be downloaded!
Extremely long URL abbreviated
@media screen and (max-width:480px) {
.
.
.
are many more rules
There
in the css file.
#map {display:none;}
}
The iframe has an id of map. This rule hides
the Google Maps iframe by setting the
display to none.
86. In JS, use
matchMedia()
or a polyfill for
it to test a
media query
https://github.com/paulirish/matchMedia.js
87. AJAX Include Pattern
Use AJAX to bring more content into the page as the viewport width gets bigger
<a
href="articles/latest/"
data-‐append="articles/latest/fragment"
data-‐media="(min-‐width:
30em)">
Latest
Articles
</a>
https://github.com/filamentgroup/Ajax-Include-Pattern/
90. One SRC to rule all images
n
r labels on the Og
There are 16 bee at use an img ta
ap Now page th the Bensons Bubbler.
T
e this one for
lik
Despite the need for multiple versions of this image depending on
the
screen size, HTML only allows one value for the src.
<img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
102. Art direction: Images with text
Search
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
Sign In
Account
Get Email
Español
Shopping Bag
107. Picturefill JavaScript Library
<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>
<div
data-‐src="extralarge.jpg"
data-‐media="(min-‐width:
1000px)"></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
112. Apple.com as an anti-pattern
Downloads both standard and retina images
The total size of the page
goes from 502.90K to
2.13MB when the retina
versions of images are
downloaded.
http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/
113. 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);
}
}
118. How do you provide the right video codec?
http://www.longtailvideo.com/html5/
119. Multiple sources with Flash Fallback
<video
width="640"
height="360"
controls>
<!-‐-‐
MP4
must
be
first
for
iPad!
-‐-‐>
<source
src="__VIDEO__.MP4"
type="video/mp4"
/><!-‐-‐
Safari
/
iOS
video
-‐-‐>
<source
src="__VIDEO__.OGV"
type="video/ogg"
/><!-‐-‐
Firefox
/
Opera
/
Chrome10
-‐-‐>
<!-‐-‐
fallback
to
Flash:
-‐-‐>
<object
width="640"
height="360"
type="application/x-‐shockwave-‐flash"
data="__FLASH__.SWF">
<param
name="movie"
value="__FLASH__.SWF"
/>
<param
name="flashvars"
value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4"
/>
<img
src="__VIDEO__.JPG"
width="640"
height="360"
alt="__TITLE__"
title="No
video
playback
capabilities,
please
download
the
video
below"
/>
</object>
</video>
<p>
<strong>Download
Video:</strong>
Closed
Format:
<a
href="__VIDEO__.MP4">"MP4"</a>
Open
Format:
<a
href="__VIDEO__.OGV">"Ogg"</a>
</p>
http://camendesign.com/code/video_for_everybody
120. How do you maintain the aspect ratio of video?
• This is mostly a problem if you’re embedding video from a third
party site. If you are using your own video, it is not usually an
issue.
• For third party video, FitVid.js is a good place to start.
• For your own video, the only trick is making sure you’re not
changing the proportions of the video element as the page
resizes.
121.
122.
123. How do you send the right resolution and quality?
124. How do you send the right resolution and quality?
http://www.longtailvideo.com/html5/
129. Home
App
Icon Packs
Font CDN
Demo
Documentation
Blog
About
IcoMoon
Custom Built and Crisp Icon Fonts, Done Right
IcoMoon App
Premium Icons
Font CDN
Browse 3800+ Free Vector Icons
1200+ Vector Icons & Counting
Serve Custom-Built Fonts
Import Your Own Vectors to
Make Fonts
Handcrafted on a 16×16 grid
Powered by Amazon Web
Services
Generate Custom & Crisp Icon
Several Different Formats
Optimized for Icon Fonts
Easily Update Your Icon Fonts
130. What Is This
Grumpicon.com based on Grunticon
/'
//
. //
|//7
/' "
.
. .
| (
_ _ - -_
| '._ '
__ _/
'-'
_ __
// _/
|
|
||
|
/
/ |
/
|VV
||--__________/-||-/|
|| ||
|| ||
{ } { }
{ }{ }
Drag & Drop ur SVGs on the Grumpicon plz.
Issues?
134. #4
Images can be resized to any size
with URL parameters
Example from Sencha IO SRC. Define height, width or both.
<img
src="http://src.sencha.io/320/http://sencha.com/files/u.jpg"
alt="My constrained image"
/>
135.
136. “
“Save for the Web” should be a thing of the past.
—@adamdbradley
137. #5
Provide automated output of
PictureFill or alternative
<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>
<div
data-‐src="extralarge.jpg"
data-‐media="(min-‐width:
1000px)"></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>
138. Responsive Images Markup Function
templates contain breakpoint information
{
"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},
]
}
Sample s
yntax. Do
n’t get
hung up o
n details
.
Responsive Images Markup Function
Markup f
or all ima
ges can b
changed
e
in one spo
t.
PictureFill
Markup
139. #6
Provide a way to override resized
images for art direction needs
140. #7
Integrate image compression
best practices
jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers
learn from mod_pagespeed or use it
141. #8
Bonus: Detect support for
WebP image format and use it
The average WebP 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.
142. #!
The only rule for your responsive
images implementation.
Plan for the fact that it will be deprecated.
Make it easy to change.
143. It’s three years later. Let’s revisit the
my original question.
144. Can a one size fits all solution…
http://www.flickr.com/photos/theyoungthousands/4025421438