Slide 1
Slide 1 text
Mobile First
Responsive Design
Jason Grigsby • @grigs • cloudfour.com
Slide 2
Slide 2 text
Follow along at @grigs_talks
http://bit.ly/grigs-respond2014
Slide 3
Slide 3 text
The web has always been a balancing act…
p://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
http://www.flickr.com/photos/lyza/7382235106
as device diversity increases.
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 fits 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
Context
Advertising
Performance
Important question from many perspectives:
Search engine optimization
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
PERFORMANCE
Slide 14
Slide 14 text
http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
People demand fast web sites.
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
slow loading websites are losing businesses up to £1.73bn a year.
Privacy and cookie policy
Home / Blog
Subscribe Reports Training Events Jobs Blog More Browse by topic
Like 14 Share
Share 20
Slow sites mean real dollars are lost.
Slide 16
Slide 16 text
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/
Slide 17
Slide 17 text
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that their network is slow.
Slide 18
Slide 18 text
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Slide 19
Slide 19 text
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Many ways to navigate desktop web sites on mobile.
Slide 20
Slide 20 text
http://www.flickr.com/photos/stephenjohnbryde/384095768/
There are no gestures that
can make a web site faster.
Slide 21
Slide 21 text
http://www.flickr.com/photos/nathaninsandiego/4829858186/
Slide 22
Slide 22 text
http://www.flickr.com/photos/wesbrowning/5316400258/
Slide 23
Slide 23 text
http://www.flickr.com/photos/69797234@N06/7203485148/
BBG: Before Boston Globe
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
No content
Slide 29
Slide 29 text
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78.0%
Original Resized K Saved % Saved
43.4K 8.2K 35.2K 81.1%
26.0K 6.6K 19.4K 74.6%
34.7K 7.8K 26.9K 77.5%
Original Resized K Saved % Saved
Slide 30
Slide 30 text
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78.0%
Original Resized K Saved % Saved
43.4K 8.2K 35.2K 81.1%
26.0K 6.6K 19.4K 74.6%
34.7K 7.8K 26.9K 77.5%
Original Resized K Saved % Saved
Slide 31
Slide 31 text
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78.0%
Original Resized K Saved % Saved
43.4K 8.2K 35.2K 81.1%
26.0K 6.6K 19.4K 74.6%
34.7K 7.8K 26.9K 77.5%
Original Resized K Saved % Saved
Original Resized K Saved % Saved
Total 208.3K 45.8K 162.5K 78.0%
Slide 32
Slide 32 text
The resounding answer from the community:
Mobile First Responsive Web Design
Slide 33
Slide 33 text
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design
Slide 34
Slide 34 text
“Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
Slide 35
Slide 35 text
“Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
Famous last words.
Slide 36
Slide 36 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 37
Slide 37 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 38
Slide 38 text
http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
http://www.flickr.com/photos/beautyredefined/2643858323/
Slide 44
Slide 44 text
http://www.flickr.com/photos/puuikibeach/3654517679
Slide 45
Slide 45 text
Most responsive web designs are…
Slide 46
Slide 46 text
http://www.flickr.com/photos/myklroventine/3400040943/
Time to pen another fool’s gold post?
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
5key techniques
for responsible
responsive design
Slide 51
Slide 51 text
http://www.flickr.com/photos/auyongcheemeng/95769332/
#1 Build Mobile First
Responsive Designs
Slide 52
Slide 52 text
http://www.flickr.com/photos/localcelebrity/4831362933/
Different
than Mobile
First Design
Theory
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Mobile First
Design Principles
Slide 55
Slide 55 text
Mobile First
Design Principles
Mobile First
Responsive Design
Slide 56
Slide 56 text
Mobile First
Design Principles
Mobile First
Responsive Design
* FIRST
Content First
Structure First
Performance First
API First
Command Line First
Slide 57
Slide 57 text
Mobile First
Design Principles
Mobile First
Responsive Design
* FIRST
Content First
Structure First
Performance First
API First
Command Line First
Coffee First
Slide 58
Slide 58 text
http://www.flickr.com/photos/gumption/3639682201/
Slide 59
Slide 59 text
But we’ve already got a desktop
design and we can’t start over.
Slide 60
Slide 60 text
How do I make this responsive?
Slide 61
Slide 61 text
How do I make this responsive?
Slide 62
Slide 62 text
How do I make this responsive?
Slide 63
Slide 63 text
http://www.flickr.com/photos/ancphotos_/6728574731
Slide 64
Slide 64 text
Ok, let’s start from a clean slate
http://www.flickr.com/photos/salendron/5569020488/
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
What would the mobile version look like?
Slide 67
Slide 67 text
What would the mobile version look like?
Slide 68
Slide 68 text
What would the mobile version look like?
Slide 69
Slide 69 text
How does that map to desktop design?
Slide 70
Slide 70 text
How does that map to desktop design?
Slide 71
Slide 71 text
How does that map to desktop design?
Slide 72
Slide 72 text
How does that map to desktop design?
Slide 73
Slide 73 text
How does that map to desktop design?
Slide 74
Slide 74 text
How does that map to desktop design?
Slide 75
Slide 75 text
How does that map to desktop design?
Slide 76
Slide 76 text
How does that map to desktop design?
Slide 77
Slide 77 text
How does that map to desktop design?
Slide 78
Slide 78 text
How does that map to desktop design?
Slide 79
Slide 79 text
How does that map to desktop design?
Slide 80
Slide 80 text
How does that map to desktop design?
Slide 81
Slide 81 text
How does that map to desktop design?
Slide 82
Slide 82 text
How does that map to desktop design?
Slide 83
Slide 83 text
Can this desktop version be better using what
we’ve learned from the mobile version?
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
This is why Mobile First thinking is so
powerful even on existing projects.
Slide 86
Slide 86 text
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design is a
technical approach for responsive designs.
Slide 87
Slide 87 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 88
Slide 88 text
No content
Slide 89
Slide 89 text
The absence of support for media queries
is in fact the first media query.
—Bryan Rieger, Yiibu
“
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
IE8 and below don’t
support media queries.
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
Desktop First Responsive Web
Design = Desktop Fallback
Mobile First Responsive Web
Design = Mobile Fallback
What do you see if your browser
doesn’t support media queries?
Slide 95
Slide 95 text
The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.
IE conditional comments
Slide 96
Slide 96 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 polyfill for IE)
Slide 97
Slide 97 text
http://www.flickr.com/photos/lintmachine/2306383943/
#2
Keep CSS
images in
their place
Slide 98
Slide 98 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 99
Slide 99 text
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Slide 100
Slide 100 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 101
Slide 101 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 102
Slide 102 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 103
Slide 103 text
http://www.flickr.com/photos/lyza/7382255242/
#3 Conditionally load JS based on
screen size and capabilities
Slide 104
Slide 104 text
@media screen and (max-width:480px) {
.
.
.
#map {display:none;}
}
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.
Extremely long URL abbreviated
This single iframe causes 47 files to be downloaded!
Slide 105
Slide 105 text
https://github.com/paulirish/matchMedia.js
In JS, use matchMedia() or a polyfill for it to test a media query
Slide 106
Slide 106 text
Latest
Articles
AJAX Include Pattern
https://github.com/filamentgroup/Ajax-Include-Pattern/
Use AJAX to bring more content into the page as the viewport width gets bigger
Slide 107
Slide 107 text
Behavioral Breakpoints
Slide 108
Slide 108 text
http://www.flickr.com/photos/kk/230544325/
#4 Deliver different size ![]()
s
at different screen sizes
Slide 109
Slide 109 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 110
Slide 110 text
Two most common use cases
Slide 111
Slide 111 text
https://www.flickr.com/photos/whitehouse/8491445521
Slide 112
Slide 112 text
https://www.flickr.com/photos/whitehouse/8491445521
Resolution Switching
Includes high-density (retina) images.
Slide 113
Slide 113 text
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Slide 114
Slide 114 text
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Slide 115
Slide 115 text
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
Slide 116
Slide 116 text
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
Slide 117
Slide 117 text
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
Slide 118
Slide 118 text
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
Slide 119
Slide 119 text
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
Slide 120
Slide 120 text
Not simply cropping
Slide 121
Slide 121 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 122
Slide 122 text
No good solutions
Slide 123
Slide 123 text
Things are still moving forward on a standards-
based approach for responsive images.
http://www.flickr.com/photos/johnlamb/2576062549/
Slide 124
Slide 124 text
New proposed standards
srcset src-n
Too early to use any of them
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
Slide 127
Slide 127 text
#5 Handle high-density
images carefully
Slide 128
Slide 128 text
A single image on multiple screens
Slide 129
Slide 129 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 130
Slide 130 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 131
Slide 131 text
@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 132
Slide 132 text
No content
Slide 133
Slide 133 text
Picturefill User Preference Branch
https://github.com/scottjehl/picturefill/tree/user-prefs
Slide 134
Slide 134 text
Compressive images?
http://blog.netvlies.nl/design-interactie/retina-revolution/
Slide 135
Slide 135 text
http://www.flickr.com/photos/fuzzylittlemanpeach/4633972431/
If I could dream up my ideal
solution for images…
Slide 136
Slide 136 text
Eights guidelines and one immutable rule
Slide 137
Slide 137 text
#1 Use vector-based images or
font icons whenever you can
Slide 138
Slide 138 text
Topics: accessibility css icon design javascript
Bulletproof Accessible Icon Fonts
Posted by Zach on 01/13/2014
Care must be taken when implementing icon fonts to ensure a great
experience for all users. What happens when your font doesn’t
load? What happens when @font-face isn’t supported in the
browser? We’ll show you how to implement bulletproof font icons.
In our never-ending quest to build sites more efficiently and effectively for our
clients, the lowly font has been proposed many times as an option to easily
implement vector icons. While we typically prefer (and recommend) using
SVG for vector icons for some of the reasons Ian Feather of Lonelyplanet.com
has documented in his blog post, we sometimes collaborate with other teams
who have already implemented icon fonts. For those cases we decided to
research how to best implement icon fonts in a universally accessible way.
What we do What we've done What we're thinking Who we are
Slide 139
Slide 139 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 140
Slide 140 text
/'
//
. //
|\//7
/' " \
.
| ( \
_ _ - -_ | '._ '
_ __ _- \_ _/ \'-'
// \\_/
\\ | |
|| | /
/ | \ /
|VV ||--\__________/-||-/|
|| || || ||
{ } { } { }{ }
. .
Drag & Drop ur SVGs on the Grumpicon plz.
What Is This Issues?
Grumpicon.com based on Grunticon
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
#2 Encourage people to upload the
highest quality source possible
Slide 143
Slide 143 text
#3 Provide an automatic image
resizing and compression service
Slide 144
Slide 144 text
Example from Sencha IO SRC. Define height, width or both.
#4 Images can be resized to any
size with URL parameters
#4 Images can be resized to any
size with URL parameters
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
“Save for the Web” should be a thing of the past.
—@adamdbradley
“
Slide 147
Slide 147 text
Slide 148
Slide 148 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 149
Slide 149 text
#6 Provide a way to override resized
images for art direction needs
Slide 150
Slide 150 text
jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers
learn from mod_pagespeed or use it
#7 Integrate image compression
best practices
Slide 151
Slide 151 text
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.
#8 Bonus: Detect support for WebP
image format and use it
Slide 152
Slide 152 text
#! The only rule for your responsive
images implementation.
Slide 153
Slide 153 text
Plan for the fact that it will be
deprecated. Make it easy to change.
#! The only rule for your responsive
images implementation.
Slide 154
Slide 154 text
It’s three years later. Let’s revisit
the my original question.
Slide 155
Slide 155 text
Can a one size fits all solution…
http://www.flickr.com/photos/theyoungthousands/4025421438
Slide 156
Slide 156 text
compete with
a tailored experience?
http://www.flickr.com/photos/fronx/2862975043
Slide 157
Slide 157 text
http://www.flickr.com/photos/haddadi/5971508861
Or will it always be TOO BIG?
Slide 158
Slide 158 text
Unlikely responsive design will
ever be as fast as something
crafted specifically for a device.
http://www.flickr.com/photos/quarenta/3256329577
Slide 159
Slide 159 text
But web
design is a
balancing
act.
http://www.flickr.com/photos/kalexanderson/6266452817
Slide 160
Slide 160 text
And performance
is just one factor.
Slide 161
Slide 161 text
Flickr: Uploaded February 11, 2007 by hawridger
For most projects, responsive design
can be fast enough to make sense…
Slide 162
Slide 162 text
if we do the extra work
to make mobile first
responsive designs.
Slide 163
Slide 163 text
Thank You!
Special thanks to Scott Jehl, Guy Podjarny, and all of the Flickr users sharing under creative commons.