Mobile First Responsive Web Design — BD Conf Oct 2013

Mobile First
Responsive Design
Jason Grigsby • @grigs • cloudfour.com

Follow along at @grigs_talks

http://bit.ly/grigs-2013-10-21

The web has always been a balancing act…

p://www.ﬂickr.com/photos/classblog/5136926303

with many competing priorities.

http://www.ﬂickr.com/photos/tudor/4324056624/

Finding that balance is more diﬃcult…

http://www.ﬂickr.com/photos/superfantastic/50088733/

as device diversity increases.
http://www.ﬂickr.com/photos/lyza/7382235106

Responsive web design oﬀers us

for a sensible way to deal with device diversity.
http://www.ﬂickr.com/photos/darrentunnicliff/4232232092/

And yet the one question I frequently ask myself is…

Can a one size fits all solution…

http://www.ﬂickr.com/photos/sldghmmr/6041481069

compete with a
tailored experience?
http://www.ﬂickr.com/photos/helloturkeytoe/4932748746/

Important question from many perspectives:
Search engine optimization
Context
Advertising
Performance

People demand fast web sites.

http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf

Slow sites mean real dollars are lost.
Privacy and cookie policy

Log In

Subscribe

Subscribe

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 »

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/

Mobile users don’t care that their network is slow.

http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071

Many ways to navigate desktop web sites on mobile.

Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071

There are no gestures that
can make a web site faster.

http://www.ﬂickr.com/photos/stephenjohnbryde/384095768/

http://www.ﬂickr.com/photos/nathaninsandiego/4829858186/

http://www.ﬂickr.com/photos/wesbrowning/5316400258/

BBG: Before Boston Globe

http://www.ﬂickr.com/photos/69797234@N06/7203485148/

Original Resized K Saved % Saved


34.7K

8.1K

26.6K 76.6%

43.4K

8.2K

35.2K 81.1%

39.0K

8.4K

30.6K 78.4%

26.0K

6.6K

19.4K 74.6%

30.5K

6.7K

23.8K 78.0%

34.7K

7.8K

26.9K 77.5%



34.7K

43.4K

8.1K

26.6K 76.6%

8.2K

35.2K 81.1%

39.0K

8.4K

30.6K 78.4%

26.0K

6.6K

19.4K 74.6%

Total 208.3K 45.8K 162.5K 78.0%
30.5K

6.7K

23.8K 78.0%

34.7K

7.8K

26.9K 77.5%

The resounding answer from the community:

Mobile First Responsive Web Design

Mobile First Responsive Web Design

http://bradfrostweb.com/blog/web/mobile-ﬁrst-responsive-web-design/

“Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”

“Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
Famous last words.

Where are the Mobile First RWDs?
106 sites from mediaqueri.es tested

4%

9%
25%

21%
4%

38%

Mobile is Larger
Same Size
Less than 10% Savings
11 to 50% Savings
51% to 100% Savings
Greater than 100% Savings

http://blog.cloudfour.com/where-are-the-mobile-ﬁrst-responsive-web-designs/

Guy Podjarny repeated the experiment
2013: 476 sites from mediaqueri.es tested

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/

http://www.ﬂickr.com/photos/beautyredeﬁned/2643858323/

http://www.ﬂickr.com/photos/puuikibeach/3654517679

Most responsive web designs are…

Time to pen another fool’s gold post?
http://www.ﬂickr.com/photos/myklroventine/3400040943/

“

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

5

key techniques
for responsible
responsive design

#1

Build Mobile First
Responsive Designs

http://www.ﬂickr.com/photos/auyongcheemeng/95769332/

Diﬀerent
than Mobile
First Design
Theory

http://www.ﬂickr.com/photos/localcelebrity/4831362933/

Mobile First Responsive Web Design is a
technical approach for responsive designs.

http://bradfrostweb.com/blog/web/mobile-ﬁrst-responsive-web-design/

http://www.ﬂickr.com/photos/gumption/3639682201/

