Mobile First Responsive Web Design — BD Conf Oct 2013
-
Upload
jason-grigsby -
Category
Technology
-
view
105 -
download
1
description
Transcript of Mobile First Responsive Web Design — BD Conf Oct 2013
![Page 1: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/1.jpg)
Mobile First Responsive Design
Jason Grigsby • @grigs • cloudfour.com
![Page 2: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/2.jpg)
Follow along at @grigs_talks
http://bit.ly/grigs-2013-10-21
![Page 3: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/3.jpg)
The web has always been a balancing act…
http://www.flickr.com/photos/classblog/5136926303
![Page 4: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/4.jpg)
with many competing priorities.
http://www.flickr.com/photos/tudor/4324056624/
![Page 5: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/5.jpg)
Finding that balance is more difficult…
http://www.flickr.com/photos/superfantastic/50088733/
![Page 6: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/6.jpg)
http://www.flickr.com/photos/lyza/7382235106
as device diversity increases.
![Page 7: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/7.jpg)
http://www.flickr.com/photos/darrentunnicliff/4232232092/
Responsive web design offers us
for a sensible way to deal with device diversity.
![Page 8: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/8.jpg)
And yet the one question I frequently ask myself is…
![Page 9: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/9.jpg)
Can a one size #ts all solution…
http://www.flickr.com/photos/sldghmmr/6041481069
![Page 10: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/10.jpg)
compete with a tailored experience?http://www.flickr.com/photos/helloturkeytoe/4932748746/
![Page 11: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/11.jpg)
Context
Advertising
Performance
Important question from many perspectives:
Search engine optimization
![Page 12: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/12.jpg)
![Page 13: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/13.jpg)
PERFORMANCE
![Page 14: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/14.jpg)
http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
People demand fast web sites.
![Page 15: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/15.jpg)
Log 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
Slow sites mean real dollars are lost.
![Page 16: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/16.jpg)
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 17: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/17.jpg)
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that their network is slow.
![Page 18: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/18.jpg)
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
![Page 19: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/19.jpg)
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Many ways to navigate desktop web sites on mobile.
![Page 20: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/20.jpg)
http://www.flickr.com/photos/stephenjohnbryde/384095768/
There are no gestures that can make a web site faster.
![Page 21: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/21.jpg)
http://www.flickr.com/photos/nathaninsandiego/4829858186/
![Page 22: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/22.jpg)
http://www.flickr.com/photos/wesbrowning/5316400258/
![Page 23: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/23.jpg)
http://www.flickr.com/photos/69797234@N06/7203485148/
BBG: Before Boston Globe
![Page 24: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/24.jpg)
![Page 25: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/25.jpg)
![Page 26: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/26.jpg)
![Page 27: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/27.jpg)
![Page 28: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/28.jpg)
![Page 29: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/29.jpg)
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
![Page 30: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/30.jpg)
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
![Page 31: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/31.jpg)
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%
![Page 32: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/32.jpg)
The resounding answer from the community:
Mobile First Responsive Web Design
![Page 33: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/33.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design
![Page 34: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/34.jpg)
“Awesome. We’ll devote a chapter to
Mobile First Responsive Web
Design in our book.”
![Page 35: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/35.jpg)
“Awesome. We’ll devote a chapter to
Mobile First Responsive Web
Design in our book.”
Famous last words.
![Page 36: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/36.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 37: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/37.jpg)
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Guy Podjarny repeated the experiment 2013: 476 sites from mediaqueri.es tested
![Page 38: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/38.jpg)
http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
![Page 39: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/39.jpg)
![Page 40: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/40.jpg)
![Page 41: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/41.jpg)
![Page 42: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/42.jpg)
![Page 43: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/43.jpg)
http://www.flickr.com/photos/beautyredefined/2643858323/
![Page 44: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/44.jpg)
http://www.flickr.com/photos/puuikibeach/3654517679
![Page 45: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/45.jpg)
Most responsive web designs are…
![Page 46: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/46.jpg)
http://www.flickr.com/photos/myklroventine/3400040943/
Time to pen another fool’s gold post?
![Page 47: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/47.jpg)
![Page 48: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/48.jpg)
![Page 49: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/49.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 50: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/50.jpg)
5 key techniques for responsible responsive design
![Page 51: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/51.jpg)
http://www.flickr.com/photos/auyongcheemeng/95769332/
#1 Build Mobile First Responsive Designs
![Page 52: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/52.jpg)
http://www.flickr.com/photos/localcelebrity/4831362933/
Different than Mobile First Design Theory
![Page 53: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/53.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design is a technical approach for responsive designs.
![Page 54: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/54.jpg)
http://www.flickr.com/photos/gumption/3639682201/
![Page 55: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/55.jpg)
http://www.businessinsider.com/survey-mobile-first-bad-strategy-2012-12
![Page 56: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/56.jpg)
Growth
Constraints
Capabilities
Opportunity
Focus
Innovation
=
=
=
Luke’s Take on Mobile First
http://www.lukew.com/ff/entry.asp?933
![Page 57: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/57.jpg)
How do I make this responsive?
![Page 58: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/58.jpg)
How do I make this responsive?
![Page 59: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/59.jpg)
How do I make this responsive?
![Page 60: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/60.jpg)
http://www.flickr.com/photos/ancphotos_/6728574731
![Page 61: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/61.jpg)
Ok, let’s start from a clean slate
http://www.flickr.com/photos/salendron/5569020488/
![Page 62: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/62.jpg)
![Page 63: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/63.jpg)
What would the mobile version look like?
![Page 64: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/64.jpg)
What would the mobile version look like?
![Page 65: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/65.jpg)
What would the mobile version look like?
![Page 66: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/66.jpg)
How does that map to desktop design?
![Page 67: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/67.jpg)
How does that map to desktop design?
![Page 68: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/68.jpg)
How does that map to desktop design?
![Page 69: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/69.jpg)
How does that map to desktop design?
![Page 70: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/70.jpg)
How does that map to desktop design?
![Page 71: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/71.jpg)
How does that map to desktop design?
![Page 72: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/72.jpg)
How does that map to desktop design?
![Page 73: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/73.jpg)
How does that map to desktop design?
![Page 74: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/74.jpg)
How does that map to desktop design?
![Page 75: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/75.jpg)
How does that map to desktop design?
![Page 76: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/76.jpg)
How does that map to desktop design?
![Page 77: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/77.jpg)
How does that map to desktop design?
![Page 78: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/78.jpg)
How does that map to desktop design?
![Page 79: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/79.jpg)
How does that map to desktop design?
![Page 80: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/80.jpg)
Can this desktop version be better using what we’ve learned from the mobile version?
![Page 81: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/81.jpg)
![Page 82: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/82.jpg)
This is why Mobile First thinking is so powerful even on projects that are currently implemented on the desktop.
Mobile First
![Page 83: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/83.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile First Responsive Web Design is a technical approach for responsive designs.
![Page 84: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/84.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.
Reorder media queries so cascade goes from small to large screens
Keep basic styles outside of media queries.
![Page 85: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/85.jpg)
![Page 86: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/86.jpg)
The absence of support for media queries
is in fact the #rst media query.
—Bryan Rieger, Yiibu
“
”
![Page 87: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/87.jpg)
![Page 88: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/88.jpg)
IE8 and below don’t support media queries.
![Page 89: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/89.jpg)
![Page 90: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/90.jpg)
![Page 91: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/91.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 92: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/92.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.
IE conditional comments
![Page 93: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/93.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.
IE conditional comments
or use Respond.js(a media query poly!ll for IE)
![Page 94: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/94.jpg)
http://www.flickr.com/photos/lintmachine/2306383943/
#2 Keep CSS images in their place
![Page 95: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/95.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 96: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/96.jpg)
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
![Page 97: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/97.jpg)
<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; }}
Images scoped within media queries
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
![Page 98: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/98.jpg)
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; }}
display:none on parent element
![Page 99: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/99.jpg)
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'); }}
Image override with a media query
![Page 100: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/100.jpg)
http://www.flickr.com/photos/lyza/7382255242/
#3 Conditionally load JS based on screen size and capabilities
![Page 101: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/101.jpg)
@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.
<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 102: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/102.jpg)
https://github.com/paulirish/matchMedia.js
In JS, use matchMedia() or a poly#ll for it to test a media query
![Page 103: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/103.jpg)
<a href="articles/latest/"
data-‐append="articles/latest/fragment"
data-‐media="(min-‐width: 30em)">
Latest Articles
</a>
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
![Page 104: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/104.jpg)
Behavioral Breakpoints
![Page 105: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/105.jpg)
http://www.flickr.com/photos/kk/230544325/
#4 Deliver different size <IMG>s at different screen sizes
![Page 106: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/106.jpg)
One SRC to rule all images
<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 107: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/107.jpg)
Two most common use cases
![Page 108: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/108.jpg)
https://www.flickr.com/photos/whitehouse/8491445521
![Page 109: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/109.jpg)
https://www.flickr.com/photos/whitehouse/8491445521
Resolution SwitchingIncludes high-density (retina) images.
![Page 110: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/110.jpg)
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 111: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/111.jpg)
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
![Page 112: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/112.jpg)
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
![Page 113: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/113.jpg)
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
![Page 114: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/114.jpg)
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
![Page 115: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/115.jpg)
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
![Page 116: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/116.jpg)
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
![Page 117: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/117.jpg)
Not simply cropping
![Page 118: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/118.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 119: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/119.jpg)
No good solutions
![Page 120: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/120.jpg)
Things are still moving forward on a standards-based approach for responsive images.
http://www.flickr.com/photos/johnlamb/2576062549/
![Page 121: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/121.jpg)
New proposed standards
<picture> srcset src-n
Too early to use any of them
![Page 122: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/122.jpg)
![Page 123: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/123.jpg)
<div data-‐picture data-‐alt="A giant stone face at The Bayon temple in Angkor Thom,
Cambodia">
<div data-‐src="small.jpg"></div>
<div data-‐src="medium.jpg" data-‐media="(min-‐width: 400px)"></div>
<div data-‐src="large.jpg" data-‐media="(min-‐width: 800px)"></div>
<div data-‐src="extralarge.jpg" data-‐media="(min-‐width: 1000px)"></div>
<!-‐-‐ Fallback content for non-‐JS browsers. -‐-‐>
<noscript>
<img src="small.jpg" alt="A giant stone face at The Bayon
temple in Angkor Thom, Cambodia">
</noscript>
</div>
Picture#ll JavaScript Library
https://github.com/scottjehl/picturefill
![Page 124: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/124.jpg)
#5 Handle high-density images carefully
![Page 125: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/125.jpg)
A single image on multiple screens
![Page 126: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/126.jpg)
Image Resolution
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408519360
13008057920
320x181480x271
960x541 909x512
1818x1024
![Page 127: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/127.jpg)
Image Resolution
3,214% bigger
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408519360
13008057920
320x181480x271
960x541 909x512
1818x1024
![Page 128: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/128.jpg)
0
50
100
150
200
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
172
80
63
2212
JPEG Compressed (k)
![Page 129: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/129.jpg)
0
50
100
150
200
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
172
80
63
2212
JPEG Compressed (k)
1,433% bigger
![Page 130: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/130.jpg)
Apple.com as an anti-pattern
Dow
nload
s bo
th s
tand
ard
and
retin
a im
ages
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/
![Page 131: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/131.jpg)
@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
![Page 132: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/132.jpg)
![Page 133: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/133.jpg)
Picture#ll User Preference Branch
https://github.com/scottjehl/picturefill/tree/user-prefs
![Page 134: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/134.jpg)
Compressive images?
http://blog.netvlies.nl/design-interactie/retina-revolution/
![Page 135: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/135.jpg)
Responsive Video
![Page 136: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/136.jpg)
http://www.longtailvideo.com/html5/
How do you provide the right video codec?
![Page 137: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/137.jpg)
<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
Multiple sources with Flash Fallback
![Page 138: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/138.jpg)
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.
![Page 139: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/139.jpg)
![Page 140: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/140.jpg)
![Page 141: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/141.jpg)
How do you send right resolution and bitrate?
![Page 142: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/142.jpg)
http://www.longtailvideo.com/html5/
How do you send right resolution and bitrate?
![Page 143: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/143.jpg)
You will need a video streaming service.
![Page 144: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/144.jpg)
Why spend so much time on images?
![Page 145: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/145.jpg)
Images are 61% of the average page
Source: httparchive.org
![Page 146: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/146.jpg)
http://www.flickr.com/photos/fuzzylittlemanpeach/4633972431/
If I could dream up my ideal solution for images…
![Page 147: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/147.jpg)
Eights guidelines and one immutable rule
![Page 148: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/148.jpg)
#1 Use vector-based images or font icons whenever you can
![Page 149: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/149.jpg)
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 150: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/150.jpg)
/' // . // |\//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
Grumpicon.com based on Grunticon
![Page 151: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/151.jpg)
![Page 152: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/152.jpg)
#2 Encourage people to upload the highest quality source possible
![Page 153: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/153.jpg)
#3 Provide an automatic image resizing and compression service
![Page 154: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/154.jpg)
Example from Sencha IO SRC. De!ne height, width or both.
<img src="http://src.sencha.io/320/http://sencha.com/files/u.jpg" alt="My constrained image"/>
#4 Images can be resized to any size with URL parameters
![Page 155: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/155.jpg)
![Page 156: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/156.jpg)
“Save for the Web” should be a thing of the past.
—@adamdbradley
“
”
![Page 157: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/157.jpg)
<div data-‐picture data-‐alt="A giant stone face at The Bayon temple in Angkor Thom,
Cambodia">
<div data-‐src="small.jpg"></div>
<div data-‐src="medium.jpg" data-‐media="(min-‐width: 400px)"></div>
<div data-‐src="large.jpg" data-‐media="(min-‐width: 800px)"></div>
<div data-‐src="extralarge.jpg" data-‐media="(min-‐width: 1000px)"></div>
<!-‐-‐ Fallback content for non-‐JS browsers. -‐-‐>
<noscript>
<img src="small.jpg" alt="A giant stone face at The Bayon
temple in Angkor Thom, Cambodia">
</noscript>
</div>
#5 Provide automated output of PictureFill or alternative
![Page 158: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/158.jpg)
{"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.
![Page 159: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/159.jpg)
#6 Provide a way to override resized images for art direction needs
![Page 160: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/160.jpg)
jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers
learn from mod_pagespeed or use it
#7 Integrate image compression best practices
![Page 161: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/161.jpg)
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.
#8 Bonus: Detect support for WebP image format and use it
![Page 162: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/162.jpg)
#! The only rule for your responsive images implementation.
![Page 163: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/163.jpg)
Plan for the fact that it will be deprecated. Make it easy to change.
#! The only rule for your responsive images implementation.
![Page 164: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/164.jpg)
It’s three years later. Let’s revisit the my original question.
![Page 165: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/165.jpg)
Can a one size #ts all solution…
http://www.flickr.com/photos/theyoungthousands/4025421438
![Page 166: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/166.jpg)
compete with a tailored experience?http://www.flickr.com/photos/fronx/2862975043
![Page 167: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/167.jpg)
http://www."ickr.com/photos/haddadi/5971508861
Or will it always be TOO BIG?
![Page 168: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/168.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 169: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/169.jpg)
But web design is a balancing act.
http://www.flickr.com/photos/kalexanderson/6266452817
![Page 170: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/170.jpg)
And performance is just one factor.
![Page 171: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/171.jpg)
Flickr: Uploaded February 11, 2007 by hawridger
For most projects, responsive design can be fast enough to make sense…
![Page 172: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/172.jpg)
if we do the extra work to make mobile #rst responsive designs.
![Page 173: Mobile First Responsive Web Design — BD Conf Oct 2013](https://reader033.fdocuments.in/reader033/viewer/2022042814/54c7a8ca4a7959390f8b45aa/html5/thumbnails/173.jpg)
Thank You!Special thanks to Scott Jehl, Guy Podjarny, and all of the Flickr users sharing under creative commons.