when responsive web design meets the real world
DESCRIPTION
TRANSCRIPT
![Page 1: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/1.jpg)
When Responsive Web Design Meets the Real World
![Page 2: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/2.jpg)
Follow me at @grigs http://bit.ly/grigs-akamai-rwd
![Page 3: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/3.jpg)
The web has always been a balancing act.http://www.!ickr.com/photos/classblog/5136926303
![Page 4: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/4.jpg)
With many competing interests.http://www.!ickr.com/photos/tudor/4324056624/
![Page 5: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/5.jpg)
Finding balance is more difficult…
http://www.!ickr.com/photos/superfantastic/50088733/
![Page 6: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/6.jpg)
As device diversity increases.
http://www.!ickr.com/photos/lyza/7382235106
![Page 7: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/7.jpg)
Responsive web
design offers us
for a sensible way to deal
with device diversity.
http://www.!ickr.com/photos/superfantastic/50088733/
http://www.!ickr.com/photos/darrentunnicliff/4232232092/
![Page 8: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/8.jpg)
And yet the one question I frequently ask myself is…http://www.!ickr.com/photos/classblog/5136926303
![Page 9: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/9.jpg)
Can a
http://www.!ickr.com/photos/sldghmmr/6041481069 experience…
![Page 10: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/10.jpg)
compete with a tailored experience?http://www.!ickr.com/photos/adrianclarkmbbs/3062676599/
![Page 11: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/11.jpg)
Important question from
many perspectives:
Search engines
Context
Advertising
Performance
![Page 12: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/12.jpg)
Search engines
![Page 13: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/13.jpg)
Search engines
![Page 14: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/14.jpg)
![Page 15: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/15.jpg)
Until recently, Google recommended separate sites.
![Page 16: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/16.jpg)
![Page 17: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/17.jpg)
![Page 18: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/18.jpg)
![Page 19: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/19.jpg)
![Page 20: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/20.jpg)
![Page 21: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/21.jpg)
![Page 22: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/22.jpg)
![Page 23: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/23.jpg)
http://www.!ickr.com/photos/brunauto/5062644167/
![Page 24: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/24.jpg)
Mobile context?
http://www.!ickr.com/photos/brunauto/5062644167/
![Page 25: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/25.jpg)
http://www.!ickr.com/photos/brunauto/5062644167/
![Page 26: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/26.jpg)
![Page 27: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/27.jpg)
![Page 28: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/28.jpg)
80% during misc downtime
76% while waiting in lines
86% while watching TV
69% for point of sale research
http://www.!ickr.com/photos/carbonnyc/5140154965
![Page 29: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/29.jpg)
http://www.!ickr.com/photos/carbonnyc/5140154965
![Page 30: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/30.jpg)
TMI
![Page 31: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/31.jpg)
TMI
![Page 32: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/32.jpg)
TMI 39% use on toliet!
![Page 33: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/33.jpg)
Advertising
![Page 34: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/34.jpg)
New responsive ad unitsBut advertising is still big problem.
![Page 35: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/35.jpg)
PERFORMANCE
![Page 36: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/36.jpg)
![Page 37: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/37.jpg)
http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
People demand fast web sites Slow sites mean real dollars are lostLog In Subscribe Basket Contact Us i am looking for...
67% of consumers cite slowwebsites as the main cause ofbasket abandonment
Daily Pulse NewsletterGet our free Daily Pulse Newsletter tokeep informed about the latest news andinsights 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 surveyhighlights just how damaging a slow site can be to the userexperience.
The study by Brand Perfect found that two thirds of UKconsumers (67%) cite slow loading times as the main reasonthey would abandon an online purchase.
It’s a topic we’ve looked at in more detail in our post 'Sitespeed: case studies, tips and tools for improving your conversion rate', with stats showing thatslow 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 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/
![Page 38: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/38.jpg)
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
![Page 39: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/39.jpg)
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is slow.
![Page 40: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/40.jpg)
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is slow.
![Page 41: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/41.jpg)
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is slow.
![Page 42: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/42.jpg)
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
![Page 43: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/43.jpg)
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Mobile browsers offer many ways to
navigate desktop web sites.
![Page 44: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/44.jpg)
http://www.flickr.com/photos/stephenjohnbryde/384095768/
![Page 45: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/45.jpg)
http://www.flickr.com/photos/stephenjohnbryde/384095768/There are no gestures that make a web site load faster.
![Page 46: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/46.jpg)
![Page 47: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/47.jpg)
http://www.!ickr.com/photos/nathaninsandiego/4829858186
![Page 48: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/48.jpg)
http://www.flickr.com/photos/wesbrowning/5316400258/
![Page 49: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/49.jpg)
http://www.flickr.com/photos/69797234@N06/7203485148/
![Page 50: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/50.jpg)
BBG Before the Boston Globe
http://www.flickr.com/photos/69797234@N06/7203485148/
![Page 51: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/51.jpg)
![Page 52: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/52.jpg)
![Page 53: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/53.jpg)
CSS Media Query for Mobile is Fool’s Gold“”
![Page 54: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/54.jpg)
CSS Media Query for Mobile is Fool’s Gold“”—Me (oops)
![Page 55: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/55.jpg)
![Page 56: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/56.jpg)
Demo from ALA article
![Page 57: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/57.jpg)
![Page 58: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/58.jpg)
![Page 59: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/59.jpg)
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78%
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
![Page 60: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/60.jpg)
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78%
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
![Page 61: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/61.jpg)
34.7K 8.1K 26.6K 76.6%
39.0K 8.4K 30.6K 78.4%
30.5K 6.7K 23.8K 78%
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%
![Page 62: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/62.jpg)
The resounding answer from the community:
![Page 63: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/63.jpg)
Mobile First Responsive Web DesignThe resounding answer from the community:
![Page 64: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/64.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
![Page 65: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/65.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Graceful degradation Progressive Enhancement
![Page 66: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/66.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Graceful degradation Progressive Enhancement
Desktop First Responsive Web Design Mobile First Responsive Web Design
![Page 67: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/67.jpg)
“Awesome. We’ll devote a chapter to Mobile First Responsive Web Design in our book.”
![Page 68: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/68.jpg)
“Awesome. We’ll devote a chapter to Mobile First Responsive Web Design in our book.”
Famous last words.
![Page 69: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/69.jpg)
9%4%
21%
38%
4%
25% Mobile is LargerSame SizeLess than 10% Savings11 to 50% Savings51% to 100% SavingsGreater 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/
![Page 70: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/70.jpg)
Guy Podjarny repeated the experiment 2013: 476 sites from mediaqueri.es tested
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
![Page 71: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/71.jpg)
http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
![Page 72: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/72.jpg)
![Page 73: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/73.jpg)
![Page 74: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/74.jpg)
![Page 75: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/75.jpg)
![Page 76: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/76.jpg)
Akin to hosting a dinner party on short notice…
http://www.!ickr.com/photos/beautyrede$ned/2643858323/
![Page 77: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/77.jpg)
So you shove all your
junk in the closet.http://www.!ickr.com/photos/puuikibeach/3654517679
![Page 78: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/78.jpg)
Most responsive designs are…
![Page 79: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/79.jpg)
http://www.flickr.com/photos/myklroventine/3400040943/
Time to pen another fool’s gold post?
![Page 80: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/80.jpg)
![Page 81: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/81.jpg)
https://twitter.com/scottjehl/status/243025352069349377
![Page 82: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/82.jpg)
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
![Page 83: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/83.jpg)
5 key techniques for responsible responsive design
![Page 84: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/84.jpg)
http://www.flickr.com/photos/auyongcheemeng/95769332/
Build Mobile First Responsive Designs
#1
![Page 85: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/85.jpg)
Different than Mobile First Design Theory
http://www.flickr.com/photos/localcelebrity/4831362933/
![Page 86: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/86.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
![Page 87: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/87.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Graceful degradation Progressive Enhancement
Mobile First Responsive Web Design is a technical approach for responsive designs.
![Page 88: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/88.jpg)
/* 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.
![Page 89: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/89.jpg)
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.
![Page 90: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/90.jpg)
The absence of support for media queries is in fact the $rst media query.
—Bryan Rieger“
”
![Page 91: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/91.jpg)
![Page 92: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/92.jpg)
IE8 and below don’t support media queries.
![Page 93: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/93.jpg)
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?
![Page 94: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/94.jpg)
<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.
![Page 95: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/95.jpg)
<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 poly!ll for IE)
![Page 96: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/96.jpg)
Keep CSS images in their place#2
![Page 97: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/97.jpg)
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;}
}
![Page 98: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/98.jpg)
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
![Page 99: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/99.jpg)
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
![Page 100: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/100.jpg)
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/
![Page 101: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/101.jpg)
display:none on parent element
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
<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; }}
![Page 102: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/102.jpg)
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'); }}
![Page 103: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/103.jpg)
#3 Conditionally load JS based on screen size and capabilities
http://www.flickr.com/photos/lyza/7382255242/
![Page 104: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/104.jpg)
<iframe id="map" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>
Extremely long URL abbreviatedThis single iframe causes 47 files to be downloaded!
![Page 105: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/105.jpg)
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 abbreviatedThis single iframe causes 47 files to be downloaded!
![Page 106: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/106.jpg)
https://github.com/paulirish/matchMedia.js
In JavaScript, use matchMedia() or a poly$ll for it to test a media query
![Page 107: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/107.jpg)
<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
![Page 108: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/108.jpg)
Behaviorial BreakpointsBetter yet, keep your breakpoints in your CSS and have your JavaScript watch to changes to the DOM triggered by media queries.
![Page 109: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/109.jpg)
Deliver different size <IMG>s at different screen sizes
#4
http://www.flickr.com/photos/kk/230544325/
![Page 110: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/110.jpg)
<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 the screen size, HTML only allows one value for the src.
![Page 111: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/111.jpg)
<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 the screen size, HTML only allows one value for the src.
One SRC to rule all images
![Page 112: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/112.jpg)
Two most common use cases
![Page 113: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/113.jpg)
https://www.flickr.com/photos/whitehouse/8491445521
Resolution SwitchingIncludes high-density (retina) images.
![Page 114: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/114.jpg)
https://www.flickr.com/photos/whitehouse/8491445521
Resolution SwitchingIncludes high-density (retina) images.
![Page 115: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/115.jpg)
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art Direction
![Page 116: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/116.jpg)
Art Direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 117: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/117.jpg)
Art Direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 118: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/118.jpg)
Art Direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 119: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/119.jpg)
Art Direction Not simply cropping
![Page 120: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/120.jpg)
Art Direction Images with text
Sign In Account Get Email Español Shopping Bag
FeaturesNew ArrivalsShow Off TeesBackpacksTech Toys2/$30 & 2/$40 PINK FavoritesSpin the Panty Wheel
TopsAll TopsHoodies & CrewsTees & Tanks
BottomsAll BottomsSweatsShortsYoga
PINK Loves Yoga
Panties5/$26 Styles3/$33 StylesShop by Style
BrasAll BrasBandeaus & Bralettes2/$42 Wear Everywhere BrasBras 101
Swim
Search
![Page 121: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/121.jpg)
No good solutions
![Page 122: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/122.jpg)
New proposed standards
<picture> srcset src-n
![Page 123: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/123.jpg)
Standards process is still moving forward
http://www.flickr.com/photos/johnlamb/2576062549/
![Page 124: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/124.jpg)
Get Involved at Responsiveimages.org
![Page 125: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/125.jpg)
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
![Page 126: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/126.jpg)
Handle high-density (retina) images very carefully
#5
http://www.flickr.com/photos/kk/230544325/
![Page 127: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/127.jpg)
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408519360
13008057920
Single image on multiple screens
320x18480x27
960x54 909x51
1818x10
![Page 128: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/128.jpg)
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408519360
13008057920
Single image on multiple screens
3,214% bigger
320x18480x27
960x54 909x51
1818x10
![Page 129: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/129.jpg)
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.
![Page 130: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/130.jpg)
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);
}
}
![Page 131: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/131.jpg)
Foresight.js
![Page 132: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/132.jpg)
PictureFill User Preference Branch Tap HD/SD to switch image densityhttps://github.com/scottjehl/picturefill/tree/user-prefs
![Page 133: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/133.jpg)
Compressive Images?http://blog.netvlies.nl/design-interactie/retina-revolution/
![Page 134: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/134.jpg)
If I could dream up my ideal solution…
![Page 135: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/135.jpg)
8 guidelines and 1 immutable rule
![Page 136: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/136.jpg)
Use vector-based images or font icons whenever you can#1
![Page 137: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/137.jpg)
IcoMoon.io makes font icons easy
IcoMoon App Premium Icons Font CDN
A Few Testimonials
Browse 3800+ Free Vector Icons
Import Your Own Vectors toMake Fonts
Generate Custom & Crisp IconFonts
Generate CSS Sprites with anysize 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 WebServices
Easily Update Your Icon Fonts
Production (Cached) Links
Starting at $1.60/Month
IcoMoonIcoMoonCustom Built and Crisp Icon Fonts, Done Right
Home App Icon Packs Font CDN Demo Documentation Blog About
![Page 138: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/138.jpg)
Grumpicon.com helps with SVGBased on open source grunticon
/' // . // |\//7 /' " \ . | ( \ _ _ - -_ | '._ ' _ __ _- \_ _/ \'-' // \\_/ \\ | | || | // | \ /|VV ||--\__________/-||-/| || || || || { } { } { }{ }
. .
Drag & Drop ur SVGs on the Grumpicon plz.
What Is This Issues?
With special guest, Eric Pontouniconkey head drawn by R.B.Cleary in 1995
![Page 139: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/139.jpg)
Encourage people to upload the highest quality source possible#2
![Page 140: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/140.jpg)
Provide an automatic image resizing and compression service#3
![Page 141: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/141.jpg)
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"/>
![Page 142: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/142.jpg)
“Save for the Web” should be a thing of the past.
—@adambradley“”
![Page 143: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/143.jpg)
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 up on details.
Markup for all images can be changed in one spot.
![Page 144: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/144.jpg)
Provide a way to override resized images for art direction needs#6
![Page 145: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/145.jpg)
Integrate image compression best practices#7
jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers
![Page 146: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/146.jpg)
Bonus: Detect support for WebP image format and use it#8
The 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.
![Page 147: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/147.jpg)
The only rule for your responsive images implementation:Plan for the fact that it will be deprecated. Make it easy to change.
![Page 148: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/148.jpg)
It’s three years later. Let’s revisit my original question.
![Page 149: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/149.jpg)
http://www.flickr.com/photos/theyoungthousands/4025421438
Can a one-size !ts all solution…
![Page 150: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/150.jpg)
compete with a tailored experience?
http://www.flickr.com/photos/fronx/2862975043
![Page 151: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/151.jpg)
Or will it always be TOO BIG?
http://www.flickr.com/photos/haddadi/5971508861
![Page 152: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/152.jpg)
Unlikely responsive design will ever be as fast as something crafted speci!cally for a device.
http://www.flickr.com/photos/quarenta/3256329577
![Page 153: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/153.jpg)
But web design is a balancing act…
http://www.flickr.com/photos/kalexanderson/6266452817
![Page 154: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/154.jpg)
And performance is just one factor.
![Page 155: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/155.jpg)
For most projects, responsive design will be fast enough…
Flickr: Uploaded February 11, 2007 by hawridger
![Page 156: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/156.jpg)
if we roll up our sleeves and build mobile !rst responsive designs.
![Page 157: When responsive web design meets the real world](https://reader031.vdocuments.us/reader031/viewer/2022013003/54c7bdec4a795906498b4587/html5/thumbnails/157.jpg)
Thank You!
Special thanks to Scott Jehl, Guy Podjarny, and all of the Flickr users sharing under creative commons.