http://www.businessinsider.com/survey-mobile-ﬁrst-bad-strategy-2012-12

Luke’s Take on Mobile First
Growth

= Opportunity

Constraints

= Focus

Capabilities

= Innovation

http://www.lukew.com/ff/entry.asp?933

How do I make this responsive?

http://www.ﬂickr.com/photos/ancphotos_/6728574731

Ok, let’s start from a clean slate

http://www.ﬂickr.com/photos/salendron/5569020488/

What would the mobile version look like?

How does that map to desktop design?

Can this desktop version be better using what
we’ve learned from the mobile version?

Mobile
First
This is why Mobile First thinking is so powerful even on
projects that are currently implemented on the desktop.

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 the mobile media query block
Mov
ry.
above the desktop media quesure
By doing this, we’re making S is
the cascading effect of CSfirst
consistent with our mobile oach.
progressive enhancement appr

Keep basic styles outside of media queries.

“

The absence of support for media queries
is in fact the first media query.
—Bryan Rieger, Yiibu

IE8 and below don’t
support media queries.

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

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)">


The conditional comment repeats the line above it
ensuring desktop IE sees our layout.css file.

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)">


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)

#2
Keep CSS
images in
their place
http://www.ﬂickr.com/photos/lintmachine/2306383943/

Images with display:none are still downloaded

[Other CSS rules are here]
.header {display:none;}
}

ing it
aps.jpg file is 440.7K mak
The t
the largest file on the page.

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

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;

}
}

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;

}
}


Image override with a media query
<div
id="test4"></div>
#test4
{

test4-‐desktop.png');

width:200px;

height:75px;
}
@media
all
and
(max-‐width:
600px)
{

#test4
{

test4-‐mobile.png');

}
}


#3

Conditionally load JS based on
screen size and capabilities

http://www.ﬂickr.com/photos/lyza/7382255242/

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

.
.
.

re many more rules
There a
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.

In JS, use matchMedia() or a polyfill for it to test a media query

https://github.com/paulirish/matchMedia.js

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/ﬁlamentgroup/Ajax-Include-Pattern/

#4

Deliver different size <IMG>s
at different screen sizes

http://www.flickr.com/photos/kk/230544325/

One SRC to rule all images
n
r labels on the Og
There are 16 bee at use an img ta
h
Tap Now page tr the Bensons Bubbler.
like this one fo

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">

https://www.ﬂickr.com/photos/whitehouse/8491445521

Resolution Switching
Includes high-density (retina) images.

https://www.ﬂickr.com/photos/whitehouse/8491445521

http://www.ﬂickr.com/photos/barackobamadotcom/5795228030/

Art direction

http://www.ﬂickr.com/photos/barackobamadotcom/5795228030/

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

Things are still moving forward on a standardsbased approach for responsive images.

http://www.ﬂickr.com/photos/johnlamb/2576062549/

New proposed standards

<picture>

srcset
Too early to use any of them

src-n

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"
400px)"></div>

<div
data-‐src="large.jpg"
800px)"></div>

<div
data-‐src="extralarge.jpg"
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/pictureﬁll

#5

Handle high-density
images carefully

A single image on multiple screens

Image Resolution
2000000

1818x1024
1861632

1500000

1000000

960x541
519360

500000
320x181
57920

0

Blackberry Curve

909x512

iPhone Retina

Macbook

465408

480x271
130080

iPhone

Macbook Retina

Image Resolution
2000000

1818x1024
1861632

er
g

1500000

4%
1

ig
b

,2
3

1000000

960x541
519360

500000
320x181
57920

0

Blackberry Curve

909x512

iPhone Retina

Macbook

465408

480x271
130080

iPhone

Macbook Retina

JPEG Compressed (k)
200
172

150

100
80
63

50
22
12

0

Blackberry Curve

iPhone

iPhone Retina

Macbook

Macbook Retina

JPEG Compressed (k)
200
172

150

er
g

3%
43
1,

100

ig
b

80
63

50
22
12

0

Blackberry Curve

iPhone

iPhone Retina

