When ResponsiveWeb Design
Meets the RealWorld
Follow me at @grigs http://bit.ly/grigs-akamai-rwd
The web has always been a balancing act.
http://www.flickr.com/photos/classblog/5136926303
With many competing interests.
http://www.flickr.com/photos/tudor/4324056624/
Finding balance is more difficult…
http://www.flickr.com/photos/superfantastic/50088733/
As device diversity increases.
http://www.flickr.com/photos/lyza/7382235106
Responsive web
design offers us
for a sensible way to deal
with device diversity.
http://www.flickr.com/photos/superfantast...
And yet the one question I frequently ask myself is…
http://www.flickr.com/photos/classblog/5136926303
Can a
http://www.flickr.com/photos/sldghmmr/6041481069 experience…
compete with a tailored experience?http://www.flickr.com/photos/adrianclarkmbbs/3062676599/
Important question from
many perspectives:
Search engines
Context
Advertising
Performance
Search engines
Search engines
Until recently, Google recommended separate sites.
http://www.flickr.com/photos/brunauto/5062644167/
Mobile context?
http://www.flickr.com/photos/brunauto/5062644167/
http://www.flickr.com/photos/brunauto/5062644167/
80% during misc downtime
76% while waiting in lines
86% while watchingTV
69% for point of sale research
http://www.flickr....
http://www.flickr.com/photos/carbonnyc/5140154965
TMI
TMI
TMI 39%use
on toliet!
Advertising
New responsive ad units
But advertising is still big problem.
PERFORMANCE
http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
People demand fast web sites Slow sites mean real dolla...
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is s...
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is s...
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is s...
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Mobile browsers offer many ways to
navigate desk...
http://www.flickr.com/photos/stephenjohnbryde/384095768/
http://www.flickr.com/photos/stephenjohnbryde/384095768/
There are no gestures that make a web site load faster.
http://www.flickr.com/photos/nathaninsandiego/4829858186
http://www.flickr.com/photos/wesbrowning/5316400258/
http://www.flickr.com/photos/69797234@N06/7203485148/
BBG Before the Boston Globe
http://www.flickr.com/photos/69797234@N06/7203485148/
CSS Media Query for Mobile is Fool’s Gold“
CSS Media Query for Mobile is Fool’s Gold“ —Me (oops)
Demo from ALA article
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%...
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%...
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%...
The resounding answer from the community:
Mobile First ResponsiveWeb Design
The resounding answer from the community:
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Graceful degradation Progressive Enhancement
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Graceful degradation Progressive Enhancement
Desktop F...
“Awesome.We’ll devote a chapter to Mobile
First ResponsiveWeb Design in our book.”
“Awesome.We’ll devote a chapter to Mobile
First ResponsiveWeb Design in our book.”
Famous last words.
9%
4%
21%
38%
4%
25%
Mobile is Larger
Same Size
Less than 10% Savings
11 to 50% Savings
51% to 100% Savings
Greater than 1...
Guy Podjarny repeated the experiment
2013: 476 sites from mediaqueri.es tested
http://www.guypo.com/uncategorized/real-wor...
http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
Akin to hosting a dinner party on short notice…
http://www.flickr.com/photos/beautyredefined/2643858323/
So you shove all your
junk in the closet.
http://www.flickr.com/photos/puuikibeach/3654517679
Most responsive designs are…
http://www.flickr.com/photos/myklroventine/3400040943/
Time to pen another fool’s gold post?
https://twitter.com/scottjehl/status/243025352069349377
Being Responsive from a layout perspective should not preclude us from being
responsive from a performance and interaction...
5key techniques for responsible
responsive design
http://www.flickr.com/photos/auyongcheemeng/95769332/
Build Mobile First
Responsive Designs
#1
Different than Mobile
First DesignTheory
http://www.flickr.com/photos/localcelebrity/4831362933/
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Graceful degradation Progressive Enhancement
Mobile Fi...
/* Wider viewports/higher resolutions (e.g. desktop) */
@media screen and (min-width:481px) {
[Desktop layout rules here]
...
Reorder media queries so cascade
goes from small to large screens
/* Wider viewports/higher resolutions (e.g. desktop) */
...
The absence of support for media queries is in fact the first media query.
—Bryan Rieger
“
IE8 and below don’t support media queries.
Desktop First ResponsiveWeb Design = Desktop Fallback
Mobile First ResponsiveWeb Design = Mobile Fallback
What do you see ...
<link rel="stylesheet" type="text/css" href="taps.css" />
<link rel="stylesheet" type="text/css" href="layout.css" media="...
<link rel="stylesheet" type="text/css" href="taps.css" />
<link rel="stylesheet" type="text/css" href="layout.css" media="...
Keep CSS images in their place
#2
The taps.jpg file is 440.7K making it
the largest file on the page.
@media screen and (max-width:480px) {
[Other CSS rules...
The taps.jpg file is 440.7K making it
the largest file on the page.
@media screen and (max-width:480px) {
[Other CSS rules...
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Images scoped within
media queries
<div	
  id="test5"></div>
@media	
  all	
  and	
  (min-­‐width:	
  601px)	
  {
	
  	
  ...
display:none on
parent element
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
<div	
  id="test3">
	
 ...
Image override with a
media query
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
<div	
  id="test4"><...
#3 Conditionally load JS
based on screen size
and capabilities
http://www.flickr.com/photos/lyza/7382255242/
<iframe id="map" width="300" height="300" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps...
Hiding content with display:none does not prevent it from downloading.
<iframe id="map" width="300" height="300" framebord...
https://github.com/paulirish/matchMedia.js
In JavaScript, use matchMedia() or a
polyfill for it to test a media query
<a	
  href="articles/latest/"	
  
	
  	
  	
  	
  	
  data-­‐append="articles/latest/fragment"	
  
	
  	
  	
  	
  	
  dat...
Behaviorial Breakpoints
Better yet, keep your breakpoints in your CSS and
have your JavaScript watch to changes to the DOM...
Deliver different size <IMG>s at
different screen sizes
#4
http://www.flickr.com/photos/kk/230544325/
<img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
There are 16 beer labels on the On
Tap Now page that us...
<img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
There are 16 beer labels on the On
Tap Now page that us...
Two most common use cases
https://www.flickr.com/photos/whitehouse/8491445521
Resolution Switching
Includes high-density (retina) images.
https://www.flickr.com/photos/whitehouse/8491445521
Resolution Switching
Includes high-density (retina) images.
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art Direction
Art Direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art Direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art Direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art Direction Not simply cropping
Art Direction Images with text
Sign In Account Get Email Español Shopping Bag
Features
New Arrivals
Show Off Tees
Backpack...
No good solutions
New proposed standards
<picture> srcset src-n
Standards process is still
moving forward
http://www.flickr.com/photos/johnlamb/2576062549/
Get Involved at
Responsiveimages.org
In the meantime, pick a hack.
My fave is PictureFill.
<div	
  data-­‐picture	
  data-­‐alt="A	
  giant	
  stone	
  face	
 ...
Handle high-density (retina)
images very carefully
#5
http://www.flickr.com/photos/kk/230544325/
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408
519360
130080...
0
500000
1000000
1500000
2000000
Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina
1861632
465408
519360
130080...
Apple.com is an anti-pattern.
Downloads both standard and retina.
The total size of the page goes from 502.90K to 2.13MB
w...
If possible, use CSS for now.
@media	
  screen	
  and	
  (-­‐webkit-­‐device-­‐pixel-­‐ratio:	
  1)	
  {	
  /*	
  Image	
 ...
Foresight.js
PictureFill User Preference Branch Tap HD/SD to switch image density
https://github.com/scottjehl/picturefill/tree/user-pre...
Compressive Images?
http://blog.netvlies.nl/design-interactie/retina-revolution/
If I could dream up my
ideal solution…
8 guidelines and 1 immutable rule
Use vector-based images or font
icons whenever you can#1
IcoMoon.io makes font icons easy
IcoMoon App Premium Icons Font CDN
Browse 3800+ Free Vector Icons 1200+ Vector Icons & Co...
Grumpicon.com helps with SVG
Based on open source grunticon
/'
//
. //
|//7
/' " 
.
| ( 
_ _ - -_ | '._ '
_ __ _- _ _/ '-'...
Encourage people to upload the
highest quality source possible#2
Provide an automatic image
resizing and compression service#3
Images can be resized to any
size with URL parameters#4 <img
src="http://src.sencha.io/320/http://sencha.com/files/u.jpg"
...
“Save for theWeb”should be a thing of the past.
—@adambradley“
Provide automated output
of PictureFill or alternative#5
{
"source":"/source.jpg",
"breakpoints":	
  [
{	
  "max-­‐width":...
Provide a way to override resized
images for art direction needs#6
Integrate image compression
best practices#7
jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers
Bonus: Detect support forWebP
image format and use it#8
The averageWebP file size is 25% - 34% smaller
compared to JPEG fi...
The only rule for your responsive images implementation:
Plan for the fact that it will be deprecated. Make it easy to cha...
It’s three years later. Let’s revisit my original question.
http://www.flickr.com/photos/theyoungthousands/4025421438
Can a one-size fits all solution…
compete with a tailored experience?
http://www.flickr.com/photos/fronx/2862975043
Or will it always beTOO BIG?
http://www.flickr.com/photos/haddadi/5971508861
Unlikely responsive design will ever be as fast as
something crafted specifically for a device.
http://www.flickr.com/photo...
But web design is a balancing act…
http://www.flickr.com/photos/kalexanderson/6266452817
And performance is just one factor.
For most projects, responsive design
will be fast enough…
Flickr: Uploaded February 11, 2007 by hawridger
if we roll up our sleeves and build
mobile first responsive designs.
ThankYou!
Special thanks to Scott Jehl, Guy
Podjarny, and all of the Flickr users
sharing under creative commons.
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
When responsive web design meets the real world
Upcoming SlideShare
Loading in...5
×

When responsive web design meets the real world

2,816

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,816
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

When responsive web design meets the real world

  1. 1. When ResponsiveWeb Design Meets the RealWorld
  2. 2. Follow me at @grigs http://bit.ly/grigs-akamai-rwd
  3. 3. The web has always been a balancing act. http://www.flickr.com/photos/classblog/5136926303
  4. 4. With many competing interests. http://www.flickr.com/photos/tudor/4324056624/
  5. 5. Finding balance is more difficult… http://www.flickr.com/photos/superfantastic/50088733/
  6. 6. As device diversity increases. http://www.flickr.com/photos/lyza/7382235106
  7. 7. Responsive web design offers us for a sensible way to deal with device diversity. http://www.flickr.com/photos/superfantastic/50088733/ http://www.flickr.com/photos/darrentunnicliff/4232232092/
  8. 8. And yet the one question I frequently ask myself is… http://www.flickr.com/photos/classblog/5136926303
  9. 9. Can a http://www.flickr.com/photos/sldghmmr/6041481069 experience…
  10. 10. compete with a tailored experience?http://www.flickr.com/photos/adrianclarkmbbs/3062676599/
  11. 11. Important question from many perspectives: Search engines Context Advertising Performance
  12. 12. Search engines
  13. 13. Search engines
  14. 14. Until recently, Google recommended separate sites.
  15. 15. http://www.flickr.com/photos/brunauto/5062644167/
  16. 16. Mobile context? http://www.flickr.com/photos/brunauto/5062644167/
  17. 17. http://www.flickr.com/photos/brunauto/5062644167/
  18. 18. 80% during misc downtime 76% while waiting in lines 86% while watchingTV 69% for point of sale research http://www.flickr.com/photos/carbonnyc/5140154965
  19. 19. http://www.flickr.com/photos/carbonnyc/5140154965
  20. 20. TMI
  21. 21. TMI
  22. 22. TMI 39%use on toliet!
  23. 23. Advertising
  24. 24. New responsive ad units But advertising is still big problem.
  25. 25. PERFORMANCE
  26. 26. http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf People demand fast web sites Slow sites mean real dollars are lost 67% of consumers cite slow websites as the main cause of basket abandonment Daily Pulse Newsletter Get our free Daily Pulse Newsletter to keep informed about the latest news and insights in Digital Marketing. Register for our free Daily Pulse ADVERTISE HERE » by David Moth 06 December 2012 11:40 8 comments Print TweetTweet 236 3 Everyone hates slow loading websites, and a new survey highlights just how damaging a slow site can be to the user experience. The study by Brand Perfect found that two thirds of UK consumers (67%) cite slow loading times as the main reason they would abandon an online purchase. It’s a topic we’ve looked at in more detail in our post 'Site speed: case studies, tips and tools for improving your conversion rate', with stats showing that slow loading websites are losing businesses up to £1.73bn a year. 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/
  27. 27. http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
  28. 28. http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf Mobile users don’t care that their network is slow.
  29. 29. http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf Mobile users don’t care that their network is slow.
  30. 30. http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf Mobile users don’t care that their network is slow.
  31. 31. Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
  32. 32. Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071 Mobile browsers offer many ways to navigate desktop web sites.
  33. 33. http://www.flickr.com/photos/stephenjohnbryde/384095768/
  34. 34. http://www.flickr.com/photos/stephenjohnbryde/384095768/ There are no gestures that make a web site load faster.
  35. 35. http://www.flickr.com/photos/nathaninsandiego/4829858186
  36. 36. http://www.flickr.com/photos/wesbrowning/5316400258/
  37. 37. http://www.flickr.com/photos/69797234@N06/7203485148/
  38. 38. BBG Before the Boston Globe http://www.flickr.com/photos/69797234@N06/7203485148/
  39. 39. CSS Media Query for Mobile is Fool’s Gold“
  40. 40. CSS Media Query for Mobile is Fool’s Gold“ —Me (oops)
  41. 41. Demo from ALA article
  42. 42. 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
  43. 43. 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
  44. 44. 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%
  45. 45. The resounding answer from the community:
  46. 46. Mobile First ResponsiveWeb Design The resounding answer from the community:
  47. 47. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  48. 48. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Graceful degradation Progressive Enhancement
  49. 49. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Graceful degradation Progressive Enhancement Desktop First ResponsiveWeb Design Mobile First ResponsiveWeb Design
  50. 50. “Awesome.We’ll devote a chapter to Mobile First ResponsiveWeb Design in our book.”
  51. 51. “Awesome.We’ll devote a chapter to Mobile First ResponsiveWeb Design in our book.” Famous last words.
  52. 52. 9% 4% 21% 38% 4% 25% Mobile is Larger Same Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% Savings Where are the Mobile First RWDs? 106 sites from mediaqueri.es tested http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
  53. 53. Guy Podjarny repeated the experiment 2013: 476 sites from mediaqueri.es tested http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
  54. 54. http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
  55. 55. Akin to hosting a dinner party on short notice… http://www.flickr.com/photos/beautyredefined/2643858323/
  56. 56. So you shove all your junk in the closet. http://www.flickr.com/photos/puuikibeach/3654517679
  57. 57. Most responsive designs are…
  58. 58. http://www.flickr.com/photos/myklroventine/3400040943/ Time to pen another fool’s gold post?
  59. 59. https://twitter.com/scottjehl/status/243025352069349377
  60. 60. 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
  61. 61. 5key techniques for responsible responsive design
  62. 62. http://www.flickr.com/photos/auyongcheemeng/95769332/ Build Mobile First Responsive Designs #1
  63. 63. Different than Mobile First DesignTheory http://www.flickr.com/photos/localcelebrity/4831362933/
  64. 64. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  65. 65. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Graceful degradation Progressive Enhancement Mobile First ResponsiveWeb Design is a technical approach for responsive designs.
  66. 66. /* 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.
  67. 67. 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.
  68. 68. The absence of support for media queries is in fact the first media query. —Bryan Rieger “
  69. 69. IE8 and below don’t support media queries.
  70. 70. Desktop First ResponsiveWeb Design = Desktop Fallback Mobile First ResponsiveWeb Design = Mobile Fallback What do you see if your browser doesn’t support media queries?
  71. 71. <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.
  72. 72. <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 polyfill for IE)
  73. 73. Keep CSS images in their place #2
  74. 74. 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;} }
  75. 75. 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
  76. 76. http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  77. 77. 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/
  78. 78. 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;        } }
  79. 79. 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');        } }
  80. 80. #3 Conditionally load JS based on screen size and capabilities http://www.flickr.com/photos/lyza/7382255242/
  81. 81. <iframe id="map" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe> Extremely long URL abbreviated This single iframe causes 47 files to be downloaded!
  82. 82. 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 abbreviated This single iframe causes 47 files to be downloaded!
  83. 83. https://github.com/paulirish/matchMedia.js In JavaScript, use matchMedia() or a polyfill for it to test a media query
  84. 84. <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
  85. 85. Behaviorial Breakpoints Better yet, keep your breakpoints in your CSS and have your JavaScript watch to changes to the DOM triggered by media queries.
  86. 86. Deliver different size <IMG>s at different screen sizes #4 http://www.flickr.com/photos/kk/230544325/
  87. 87. <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 thescreen size, HTML only allows one value for the src.
  88. 88. <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 thescreen size, HTML only allows one value for the src. One SRC to rule all images
  89. 89. Two most common use cases
  90. 90. https://www.flickr.com/photos/whitehouse/8491445521 Resolution Switching Includes high-density (retina) images.
  91. 91. https://www.flickr.com/photos/whitehouse/8491445521 Resolution Switching Includes high-density (retina) images.
  92. 92. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art Direction
  93. 93. Art Direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
  94. 94. Art Direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
  95. 95. Art Direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
  96. 96. Art Direction Not simply cropping
  97. 97. Art Direction Images with text Sign In Account Get Email Español Shopping Bag Features New Arrivals Show Off Tees Backpacks Tech Toys 2/$30 & 2/$40 PINK Favorites Spin the Panty Wheel Tops All Tops Hoodies & Crews Tees & Tanks Bottoms All Bottoms Sweats Shorts Yoga PINK Loves Yoga Panties 5/$26 Styles 3/$33 Styles Shop by Style Bras All Bras Bandeaus & Bralettes 2/$42 Wear Everywhere Bras Bras 101 Swim Search
  98. 98. No good solutions
  99. 99. New proposed standards <picture> srcset src-n
  100. 100. Standards process is still moving forward http://www.flickr.com/photos/johnlamb/2576062549/
  101. 101. Get Involved at Responsiveimages.org
  102. 102. 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
  103. 103. Handle high-density (retina) images very carefully #5 http://www.flickr.com/photos/kk/230544325/
  104. 104. 0 500000 1000000 1500000 2000000 Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina 1861632 465408 519360 130080 57920 Single image on multiple screens 320x18 480x27 960x54 909x51 1818x10
  105. 105. 0 500000 1000000 1500000 2000000 Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina 1861632 465408 519360 130080 57920 Single image on multiple screens 3,214% bigger 320x18 480x27 960x54 909x51 1818x10
  106. 106. 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.
  107. 107. 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); } }
  108. 108. Foresight.js
  109. 109. PictureFill User Preference Branch Tap HD/SD to switch image density https://github.com/scottjehl/picturefill/tree/user-prefs
  110. 110. Compressive Images? http://blog.netvlies.nl/design-interactie/retina-revolution/
  111. 111. If I could dream up my ideal solution…
  112. 112. 8 guidelines and 1 immutable rule
  113. 113. Use vector-based images or font icons whenever you can#1
  114. 114. IcoMoon.io makes font icons easy IcoMoon App Premium Icons Font CDN Browse 3800+ Free Vector Icons 1200+ Vector Icons & Counting Serve Custom-Built Fonts IcoMoonIcoMoon Custom Built and Crisp Icon Fonts, Done Right Home App Icon Packs Font CDN Demo Documentation Blog About
  115. 115. Grumpicon.com helps with SVG Based on open source grunticon /' // . // |//7 /' " . | ( _ _ - -_ | '._ ' _ __ _- _ _/ '-' // _/ | | || | / / | / |VV ||--__________/-||-/| || || || || { } { } { }{ } . . Drag & Drop ur SVGs on the Grumpicon plz. What Is This Issues?
  116. 116. Encourage people to upload the highest quality source possible#2
  117. 117. Provide an automatic image resizing and compression service#3
  118. 118. 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" />
  119. 119. “Save for theWeb”should be a thing of the past. —@adambradley“
  120. 120. 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 upon details. Markup for allimages can bechanged in one spot.
  121. 121. Provide a way to override resized images for art direction needs#6
  122. 122. Integrate image compression best practices#7 jpegtran or jpegoptim OptiPNG or PNGOUT far future expires headers
  123. 123. Bonus: Detect support forWebP image format and use it#8 The averageWebP file size is 25% - 34% smaller compared to JPEG file size. WebP compresses 34% better than libpng, and 26% better than pngout for loseless images.
  124. 124. The only rule for your responsive images implementation: Plan for the fact that it will be deprecated. Make it easy to change.
  125. 125. It’s three years later. Let’s revisit my original question.
  126. 126. http://www.flickr.com/photos/theyoungthousands/4025421438 Can a one-size fits all solution…
  127. 127. compete with a tailored experience? http://www.flickr.com/photos/fronx/2862975043
  128. 128. Or will it always beTOO BIG? http://www.flickr.com/photos/haddadi/5971508861
  129. 129. Unlikely responsive design will ever be as fast as something crafted specifically for a device. http://www.flickr.com/photos/quarenta/3256329577
  130. 130. But web design is a balancing act… http://www.flickr.com/photos/kalexanderson/6266452817
  131. 131. And performance is just one factor.
  132. 132. For most projects, responsive design will be fast enough… Flickr: Uploaded February 11, 2007 by hawridger
  133. 133. if we roll up our sleeves and build mobile first responsive designs.
  134. 134. ThankYou! Special thanks to Scott Jehl, Guy Podjarny, and all of the Flickr users sharing under creative commons.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×