when responsive web design meets the real world
Post on 27-Jan-2015
111 Views
Preview:
DESCRIPTION
TRANSCRIPT
When Responsive Web Design Meets the Real World
Follow me at @grigs http://bit.ly/grigs-akamai-rwd
The web has always been a balancing act.http://www.!ickr.com/photos/classblog/5136926303
With many competing interests.http://www.!ickr.com/photos/tudor/4324056624/
Finding balance is more difficult…
http://www.!ickr.com/photos/superfantastic/50088733/
As device diversity increases.
http://www.!ickr.com/photos/lyza/7382235106
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/
And yet the one question I frequently ask myself is…http://www.!ickr.com/photos/classblog/5136926303
Can a
http://www.!ickr.com/photos/sldghmmr/6041481069 experience…
compete with a tailored experience?http://www.!ickr.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.!ickr.com/photos/brunauto/5062644167/
Mobile context?
http://www.!ickr.com/photos/brunauto/5062644167/
http://www.!ickr.com/photos/brunauto/5062644167/
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
http://www.!ickr.com/photos/carbonnyc/5140154965
TMI
TMI
TMI 39% use on toliet!
Advertising
New responsive ad unitsBut 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 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/
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 slow.
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is slow.
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
Mobile users don’t care that
their network is slow.
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 desktop web sites.
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.!ickr.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%
26.0K 6.6K 19.4K 74.6%
34.7K 7.8K 26.9K 77.5%
Original Resized K Saved % Saved
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
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%
The resounding answer from the community:
Mobile First Responsive Web DesignThe 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 First Responsive Web Design Mobile First Responsive Web Design
“Awesome. We’ll devote a chapter to Mobile First Responsive Web Design in our book.”
“Awesome. We’ll devote a chapter to Mobile First Responsive Web Design in our book.”
Famous last words.
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/
Guy Podjarny repeated the experiment 2013: 476 sites from mediaqueri.es tested
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
Akin to hosting a dinner party on short notice…
http://www.!ickr.com/photos/beautyrede$ned/2643858323/
So you shove all your
junk in the closet.http://www.!ickr.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 perspective.
—Scott Jehl
“”https://twitter.com/scottjehl/status/243025352069349377
5 key techniques for responsible responsive design
http://www.flickr.com/photos/auyongcheemeng/95769332/
Build Mobile First Responsive Designs
#1
Different than Mobile First Design Theory
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 First Responsive Web Design is a technical approach for responsive designs.
/* 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
/* 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.
The absence of support for media queries is in fact the $rst media query.
—Bryan Rieger“
”
IE8 and below don’t support media queries.
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?
<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.
<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)
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 are here]
.header {display:none;}
}
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
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Images scoped within media queries
<div id="test5"></div>@media all and (min-‐width: 601px) { #test5 { background-‐image:url('images/test5-‐desktop.png'); width:200px; height:75px; }}@media all and (max-‐width: 600px) { #test5 { background-‐image:url('images/test5-‐mobile.png'); width:200px; height:75px; }}http://timkadlec.com/2012/04/media-query-asset-downloading-results/
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; }}
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'); }}
#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.google.com..."></iframe>
Extremely long URL abbreviatedThis single iframe causes 47 files to be downloaded!
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!
https://github.com/paulirish/matchMedia.js
In JavaScript, use matchMedia() or a poly$ll for it to test a media query
<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
Behaviorial BreakpointsBetter yet, keep your breakpoints in your CSS and have your JavaScript watch to changes to the DOM triggered by media queries.
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 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.
<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
Two most common use cases
https://www.flickr.com/photos/whitehouse/8491445521
Resolution SwitchingIncludes high-density (retina) images.
https://www.flickr.com/photos/whitehouse/8491445521
Resolution SwitchingIncludes 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
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
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 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
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
465408519360
13008057920
Single image on multiple screens
320x18480x27
960x54 909x51
1818x10
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
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.
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);
}
}
Foresight.js
PictureFill User Preference Branch Tap HD/SD to switch image densityhttps://github.com/scottjehl/picturefill/tree/user-prefs
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
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
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
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" alt="My constrained image"/>
“Save for the Web” should be a thing of the past.
—@adambradley“”
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.
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 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.
The only rule for your responsive images implementation:Plan for the fact that it will be deprecated. Make it easy to change.
It’s three years later. Let’s revisit my original question.
http://www.flickr.com/photos/theyoungthousands/4025421438
Can a one-size !ts all solution…
compete with a tailored experience?
http://www.flickr.com/photos/fronx/2862975043
Or will it always be TOO BIG?
http://www.flickr.com/photos/haddadi/5971508861
Unlikely responsive design will ever be as fast as something crafted speci!cally for a device.
http://www.flickr.com/photos/quarenta/3256329577
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 !rst responsive designs.
Thank You!
Special thanks to Scott Jehl, Guy Podjarny, and all of the Flickr users sharing under creative commons.
top related