Macbook

Macbook Retina

Downloads both standard and retina images

Apple.com as an
anti-pattern
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/

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);
}
}

Picturefill User Preference Branch

https://github.com/scottjehl/pictureﬁll/tree/user-prefs

Compressive images?

http://blog.netvlies.nl/design-interactie/retina-revolution/

How do you provide the right video codec?

http://www.longtailvideo.com/html5/

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

How do you maintain the aspect ratio?
• 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.

How do you send right resolution and bitrate?

How do you send right resolution and bitrate?

http://www.longtailvideo.com/html5/

You will need a video streaming service.

Why spend so much time on images?

Images are 61% of the average page

Source: httparchive.org

If I could dream up my ideal
solution for images…

http://www.ﬂickr.com/photos/fuzzylittlemanpeach/4633972431/

Eights guidelines and one immutable rule

#1

Use vector-based images or
font icons whenever you can

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
Fonts
Generate CSS Sprites with any
size or color
Basic Glyph Editing

Several Different Formats
Optimized for Icon Fonts
Free Updates

Easily Update Your Icon Fonts
Production (Cached) Links
Starting at $1.60/Month

Grumpicon.com based on Grunticon

What Is This

Issues?
/'
//
. //
|//7
/' "
.
. .
| (

_ _ - -_
| '._ '
__ _/
'-'

_ __
// _/

|
|
||
|
/
/ |

/
|VV
||--__________/-||-/|
|| ||
|| ||
{ } { }
{ }{ }

Drag & Drop ur SVGs on the Grumpicon plz.

#2

Encourage people to upload the
highest quality source possible

#3

Provide an automatic image
resizing and compression service

#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"
/>

“

“Save for the Web” should be a thing of the past.
—@adamdbradley

#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"
400px)"></div>

<div
data-‐src="large.jpg"
800px)"></div>

<div
data-‐src="extralarge.jpg"
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>

Responsive Images Markup Function
templates contain breakpoint information
{
"source":"/source.jpg",
"breakpoints":
[
{
"max-‐width":"30em","pixel-‐density":1,"width":360px},

{
{
{
{
"pixel-‐density":1,"width":800px},
{
"pixel-‐density":2,"width":1600px},
]
}
Sample s
yntax. Do
n’t
get hung
up on
details.

Responsive Images Markup Function

PictureFill
Markup

Markup f
or all ima
ges
can be ch
anged in o
ne
spot.

#6

Provide a way to override resized
images for art direction needs

#7

Integrate image compression
best practices
jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers

learn from mod_pagespeed or use it

#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.

#!

The only rule for your responsive
images implementation.

#!

The only rule for your responsive
images implementation.

Plan for the fact that it will be
deprecated. Make it easy to change.

It’s three years later. Let’s revisit
the my original question.

Can a one size fits all solution…

http://www.ﬂickr.com/photos/theyoungthousands/4025421438

compete with
a tailored experience?
http://www.ﬂickr.com/photos/fronx/2862975043

http://www.flickr.com/photos/haddadi/5971508861

Or will it always be TOO BIG?

Unlikely responsive design will
ever be as fast as something
crafted specifically for a device.

http://www.ﬂickr.com/photos/quarenta/3256329577

But web
design is a
balancing
act.
http://www.ﬂickr.com/photos/kalexanderson/6266452817

And performance
is just one factor.

For most projects, responsive design
can be fast enough to make sense…

Flickr: Uploaded February 11, 2007 by hawridger

if we do the extra work
to make mobile first
responsive designs.

Thank You!
Special thanks to Scott Jehl, Guy Podjarny, and all of the Flickr users sharing under creative commons.

Mobile First Responsive Web Design — BD Conf Oct 2013

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie Mobile First Responsive Web Design — BD Conf Oct 2013

Ähnlich wie Mobile First Responsive Web Design — BD Conf Oct 2013 (20)

Mehr von Jason Grigsby

Mehr von Jason Grigsby (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Mobile First Responsive Web Design — BD Conf Oct 2013