Adapting to Responsive Design - UXPA2015
-
Upload
matt-gibson -
Category
Internet
-
view
6.727 -
download
0
Transcript of Adapting to Responsive Design - UXPA2015
![Page 1: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/1.jpg)
Image credit: Universal Pictures (Frankenstein, 1931)
@duckymatt
ADAPTING TO RESPONSIVE DESIGN
![Page 2: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/2.jpg)
HELLO I’m Matt
@duckymatt
![Page 4: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/4.jpg)
@duckymatt
![Page 6: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/6.jpg)
@duckymatt
![Page 7: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/7.jpg)
DESIGNING RESPONSIVEEXPERIENCES
Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt
![Page 8: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/8.jpg)
SO, HOW DO WE DEFINE RESPONSIVE DESIGN?
Image credit: Hartswood Films, BBC Wales & Masterpiece (Sherlock, 2010) @duckymatt
![Page 9: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/9.jpg)
MEDIA QUERIES
FLUID GRIDS
FLEXIBLE IMAGES@duckymatt
![Page 10: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/10.jpg)
DELIVERING ELEGANT VISUAL EXPERIENCES, ACROSS JUST
ABOUT ANY DEVICE.
@duckymatt
![Page 11: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/11.jpg)
@duckymatt
![Page 12: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/12.jpg)
@duckymattImage credit: Am Psycho Productions, Edward R Pressman Film, Lions Gate Films, Muse Productions, PPS Films, Quadra Entertainment, Universal Pictures (American Psycho, 2000)
![Page 13: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/13.jpg)
JOB DONE, RIGHT?
Image credit: Broadway Video, Little Stranger, NBC Universal Television (30 Rock, 2006) @duckymatt
![Page 14: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/14.jpg)
WELL, NOTQUITE
Image credit: Carolco Pictures, Pacific Western, Lightstorm Entertainment, Canal+ & T2 Productions (Terimator 2: Judgment Day, 1991) @duckymatt
![Page 15: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/15.jpg)
THE TRUE CHALLENGES OF RWD GO BEYOND MEDIA QUERIES AND MAKING EVERYTHING STRETCHY.
@duckymatt
![Page 16: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/16.jpg)
@duckymatt
![Page 17: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/17.jpg)
@duckymatt
WHAT ARE THE TRUE CHALLENGES OF RWD?
![Page 18: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/18.jpg)
CONTENT
PERFORMANCE
FUTURE FRIENDLINESS@duckymatt
![Page 19: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/19.jpg)
MATTER?WHY DOES ALL OF THIS
@duckymatt
![Page 20: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/20.jpg)
Source: http://adwords.blogspot.co.uk/2015/05/building-for-next-moment.html
MOBILE WEB VS DESKTOP WEB
INTERNET USERS
2007 - 2015
Source: Kleiner Perkins Caufield Byers, Mary Meeker’s Internet Trends 2011 http://www.kpcb.com/insights/2011-internet-trends
DESKTOP
MOBILE
@duckymatt
![Page 21: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/21.jpg)
#MOBILEGEDDONImage credit: Twentieth Century Fox, & Centropolis Entertainment (Independence Day, 1996) @duckymatt
![Page 22: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/22.jpg)
Photo Credit: Kris Krüg: https://www.flickr.com/photos/kk/6863172432/
THIS IS WHY RWD MATTERS@duckymatt
![Page 23: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/23.jpg)
@duckymatt
KAREN MCGRANE
Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
You don't get to decide what device somebody uses to access the Internet. They do.
Source: http://karenmcgrane.com/2014/01/13/the-mobile-content-mandate/ @duckymatt
![Page 24: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/24.jpg)
CONTENT
PERFORMANCE
FUTURE FRIENDLINESS@duckymatt
![Page 25: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/25.jpg)
Content strategy plans for the creation, publication, and governance of useful, usable content.
Define not only which content will be published, but why we’re publishing it in the first place.
KRISTINA HALVORSON
Source: http://alistapart.com/article/thedisciplineofcontentstrategy @duckymatt
![Page 26: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/26.jpg)
ASSUMPTION IS THE ENEMY OF A GOOD CONTENT
STRATEGY
@duckymatt
![Page 27: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/27.jpg)
BUT AREN’T MOBILE USERS ALWAYS ‘ON THE GO’?
Image credit: 20th Century Fox Television & Greenway Productions (Batman, 1966) @duckymatt
![Page 28: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/28.jpg)
60% OF SMARTPHONE DATA IS USED INDOORS
Source: http://www.cennydd.com/blog/designing-with-context
Image credit: Fox 2000 Pictures, Regency Enterprises, Linson Films, Atman Entertainment, Knickerbocker Films & Tarius Film (Fight Club, 1999)
@duckymatt
![Page 29: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/29.jpg)
39% OF PEOPLE USE THEIR MOBILE IN THE LOO.
Source: http://www.wiyamobile.net/pitch.pdf
Image credit:Chuck Lorre Productions & Warner Bros. Television (The Big Bang Theory, 2007-)
@duckymatt
![Page 31: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/31.jpg)
CONTENT PARITY
YOUR CORE CONTENT SHOULD BE AVAILABLE
ON ALL PLATFORMS
@duckymatt
![Page 35: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/35.jpg)
@duckymatt
CONTENT PARITY ≠ CONTENT PRIORITY
![Page 36: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/36.jpg)
@duckymatt
![Page 37: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/37.jpg)
@duckymatt
![Page 38: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/38.jpg)
@duckymatt
![Page 39: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/39.jpg)
SO HOW CAN WEAVOID ASSUMPTIONS?
@duckymatt
![Page 40: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/40.jpg)
CHALLENGE ASSUMPTIONS WITH RESEARCH
Image credit: The Ladd Company, Shaw Brothers and Warner Bros. (Blade Runner, 1982) @duckymatt
![Page 41: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/41.jpg)
Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt
WHAT PEOPLE SAY THEY DO
![Page 42: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/42.jpg)
Image credit: Gracie Films & 20th Century Fox Television (The Simpsons, 1989–) @duckymatt
WHAT PEOPLE REALLY DO
![Page 43: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/43.jpg)
DEVICE AGNOSTIC USER STORIES
@duckymatt
![Page 44: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/44.jpg)
AUDIT YOUR EXISTING CONTENT
Image credit: Nintendo & Capcom (The Legend of Zelda: A Link to the Past, 1991) @duckymatt
![Page 45: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/45.jpg)
MOBILE FIRSTDESIGN
Check out: http://abookapart.com/products/mobile-first
@duckymatt
![Page 46: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/46.jpg)
MOBILE FIRSTDESIGN
CONTENT STRATEGY
@duckymatt
![Page 47: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/47.jpg)
@duckymatt
FOCUS
![Page 48: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/48.jpg)
AVOID CONTENT BLOAT
Image credit: Imagine Entertainment (The Nutty Professor, 1996) @duckymatt
![Page 49: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/49.jpg)
![Page 50: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/50.jpg)
@duckymatt
![Page 51: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/51.jpg)
LAYOUTS BASED ON CONTENT NOT DEVICES
@duckymattImage credit: http://nexuscolorado.blogspot.com/2012/07/10-new-car-dilemas-does-it-fit-in-my.html
![Page 52: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/52.jpg)
@duckymatt
![Page 53: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/53.jpg)
@duckymattSource: http://opensignal.com/reports/fragmentation.php
FRAGMENTATION
![Page 54: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/54.jpg)
@duckymattImage creditWalt Disney Productions (Donald Duck: Early to Bed, 1941)
![Page 55: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/55.jpg)
OUR CONTENT WILL NEED TO BECOME MORE FLEXIBLE THAN EVER
Image credit: Sunbow Productions, Marvel Productions & Hasbro (The Transformers, 1984) @duckymatt
![Page 56: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/56.jpg)
CONTENT
PERFORMANCE
FUTURE FRIENDLINESS@duckymatt
![Page 57: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/57.jpg)
THE WEB TODAY…
Image credit: 4Kids Productions Inc (Pokémon, 1998) @duckymatt
![Page 58: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/58.jpg)
TRANSFER SIZE
2010 2015
Source: http://httparchive.org/trends.php
700KB
2,000 KB
@duckymatt
![Page 59: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/59.jpg)
IF WE CONTINUE AT THIS RATE THE AVERAGE PAGE SIZE IN 2020
WILL BE OVER 5MB!
@duckymatt
![Page 60: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/60.jpg)
$500MONEY WELL SPENT?
@duckymatt
![Page 61: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/61.jpg)
@duckymatt
90 SECONDS LATER…
54.6MB 1,600 REQUESTS
![Page 62: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/62.jpg)
$500MONEY WELL SPENT?
@duckymatt
![Page 63: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/63.jpg)
71% OF PEOPLE EXPECT WEBSITES TO LOAD AS
QUICKLY (OR FASTER) ON THEIR MOBILE PHONE
See: http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf @duckymatt
![Page 64: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/64.jpg)
EVERY SECOND COUNTS
@duckymatt@duckymattImage credit:Children’s Television Workshop & SesameWorkshop (Sesame Street, 1969-)
![Page 65: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/65.jpg)
@duckymatt
EVERY 100 MILLISECOND DELAY COSTS 1% IN SALES
Source: https://moz.com/blog/how-to-improve-your-conversion-rates-with-a-faster-website
![Page 66: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/66.jpg)
@duckymatt
EVERY 1 SECOND DELAY COSTS $1.6 BILLION A YEAR
Source: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
![Page 67: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/67.jpg)
@duckymatt
MAKING THE OBAMA WEBSITE 60% FASTER
INCREASED DONATIONS BY 14%Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
![Page 68: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/68.jpg)
@duckymatt
3 SECOND SAVING
$34 MILLION IN CONTRIBUTIONSSource: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
![Page 69: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/69.jpg)
@duckymatt
REDUCING LOAD BY 2 SECONDS
INCREASED DOWNLOADS BY 15%Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
![Page 70: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/70.jpg)
@duckymatt
DRIVING AN ADDITIONAL
60 MILLION DOWNLOADS PER YEARSource: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
![Page 71: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/71.jpg)
THINK SPEED MATTERS?
@duckymattImage credit: LucasFilms & Twentieth Century Fox Films (Star Wars: Episode IV – A New Hope, 1977)
![Page 72: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/72.jpg)
@duckymattImage credit:NASA: http://www.everydaysciencestuff.com/space-dog/
I HAVE NO IDEA WHAT I’M DOING
![Page 73: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/73.jpg)
BRAD FROST
Photo credit: John Davey: http://www.flickr.com/photos/johndavey/8891059281/
Source: http://bradfrostweb.com/blog/post/performance-as-design/
It’s time for us to treat performance as an essential design feature, not just as a technical best practice
@duckymatt
![Page 74: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/74.jpg)
PERFORMANCE AT THE HEART OF ALL DESIGN DECISIONS
Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978) @duckymatt
![Page 75: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/75.jpg)
SETTING APERFORMANCE BUDGET
Image credit: Twentieth Century Fox Film Corporation (Speed, 1994) @duckymatt
![Page 76: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/76.jpg)
@duckymatt
MAKE YOUR BUDGET TANGIBLE
DAN MALL
Photo credit: Jeffrey Zeldman: https://www.flickr.com/photos/zeldman/14716769922/
Source: http://danielmall.com/articles/how-to-make-a-performance-budget/
I believe designers do their best work within constraints, and knowing those constraints before starting a design can be incredibly enabling.
![Page 77: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/77.jpg)
PAGE LOAD SPEED
HTTP REQUESTS
SIZE OF THE PAGE@duckymatt
![Page 78: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/78.jpg)
@duckymatt
![Page 79: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/79.jpg)
@duckymatt
![Page 80: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/80.jpg)
START RENDER: 2.392 sec
VISUALLY COMPLETE: 13.500 sec
@duckymatt
CURRENT WEBSITE
![Page 81: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/81.jpg)
START RENDER: 1.900 sec on average
VISUALLY COMPLETE: 2.400 sec on average
@duckymatt
SIMILAR WEBSITES
![Page 82: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/82.jpg)
START RENDER: 1.500 sec
VISUALLY COMPLETE: 2.000 sec
@duckymatt
OUR GOAL SPEEDS
![Page 83: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/83.jpg)
@duckymatt
SO WHAT NEXT? Image credit: Twentieth Century Fox Films, UTV Motion Pictures, Spyglass Entertainment, Blinding Edge Pictures, Dune Entertainment (The Happening, 2008)
![Page 84: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/84.jpg)
@duckymattInspired by: http://danielmall.com/articles/how-to-make-a-performance-budget/
Image credit: http://www.hetemeel.com/einsteinform.php
![Page 85: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/85.jpg)
@duckymatt
![Page 86: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/86.jpg)
START RENDER: 1.293 sec
VISUALLY COMPLETE: 1.600 sec
@duckymatt
CURRENT WEBSITE
![Page 87: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/87.jpg)
@duckymattImage credit: BBC Wales, CBC (Doctor Who, 2005–)
![Page 88: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/88.jpg)
PERCEPTION OF SPEED MATTERS
@duckymattImage credit: Reliance Entertainment, IM Global, DNA Films, Peach Trees, Rena Films (Dredd, 2012)
![Page 89: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/89.jpg)
Source: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?_r=0 @duckymatt
![Page 90: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/90.jpg)
@duckymattSource: http://www.filamentgroup.com/lab/weight-wait.html
SCOTT JEHL - MORE WEIGHT DOESN’T MEAN MORE WAIT SCOTT JEHL
More weight doesn’t mean more wait…
![Page 91: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/91.jpg)
MAKE THE FIRST PAGE RENDER BLAZING FAST
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt
![Page 92: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/92.jpg)
LOAD ONLY CRITICAL CONTENT THAT IS VISIBLE TO THE USER
ON FIRST PAGE LOAD
@duckymatt
https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#structure
![Page 93: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/93.jpg)
@duckymatt
![Page 94: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/94.jpg)
@duckymatt
![Page 95: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/95.jpg)
CONTENT
PERFORMANCE
FUTURE FRIENDLINESS@duckymatt
![Page 96: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/96.jpg)
FUTURE FRIENDLY ≠ FUTURE PROOF
@duckymatt
WE CAN NEVER TRULY FUTURE PROOF OUR DESIGNS
Check out: http://futurefriendlyweb.com/
![Page 97: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/97.jpg)
THE FUTURE IS ALREADY HERE
Image credit: Universal Pictures, Amblin Entertainment, U-Drive Productions (Back to the Future, 1985) @duckymatt
![Page 98: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/98.jpg)
Photo credit: TechStage: https://www.flickr.com/photos/bestboyzde/15710950965 @duckymatt
![Page 99: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/99.jpg)
Photo credit: Orde Saunders Liew: https://www.flickr.com/photos/79578508@N08/10081419044/ @duckymatt
![Page 100: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/100.jpg)
Photo credit: Christopher Schmidt: https://www.flickr.com/photos/crschmidt/2224975112/ @duckymatt
![Page 101: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/101.jpg)
Photo credit: Jon Fingas: https://www.flickr.com/photos/jfingas/15770620452/ @duckymatt
![Page 102: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/102.jpg)
Photo credit: Mobilyazilar: https://www.flickr.com/photos/mobilyazilar/16172156273 @duckymatt
![Page 103: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/103.jpg)
Source & Image Credit: http://arstechnica.com/gadgets/2012/03/hands-on-gesture-voice-and-the-many-inputs-of-samsungs-smart-tv/ @duckymatt
![Page 104: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/104.jpg)
@duckymatt
![Page 105: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/105.jpg)
Photo credit: David Carrington: https://www.flickr.com/photos/thox/5053262651 @duckymatt
![Page 106: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/106.jpg)
@duckymattSource & Image Credit: http://fuckyeahinternetfridge.tumblr.com/
![Page 107: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/107.jpg)
Source & Image Credit: http://www.bmwblog.com/2008/03/05/more-info-on-the-bmw-full-in-car-web-access/ @duckymatt
![Page 108: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/108.jpg)
A HOSTILE ENVIRONMENT
Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt
![Page 110: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/110.jpg)
@duckymatt
SLOW CONNECTIONS
![Page 111: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/111.jpg)
Photo credit: LoKan Sardari: https://www.flickr.com/photos/lokan/17289001432/ @duckymatt
TINY TO HUGE SCREENS
![Page 112: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/112.jpg)
Photo credit:Paul: https://www.flickr.com/photos/-macjasp/7056169897 @duckymatt
RETINA AND NON RETINA
![Page 113: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/113.jpg)
@duckymatt
NEW INPUTS
Image credit: Twentieth Century Fox, Dreamworks SKG, Cruise/Wagner Productions, Blue Tulip Productions, Ronald Shusett/Gary Goldman (Minority Report, 2002)
![Page 114: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/114.jpg)
Image credit: Paramount Pictures & Industrial Light & Magic (Star TrekIV: The Voyage Home, 1986) @duckymatt
NEW INPUTS
![Page 115: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/115.jpg)
@duckymattImage credit: BBC
![Page 116: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/116.jpg)
WE DON’T GET TO DECIDE HOW PEOPLE ACCESS OUR CONTENT
THEY DO.
@duckymatt
![Page 117: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/117.jpg)
DO WEBSITES NEED TO LOOK EXACTLY THE SAME
IN EVERY BROWSER?
@duckymattImage credit: StudioCanal, Aardman Animations & Anton Capital Entertainment (Shaun The Sheep Movie, 2015)
![Page 118: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/118.jpg)
http://dowebsitesneedtolookexactlythesameineverybrowser.com/@duckymatt
![Page 119: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/119.jpg)
Image credit: Julien Douvier: http://www.juliendouvier.com/Animated-photography-Escalators
PROGRESSIVE ENHANCEMENT
Source: http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
@duckymatt
![Page 120: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/120.jpg)
@duckymatt
![Page 121: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/121.jpg)
PROGRESSIVE ENHANCEMENT
Image credit: Julien Douvier: http://www.juliendouvier.com/Animated-photography-Escalators
Source: http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
@duckymatt
![Page 122: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/122.jpg)
DESIGN FOR TOUCH BY DEFAULT
AND ENHANCE WITH TOUCH GESTURES
Image credit: Walt Disney Productions, Lisberger/Kushney (TRON, 1982) @duckymatt
![Page 124: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/124.jpg)
FORM ENHANCEMENTUSING INPUT TYPES AND ATTRIBUTES
Image credit: http://blog.teamtreehouse.com/use-input-element
@duckymatt
![Page 125: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/125.jpg)
ANIMATION AS AN ENHANCEMENT
Source / Image credit: Dann Petty: https://dribbble.com/shots/1621359-Open-Close-Icon-Animation @duckymatt
![Page 126: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/126.jpg)
@duckymatt
![Page 129: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/129.jpg)
CONDITIONAL LOADINGGREAT FOR ADAPTIVE EMBEDDING
@duckymatt
![Page 130: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/130.jpg)
@duckymatt
![Page 131: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/131.jpg)
WE’LL NEED TO ADAPT TO THESE CHALLENGES
Image credit: Paramount Pictures (Airplane!, 1980)@duckymatt
![Page 132: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/132.jpg)
SKETCH
@duckymattImage credit: Twentieth Century Fox Films, Paramount Pictures and Lightstorm Entertainment (Titanic, 1997)
![Page 133: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/133.jpg)
@duckymatt
PROTOTYPINGImage credit: Paramount Pictures, Marvel Studios, Fairview Entertainment and Dark Blades Films (Iron Man, 2008)
![Page 135: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/135.jpg)
RESPONSIVE DESIGN GOES MUCH FURTHER
THAN MEDIA QUERIES AND FLUID GRIDS
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt
![Page 136: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/136.jpg)
3 FACTORS Image credit: L.A. Films and HBO (¡Three Amigos!, 1986) @duckymatt
![Page 137: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/137.jpg)
CONTENT STRATEGY
PERFORMANCE
FUTURE FRIENDLINESS@duckymatt
![Page 138: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/138.jpg)
MAKE TRULY RESPONSIVE EXPERIENCES
Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt
![Page 139: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/139.jpg)
THAT WE
Image credit: Walt Disney and Pixar Studios. (Up, 2009) @duckymatt
![Page 140: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/140.jpg)
OUR CLIENTS
Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt
![Page 141: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/141.jpg)
AND OUR USERS
Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt
![Page 142: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/142.jpg)
WILL
Image credit: Warner Bros, Village Roadshow Pictures, A&E Television Network, Bazmark Films, Red Wagon Entertainment and Spectrum Films (The Great Gatsby, 2013) @duckymatt
![Page 143: Adapting to Responsive Design - UXPA2015](https://reader030.fdocuments.in/reader030/viewer/2022032502/55bae8e7bb61ebf9308b457e/html5/thumbnails/143.jpg)
THANK YOU@duckymatt
Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm (The Artist, 2011)