Slide 1
Slide 1 text
http://www.flickr.com/photos/stuart-dootson/4024407198
Jason Grigsby • @grigs • [email protected]
Mobile First Responsive Design
Slide 2
Slide 2 text
Follow along:
@grigs_talks
Slides:
bit.ly/grigs-2013-04-08
http://www.flickr.com/photos/stevegarfield/4247757731/
Slide 3
Slide 3 text
e web has always been a balancing act…
http://www.flickr.com/photos/classblog/5136926303
Slide 4
Slide 4 text
with many competing priorities.
http://www.flickr.com/photos/tudor/4324056624/
Slide 5
Slide 5 text
Finding that balance
is more difficult…
http://www.flickr.com/photos/superfantastic/50088733/
Slide 6
Slide 6 text
as device diversity increases.
http://www.flickr.com/photos/lyza/7382235106
Slide 7
Slide 7 text
http://www.flickr.com/photos/darrentunnicliff/4232232092/
Responsive web design offers us
for a sensible way to deal with device diversity.
Slide 8
Slide 8 text
And yet the one question I frequently ask myself is…
Slide 9
Slide 9 text
Can a one size ts all solution…
http://www.flickr.com/photos/sldghmmr/6041481069
Slide 10
Slide 10 text
compete with
a tailored experience?
http://www.flickr.com/photos/helloturkeytoe/4932748746/
Slide 11
Slide 11 text
Important question from many perspectives:
Slide 12
Slide 12 text
Important question from many perspectives:
Search engine optimization
Context
Advertising
Performance
Slide 13
Slide 13 text
Performance?
Slide 14
Slide 14 text
http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
Slide 15
Slide 15 text
Log In Subscribe Basket Contact Us i am looking for...
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
Tweet
Tweet 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
Privacy and cookie policy
Home / Blog
Subscribe Reports Training Events Jobs Blog More Browse by topic
Like 14 Share
Share 20
Slide 16
Slide 16 text
Top ecommerce sites are 22% slower
than they were last year
http://www.webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-slower-than-they-were-last-year/
Slide 17
Slide 17 text
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Slide 18
Slide 18 text
2
CORE GESTURES
CORE GESTURES
CORE GESTURES
CORE GESTURES
CORE GESTURES
CORE GESTURES
CORE GESTURES
CORE GESTURES
Tap
)YPLÅ`[V\JOZ\YMHJL^P[OÄUNLY[PW
Pinch
;V\JOZ\YMHJL^P[O[^VÄUNLYZHUKIYPUN
them closer together.
Double Tap
9HWPKS`[V\JOZ\YMHJL[^PJL^P[OÄUNLY[PW
Spread
;V\JOZ\YMHJL^P[O[^VÄUNLYZHUKTV]L
them apart.
Drag
4V]LÄUNLY[PWV]LYZ\YMHJL^P[OV\[SVZPUN
contact.
Press
Touch surface for extended period of time.
Flick
8\PJRS`IY\ZOZ\YMHJL^P[OÄUNLY[PW
Press+ Tap
7YLZZZ\YMHJL^P[OVULÄUNLYHUKIYPLÅ`
[V\JOZ\YMHJL^P[OZLJVUKÄUNLY
Mobile browsers offer many ways to
navigate desktop web sites.
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Slide 19
Slide 19 text
ere are no gestures that can
make a web site faster.
http://www.flickr.com/photos/stephenjohnbryde/384095768/
Slide 20
Slide 20 text
http://www.flickr.com/photos/nathaninsandiego/4829858186/
Slide 21
Slide 21 text
http://www.flickr.com/photos/wesbrowning/5316400258/
Slide 22
Slide 22 text
http://www.flickr.com/photos/69797234@N06/7203485148/
BBG: Before Boston Globe
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Original Resized K Saved % Saved
Holmes 34.7K 8.1K 26.6K 76.6%
Watson 39.0K 8.4K 30.6K 78.4%
Mycroft 30.5K 6.7K 23.8K 78.0%
Moriarty 43.4K 8.2K 35.2K 81.1%
Adler 26.0K 6.6K 19.4K 74.6%
Winter 34.7K 7.8K 26.9K 77.5%
Total 208.3K 45.8K 162.5K 78.0%
Media Queries Hide Problems
Slide 29
Slide 29 text
e resounding answer from the community:
Mobile First Responsive Web Design
Slide 30
Slide 30 text
“Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
Slide 31
Slide 31 text
“Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
Famous last words.
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
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/
Slide 34
Slide 34 text
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Guy Podjarny repeated the experiment
2013: 476 sites from mediaqueri.es tested
Slide 35
Slide 35 text
http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
http://www.flickr.com/photos/beautyredefined/2643858323/
Slide 38
Slide 38 text
http://www.flickr.com/photos/puuikibeach/3654517679
Slide 39
Slide 39 text
Most responsive web designs are…
Slide 40
Slide 40 text
Time to pen another fool’s gold post?
http://www.flickr.com/photos/myklroventine/3400040943/
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
https://twitter.com/scottjehl/status/243025352069349377
Slide 43
Slide 43 text
5key techniques
for responsible
responsive design
Slide 44
Slide 44 text
http://www.flickr.com/photos/auyongcheemeng/95769332/
Build Mobile First
Responsive Designs
#1
Slide 45
Slide 45 text
http://www.flickr.com/photos/localcelebrity/4831362933/
Different than
Mobile First
Design eory
Slide 46
Slide 46 text
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design is a
technical approach for responsive designs.
Slide 47
Slide 47 text
http://www.flickr.com/photos/gumption/3639682201/
Slide 48
Slide 48 text
http://www.businessinsider.com/survey-mobile-first-bad-strategy-2012-12
Slide 49
Slide 49 text
Growth
Constraints
Capabilities
Opportunity
Focus
Innovation
=
=
=
Luke’s Take on Mobile First
http://www.lukew.com/ff/entry.asp?933
Slide 50
Slide 50 text
Mobile First Doesn’t Mean Starting from Scratch
Slide 51
Slide 51 text
How do I make this responsive?
Slide 52
Slide 52 text
How do I make this responsive?
Slide 53
Slide 53 text
http://www.flickr.com/photos/ancphotos_/6728574731
Slide 54
Slide 54 text
Ok, let’s start from a clean slate
http://www.flickr.com/photos/salendron/5569020488/
Slide 55
Slide 55 text
What would the mobile version of this form look like?
Slide 56
Slide 56 text
What would the mobile version of this form look like?
Slide 57
Slide 57 text
What would the mobile version of this form look like?
Slide 58
Slide 58 text
How does that map to the current desktop design?
Slide 59
Slide 59 text
How does that map to the current desktop design?
Slide 60
Slide 60 text
How does that map to the current desktop design?
Slide 61
Slide 61 text
Can this desktop version be better using what
we’ve learned from the mobile version?
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
is is why Mobile First thinking is so
powerful even on projects that are currently
implemented on the desktop.
Mobile
First
Slide 64
Slide 64 text
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design
Slide 65
Slide 65 text
/* 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.
Reorder media queries so cascade goes
from small to large screens
Keep basic styles outside of media queries.
Slide 66
Slide 66 text
e absence of support for media
queries is in fact the rst media query.
—Bryan Rieger, Yiibu
Slide 67
Slide 67 text
Oh come on IE. No love?
Because IE 8 and below don’t support
media queries, IE isn’t getting the
CSS rules that create columns.
Slide 68
Slide 68 text
The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.
IE conditional comments
Slide 69
Slide 69 text
The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.
IE conditional comments
or use Respond.js
(a media query poly ll for IE)
Slide 70
Slide 70 text
http://www.flickr.com/photos/lintmachine/2306383943/
Keep CSS images
in their place
#2
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
@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;
}
}
Images scoped within media queries
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Slide 75
Slide 75 text
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
#test3
div
{
background-‐image:url('images/test3.png');
width:200px;
height:75px;
}
@media
all
and
(max-‐width:
600px)
{
#test3
{
display:none;
}
}
display:none on parent element
Slide 76
Slide 76 text
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
#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');
}
}
Image override with a media query
Slide 77
Slide 77 text
Conditionally load JS based
on screen size and capabilities
#3
http://www.flickr.com/photos/lyza/7382255242/
Slide 78
Slide 78 text
Extremely long URL abbreviated
This single iframe causes 47 files to be downloaded!
Look inside ontap.html to
find this code.
@media screen and (max-width:480px) {
.
.
.
#map {display:none;}
}
taps.css
There are many more rules
in the css file.
The iframe has an id of map. This rule hides
the Google Maps iframe by setting the
display to none.
Hiding content with display:none does
not prevent it from downloading.
Slide 79
Slide 79 text
https://github.com/paulirish/matchMedia.js
Slide 80
Slide 80 text
http://adactio.com/journal/5429/
Slide 81
Slide 81 text
Latest Articles
AJAX Include Pattern
https://github.com/filamentgroup/Ajax-Include-Pattern/
Slide 82
Slide 82 text
http://www.flickr.com/photos/kk/230544325/
Deliver different size ![]()
s
at different screen sizes
#4
Slide 83
Slide 83 text
One SRC to rule all images
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 the
screen size, HTML only allows one value for the src.
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 the
screen size, HTML only allows one value for the src.
Slide 84
Slide 84 text
Two most common use cases
Slide 85
Slide 85 text
https://www.flickr.com/photos/whitehouse/8491445521
Resolution Switching
Includes high-density (retina) images.
Slide 86
Slide 86 text
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Slide 87
Slide 87 text
Not simply cropping
Slide 88
Slide 88 text
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
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
ings are still moving forward on a standards-
based approach for responsive images.
http://www.flickr.com/photos/johnlamb/2576062549/
Slide 92
Slide 92 text
http://responsiveimages.org/
Slide 93
Slide 93 text
Slide 94
Slide 94 text
Handle high-density
images carefully
#5
Slide 95
Slide 95 text
A single image on multiple screens
Slide 96
Slide 96 text
Image Resolution
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408
519360
130080
57920
320x181
480x271
960x541
909x512
1818x1024
Slide 97
Slide 97 text
Image Resolution
3,214%
bigger
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408
519360
130080
57920
320x181
480x271
960x541
909x512
1818x1024
Slide 98
Slide 98 text
0
50
100
150
200
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
172
80
63
22
12
JPEG Compressed (k)
Slide 99
Slide 99 text
0
50
100
150
200
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
172
80
63
22
12
JPEG Compressed (k)
1,433%
bigger
Slide 100
Slide 100 text
0
1500
3000
4500
6000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
5,478
1,362
1,526
381
170
JPEG Uncompressed (k)
Slide 101
Slide 101 text
0
1500
3000
4500
6000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
5,478
1,362
1,526
381
170
JPEG Uncompressed (k)
3,211%
bigger
Slide 102
Slide 102 text
Apple.com as an anti-pattern
Downloads both standard and retina images
e 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/
Slide 103
Slide 103 text
#main {
background-size: 400px 250px;
}
@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);
}
}
If possible, use CSS for now
Slide 104
Slide 104 text
div.dog {
background-image: -webkit-image-set(url(dog.jpg) 1x,
url(dog-hi-res.jpg) 2x);
}
CSS image-set new proposed spec
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
Picture ll User Preference Branch
https://github.com/scottjehl/picturefill/tree/user-prefs
Slide 107
Slide 107 text
Large JPEGs with Low Quality Settings?
http://blog.netvlies.nl/design-interactie/retina-revolution/
Slide 108
Slide 108 text
SOUTH
STREET
ECSSENTIAL
AJAXINCLUDE
https://github.com/filamentgroup/Southstreet
Slide 109
Slide 109 text
http://www.flickr.com/photos/fuzzylittlemanpeach/4633972431/
If I could dream up my
ideal solution…
Slide 110
Slide 110 text
Eights guidelines and one immutable rule
Slide 111
Slide 111 text
Use vector-based images or font
icons whenever you can
#1
Slide 112
Slide 112 text
IcoMoon App Premium Icons Font CDN
Browse 3800+ Free Vector Icons
Import Your Own Vectors to
Make Fonts
Generate Custom & Crisp Icon
Fonts
Generate CSS Sprites with any
size or color
Basic Glyph Editing
1200+ Vector Icons & Counting
Handcrafted on a 16×16 grid
Several Different Formats
Optimized for Icon Fonts
Free Updates
Serve Custom-Built Fonts
Powered by Amazon Web
Services
Easily Update Your Icon Fonts
Production (Cached) Links
Starting at $1.60/Month
IcoMoon
IcoMoon
Custom Built and Crisp Icon Fonts, Done Right
Home App Icon Packs Font CDN Demo Documentation Blog About
Slide 113
Slide 113 text
Topics: announcements css icon design progressive enhancement
Grunticon: A Grunt.js plugin for managing
and delivering sharp icons to all devices
Posted by Scott on 08/31/2012
Note: Grunticon was formerly named Unicon. The name was changed on September 19, 2012.
Creating sharp-looking icons and background images in our client
work has always been more complicated than we want it to be, and
with the growing popularity of higher-definition screens, it's only
getting harder. CSS sprites have traditionally worked alright, but
they can be a pain to manage, are often difficult to use in CSS
layouts, and require generating and serving multiple fixed-pixel
sizes. Icon fonts are a nice too, but they cause problems in some of
the popular mobile environments we need to support, they aren't
What we do What we've done What we're thinking Who we are
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
Encourage people to upload the
highest quality source possible
#2
Slide 116
Slide 116 text
Provide an automatic image
resizing and compression service
#3
Slide 117
Slide 117 text
Images can be resized to any size
with URL parameters
#4
Provides a exible service.
Model on Sencha. De ne height, width or both.
Unique URLs help with caching.
Slide 118
Slide 118 text
“Save for the Web” should be a
thing of the past.
—@adamdbradley
Slide 119
Slide 119 text
Time Saving Content Delivery for the Team
Time Saving Content Delivery for the Team
Dynamically generate images from Photoshop, Illustrator, SVG and high-quality source files. We
make it easier to manage production assets, all while serving files from a fast content delivery
network.
Image Optimization
Image Optimization
Reduce image file sizes
while maintaining quality and
change output formats.
Dynamic Images
Dynamic Images
Resize, crop and encode to
different image formats on-
demand.
API
API
Use our simple API to easily
upload and manage files.
Easily manage images and other static assets
Easily manage images and other static assets
Give each team member individual permission to manage specific
tasks within the system. Easily spread the workload to manage assets.
Sign Up
Sign Up Docs
Docs API
API Account
Account
CDN Connect
CDN Connect beta
Features
Features Projects
Projects
Slide 120
Slide 120 text
Provide automated output of
PictureFill or alternative
#5
Slide 121
Slide 121 text
{
"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
Responsive Images Markup Function
PictureFill
Markup
Sample syntax.
Don’t get hung up
on details.
Markup for all
images can be
changed in one spot.
Slide 122
Slide 122 text
Provide a way to override resized
images for art direction needs
#6
Slide 123
Slide 123 text
Integrate image compression
best practices
#7
jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers
learn from mod_pagespeed or use it
Slide 124
Slide 124 text
Bonus: Detect support for WebP
image format and use it
#8
e average WebP le size is 25% - 34% smaller
compared to JPEG le size.
WebP compresses 34% better than libpng, and 26%
better than pngout for loseless images.
Slide 125
Slide 125 text
Plan for the fact that it will be
deprecated. Make it easy to change.
e only rule for your responsive
images implementation.
#!
Slide 126
Slide 126 text
It’s two years later. Let’s revisit the
my original question.
Slide 127
Slide 127 text
Can a one size ts all solution…
http://www.flickr.com/photos/theyoungthousands/4025421438
Slide 128
Slide 128 text
compete with
a tailored experience?
http://www.flickr.com/photos/fronx/2862975043
Slide 129
Slide 129 text
Or will we always
end up with
something that is
too big?
http://www.flickr.com/photos/haddadi/5971508861
Slide 130
Slide 130 text
Unlikely responsive
design will ever be as fast
as something crafted
speci cally for a device.
http://www.flickr.com/photos/quarenta/3256329577
Slide 131
Slide 131 text
But web design is a
balancing act.
http://www.flickr.com/photos/kalexanderson/6266452817
Slide 132
Slide 132 text
And performance
is just one factor.
Slide 133
Slide 133 text
Flickr: Uploaded February 11, 2007 by hawridger
For most projects,
responsive design can be fast
enough to make sense…
Slide 134
Slide 134 text
if we do the extra work
to make mobile rst
responsive designs.
Slide 135
Slide 135 text
Jason Grigsby • @grigs
[email protected]
Slides:
http://bit.ly/grigs-2013-04-07
ank You!
Special thanks to Scott Jehl, Mat Marquis, and
everyone at the Filament Group, Jennifer
Robbins, Sara Wachter-Boettcher,
Guy Podjarny, and all of the Flickr users sharing
under creative commons.
http://www.flickr.com/photos/sualk61/4083223760/