More than Media Queries: Reframing Responsive UX - SXSW 2016

145
Reframing Responsive UX More than Media Queries: @duckymatt #RWDUX Image credit: Universal Pictures (Frankenstein, 1931)

Transcript of More than Media Queries: Reframing Responsive UX - SXSW 2016

Page 1: More than Media Queries: Reframing Responsive UX - SXSW 2016

Reframing Responsive UXMore than Media Queries:

@duckymatt

#RWDUX

Image credit: Universal Pictures (Frankenstein, 1931)

Page 2: More than Media Queries: Reframing Responsive UX - SXSW 2016

HELLO I’m Matt

@duckymatt #RWDUX

Page 3: More than Media Queries: Reframing Responsive UX - SXSW 2016

cyber-duck.co.uk@duckymatt@cyberduck_uk

Page 4: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 5: More than Media Queries: Reframing Responsive UX - SXSW 2016

DESIGNING RESPONSIVEEXPERIENCES

Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt

Page 6: More than Media Queries: Reframing Responsive UX - SXSW 2016

SO, HOW DO WE DEFINE RESPONSIVE DESIGN?

Image credit: Hartswood Films, BBC Wales & Masterpiece (Sherlock, 2010) @duckymatt

Page 7: More than Media Queries: Reframing Responsive UX - SXSW 2016

MEDIA QUERIES

FLUID GRIDS

FLEXIBLE IMAGES@duckymatt

Page 8: More than Media Queries: Reframing Responsive UX - SXSW 2016

Delivering elegant visual experiences, across just about any device

@duckymatt

Page 9: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

responsivelogos.co.uk

Page 10: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: Am Psycho Productions, Edward R Pressman Film, Lions Gate Films, Muse Productions, PPS Films, Quadra Entertainment, Universal Pictures (American Psycho, 2000)

@duckymatt

Page 11: More than Media Queries: Reframing Responsive UX - SXSW 2016

JOB DONE, RIGHT?

Image credit: Broadway Video, Little Stranger, NBC Universal Television (30 Rock, 2006) @duckymatt

Page 12: More than Media Queries: Reframing Responsive UX - SXSW 2016

WELL, NOTQUITE

Image credit: Carolco Pictures, Pacific Western, Lightstorm Entertainment, Canal+ & T2 Productions (Terimator 2: Judgment Day, 1991) @duckymatt

Page 13: More than Media Queries: Reframing Responsive UX - SXSW 2016

YOUR USERS DON’T CARE IF YOUR SITE IS RESPONSIVE

@duckymattSource: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/

Page 14: More than Media Queries: Reframing Responsive UX - SXSW 2016

THE TRUE CHALLENGES OF RWD GO BEYOND MEDIA QUERIES AND MAKING EVERYTHING STRETCHY.

@duckymatt

Page 15: More than Media Queries: Reframing Responsive UX - SXSW 2016

CONTENT

PERFORMANCE

FUTURE FRIENDLINESS@duckymatt

Page 16: More than Media Queries: Reframing Responsive UX - SXSW 2016

MATTER?WHY DOES ALL OF THIS

@duckymatt

Page 17: More than Media Queries: Reframing Responsive UX - SXSW 2016

Source: http://adwords.blogspot.co.uk/2015/05/building-for-next-moment.html

MOBILE WEB VS DESKTOP WEB

INTERNET USERS

2007 - 2016

Source: Kleiner Perkins Caufield Byers, Mary Meeker’s Internet Trends 2011 http://www.kpcb.com/insights/2011-internet-trends

DESKTOP

MOBILE

@duckymatt

Page 18: More than Media Queries: Reframing Responsive UX - SXSW 2016

#MOBILEGEDDONImage credit: Twentieth Century Fox, & Centropolis Entertainment (Independence Day, 1996) @duckymatt

Page 19: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 20: More than Media Queries: Reframing Responsive UX - SXSW 2016

@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 21: More than Media Queries: Reframing Responsive UX - SXSW 2016

CONTENT

PERFORMANCE

FUTURE FRIENDLINESS@duckymatt

Page 22: More than Media Queries: Reframing Responsive UX - SXSW 2016

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 23: More than Media Queries: Reframing Responsive UX - SXSW 2016

ASSUMPTION IS THE ENEMY OF A GOOD CONTENT

STRATEGY

@duckymatt

Page 24: More than Media Queries: Reframing Responsive UX - SXSW 2016

BUT AREN’T MOBILE USERS ALWAYS ‘ON THE GO’?

Image credit: 20th Century Fox Television & Greenway Productions (Batman, 1966) @duckymatt

Page 25: More than Media Queries: Reframing Responsive UX - SXSW 2016

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 26: More than Media Queries: Reframing Responsive UX - SXSW 2016

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 27: More than Media Queries: Reframing Responsive UX - SXSW 2016

Source / Credit: http://xkcd.com/773/ @duckymatt

Page 28: More than Media Queries: Reframing Responsive UX - SXSW 2016

CONTENT PARITY

Making your core content available on all platforms

@duckymatt

Page 29: More than Media Queries: Reframing Responsive UX - SXSW 2016

Credit: http://wtfmobileweb.com/ @duckymatt

Page 30: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymattCredit: http://wtfmobileweb.com/

Page 31: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymattCredit: http://wtfmobileweb.com/

Page 32: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

CONTENT PARITY ≠ CONTENT PRIORITY

@duckymatt

Page 33: More than Media Queries: Reframing Responsive UX - SXSW 2016
Page 34: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 35: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt@duckymatt

Page 36: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt@duckymatt

Page 37: More than Media Queries: Reframing Responsive UX - SXSW 2016

SO HOW CAN WEAVOID ASSUMPTIONS?

@duckymatt

Page 38: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: The Ladd Company, Shaw Brothers and Warner Bros. (Blade Runner, 1982) @duckymatt

CHALLENGE ASSUMPTIONS WITH RESEARCH

Page 39: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976)

WHAT PEOPLE SAY THEY DO

@duckymatt

Page 40: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: Gracie Films & 20th Century Fox Television (The Simpsons, 1989–)

WHAT PEOPLE REALLY DO@duckymatt

Page 41: More than Media Queries: Reframing Responsive UX - SXSW 2016

MOBILE FIRST DESIGN

Check out: http://abookapart.com/products/mobile-first

@duckymatt

Page 42: More than Media Queries: Reframing Responsive UX - SXSW 2016

MOBILE FIRST DESIGN

CONTENT STRATEGY

@duckymatt

Page 43: More than Media Queries: Reframing Responsive UX - SXSW 2016

FOCUS

@duckymatt

Page 44: More than Media Queries: Reframing Responsive UX - SXSW 2016

DESKTOP FIRST DESIGN

Image credit: Imagine Entertainment (The Nutty Professor, 1996) @duckymatt

Page 45: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 46: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 47: More than Media Queries: Reframing Responsive UX - SXSW 2016

LAYOUTS BASED ON CONTENT NOT DEVICES

Image credit: http://nexuscolorado.blogspot.com/2012/07/10-new-car-dilemas-does-it-fit-in-my.html @duckymatt

Page 48: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 49: More than Media Queries: Reframing Responsive UX - SXSW 2016

Source: http://opensignal.com/reports/fragmentation.php @duckymatt

Page 50: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image creditWalt Disney Productions (Donald Duck: Early to Bed, 1941) @duckymatt

Page 51: More than Media Queries: Reframing Responsive UX - SXSW 2016

OUR CONTENT WILL NEED TO BECOME MORE FLEXIBLE THAN EVER

Image credit: Sunbow Productions, Marvel Productions & Hasbro (The Transformers, 1984) @duckymatt

Page 52: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 53: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 54: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

MY BEEF WITH THE BURGER MENU ICON

Image credit: Warner Bros. Television, Bright/Kauffman/Crane Productions (Friends, 1995-2004)

Page 55: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: Twentieth Century Fox Films, UTV Motion Pictures, Spyglass Entertainment, Blinding Edge Pictures, Dune Entertainment (The Happening, 2008) @duckymatt

Page 56: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

MENU

7.2%ENGAGEMENT

Source: http://www.bbc.com/news/magazine-31602745

Page 57: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

MENU

22.4%ENGAGEMENT

Source: http://www.bbc.com/news/magazine-31602745

Page 58: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

MENU20%

ENGAGEMENT

Source: http://www.bbc.com/news/magazine-31602745

Page 59: More than Media Queries: Reframing Responsive UX - SXSW 2016

CONTENT

PERFORMANCE

FUTURE FRIENDLINESS@duckymatt

Page 60: More than Media Queries: Reframing Responsive UX - SXSW 2016

THE WEB IN 2016

Image credit: 4Kids Productions Inc (Pokémon, 1998) @duckymatt

Page 61: More than Media Queries: Reframing Responsive UX - SXSW 2016

TRANSFER SIZE

2010 2016

Source: http://httparchive.org/trends.php

700KB

2,200 KB

@duckymatt

Page 62: More than Media Queries: Reframing Responsive UX - SXSW 2016

IF WE CONTINUE AT THIS RATE THE AVERAGE PAGE SIZE IN 2020

WILL BE OVER 5MB!

@duckymatt

Page 63: More than Media Queries: Reframing Responsive UX - SXSW 2016

$500MONEY WELL SPENT?

@duckymatt

Page 64: More than Media Queries: Reframing Responsive UX - SXSW 2016

$500MONEY WELL SPENT?

@duckymatt

Page 65: More than Media Queries: Reframing Responsive UX - SXSW 2016

$500MONEY WELL SPENT?

@duckymatt

90 SECONDS LATER…

54.6MB 1,600 REQUESTS

Page 66: More than Media Queries: Reframing Responsive UX - SXSW 2016

$500MONEY WELL SPENT?

@duckymatt

$500

MONEY WELL SPENT, RIGHT?

Page 67: More than Media Queries: Reframing Responsive UX - SXSW 2016

71% OF PEOPLE EXPECT WEBSITES TO LOAD AS QUICKLY (OR FASTER)

ON THEIR MOBILE

See: http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf @duckymatt

Page 68: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymattImage credit:Children’s Television Workshop & SesameWorkshop (Sesame Street, 1969-)

EVERY SECOND COUNTS

@duckymatt

Page 69: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

EVERY 100 MILLISECOND DELAY COSTS 1% IN SALES

Source: https://moz.com/blog/how-to-improve-your-conversion-rates-with-a-faster-website @duckymatt

Page 70: More than Media Queries: Reframing Responsive UX - SXSW 2016

@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 @duckymatt

Page 71: More than Media Queries: Reframing Responsive UX - SXSW 2016

MAKING THE OBAMA WEBSITE 60% FASTER INCREASED DONATIONS BY 14%

Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/ @duckymatt

Page 72: More than Media Queries: Reframing Responsive UX - SXSW 2016

3 SECOND SAVING $34 MILLION IN CONTRIBUTIONS

@duckymattSource: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/

Page 73: More than Media Queries: Reframing Responsive UX - SXSW 2016

@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 74: More than Media Queries: Reframing Responsive UX - SXSW 2016

DRIVING AN ADDITIONAL 60 MILLION DOWNLOADS PER YEAR

Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/ @duckymatt

Page 75: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: LucasFilms & Twentieth Century Fox Films (Star Wars: Episode IV – A New Hope, 1977) @duckymatt

Page 76: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymattImage credit:NASA: http://www.everydaysciencestuff.com/space-dog/ @duckymatt

Page 77: More than Media Queries: Reframing Responsive UX - SXSW 2016

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 78: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978) @duckymatt

Page 79: More than Media Queries: Reframing Responsive UX - SXSW 2016

PERFORMANCE BUDGETS

Image credit: Twentieth Century Fox Film Corporation (Speed, 1994) @duckymatt

Page 80: More than Media Queries: Reframing Responsive UX - SXSW 2016

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.

@duckymatt

Page 81: More than Media Queries: Reframing Responsive UX - SXSW 2016

PAGE LOAD SPEED

HTTP REQUESTS

SIZE OF THE PAGE@duckymatt

Page 82: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 83: More than Media Queries: Reframing Responsive UX - SXSW 2016
Page 84: More than Media Queries: Reframing Responsive UX - SXSW 2016

START RENDER: 2.3 seconds

VISUALLY COMPLETE: 13.5 seconds

CURRENT WEBSITE

@duckymatt

Page 85: More than Media Queries: Reframing Responsive UX - SXSW 2016

SIMILAR WEBSITES

START RENDER: 1.9 seconds on average

VISUALLY COMPLETE: 2.4 seconds on average

@duckymatt

Page 86: More than Media Queries: Reframing Responsive UX - SXSW 2016

OUR GOAL SPEEDS

START RENDER: 1.5 seconds

VISUALLY COMPLETE: 2.0 seconds

@duckymatt

Page 87: More than Media Queries: Reframing Responsive UX - SXSW 2016

SO WHAT NEXT? Image credit: United Plankton Pictures, Nickelodeon (SpongeBob SquarePants, 1999—) @duckymatt

Page 88: More than Media Queries: Reframing Responsive UX - SXSW 2016

Inspired by: http://danielmall.com/articles/how-to-make-a-performance-budget/

Image credit: http://www.hetemeel.com/einsteinform.php

Page 89: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 90: More than Media Queries: Reframing Responsive UX - SXSW 2016

NEW BETA SITE

START RENDER: 1.3 seconds

VISUALLY COMPLETE: 1.6 seconds

@duckymatt

Page 91: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymattImage credit: BBC (Doctor Who, 2005—)

Page 92: More than Media Queries: Reframing Responsive UX - SXSW 2016

PERCEPTION OF SPEED VS ACTUAL SPEED

Image credit: Reliance Entertainment, IM Global, DNA Films, Peach Trees, Rena Films (Dredd, 2012) @duckymatt

Page 93: More than Media Queries: Reframing Responsive UX - SXSW 2016

Source: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?_r=0 @duckymatt

Page 94: More than Media Queries: Reframing Responsive UX - SXSW 2016

Source: 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…

@duckymatt

Page 95: More than Media Queries: Reframing Responsive UX - SXSW 2016

MAKE THE FIRST PAGE RENDER BLAZING FAST

Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt

Page 96: More than Media Queries: Reframing Responsive UX - SXSW 2016

LOAD ONLY CRITICAL CONTENT THAT IS VISIBLE TO THE USER

ON FIRST PAGE LOAD

Source: https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#structure @duckymatt

Page 97: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 98: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 99: More than Media Queries: Reframing Responsive UX - SXSW 2016

CONTENT

PERFORMANCE

FUTURE FRIENDLINESS@duckymatt

Page 100: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: Universal Pictures, Amblin Entertainment, U-Drive Productions (Back to the Future, 1985) @duckymatt

Page 101: More than Media Queries: Reframing Responsive UX - SXSW 2016

Photo credit: TechStage: https://www.flickr.com/photos/bestboyzde/15710950965 @duckymatt

Page 102: More than Media Queries: Reframing Responsive UX - SXSW 2016

Photo credit: Orde Saunders Liew: https://www.flickr.com/photos/79578508@N08/10081419044/ @duckymatt

Page 103: More than Media Queries: Reframing Responsive UX - SXSW 2016

Photo credit: Christopher Schmidt: https://www.flickr.com/photos/crschmidt/2224975112/ @duckymatt

Page 104: More than Media Queries: Reframing Responsive UX - SXSW 2016

Photo credit: Jon Fingas: https://www.flickr.com/photos/jfingas/15770620452/ @duckymatt

Page 105: More than Media Queries: Reframing Responsive UX - SXSW 2016

Photo credit: Mobilyazilar: https://www.flickr.com/photos/mobilyazilar/16172156273 @duckymatt

Page 106: More than Media Queries: Reframing Responsive UX - SXSW 2016

Source & Image Credit: http://arstechnica.com/gadgets/2012/03/hands-on-gesture-voice-and-the-many-inputs-of-samsungs-smart-tv/ @duckymatt

Page 107: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 108: More than Media Queries: Reframing Responsive UX - SXSW 2016

Photo credit: David Carrington: https://www.flickr.com/photos/thox/5053262651 @duckymatt

Page 109: More than Media Queries: Reframing Responsive UX - SXSW 2016

Source & Image Credit: http://fuckyeahinternetfridge.tumblr.com/ @duckymatt

Page 110: More than Media Queries: Reframing Responsive UX - SXSW 2016

Source & Image Credit: http://www.bmwblog.com/2008/03/05/more-info-on-the-bmw-full-in-car-web-access/ @duckymatt

Page 111: More than Media Queries: Reframing Responsive UX - SXSW 2016

A HOSTILE ENVIRONMENT

Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt

Page 112: More than Media Queries: Reframing Responsive UX - SXSW 2016

Source: http://outdatedbrowser.com/

DIFFERENT BROWSERS

@duckymatt

Page 113: More than Media Queries: Reframing Responsive UX - SXSW 2016

SLOW CONNECTIONS

@duckymatt

Page 114: More than Media Queries: Reframing Responsive UX - SXSW 2016

Photo credit: LoKan Sardari: https://www.flickr.com/photos/lokan/17289001432/

TINY TO HUGE SCREENS

@duckymatt

Page 115: More than Media Queries: Reframing Responsive UX - SXSW 2016

Photo credit:Paul: https://www.flickr.com/photos/-macjasp/7056169897

RETINA AND NON RETINA

@duckymatt

Page 116: More than Media Queries: Reframing Responsive UX - SXSW 2016

NEW INPUTS

Image credit: Twentieth Century Fox, Dreamworks SKG, Cruise/Wagner Productions, Blue Tulip Productions, Ronald Shusett/Gary Goldman (Minority Report, 2002) @duckymatt

Page 117: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: Paramount Pictures & Industrial Light & Magic (Star TrekIV: The Voyage Home, 1986)

NEW INPUTS

@duckymatt

Page 118: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: BBC @duckymatt

Page 119: More than Media Queries: Reframing Responsive UX - SXSW 2016

@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 120: More than Media Queries: Reframing Responsive UX - SXSW 2016

DOES THAT MEAN WEBSITES NEED TO LOOK EXACTLY THE SAME IN EVERY BROWSER?

Image credit: StudioCanal, Aardman Animations & Anton Capital Entertainment (Shaun The Sheep Movie, 2015) @duckymatt

Page 121: More than Media Queries: Reframing Responsive UX - SXSW 2016

http://dowebsitesneedtolookexactlythesameineverybrowser.com/ @duckymatt

Page 122: More than Media Queries: Reframing Responsive UX - SXSW 2016

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 123: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 124: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: Julien Douvier: http://www.juliendouvier.com/Animated-photography-Escalators@duckymatt

PROGRESSIVE ENHANCEMENT

Page 125: More than Media Queries: Reframing Responsive UX - SXSW 2016

DESIGN FOR TOUCH BY DEFAULT

AND ENHANCE WITH TOUCH GESTURES

Image credit: Walt Disney Productions, Lisberger/Kushney (TRON, 1982) @duckymatt

Page 126: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymattSee: skinnyties.com @duckymatt

Page 127: More than Media Queries: Reframing Responsive UX - SXSW 2016

FORM ENHANCEMENTUSING INPUT TYPES AND ATTRIBUTES

Image credit: http://blog.teamtreehouse.com/use-input-element

@duckymatt

Page 128: More than Media Queries: Reframing Responsive UX - SXSW 2016

ANIMATION AS AN ENHANCEMENT

Source / Image credit: Dann Petty: https://dribbble.com/shots/1621359-Open-Close-Icon-Animation @duckymatt

Page 129: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 130: More than Media Queries: Reframing Responsive UX - SXSW 2016

LOCATION, LOCATION, LOCATION

Check out: http://canibbq.com @duckymatt

Page 131: More than Media Queries: Reframing Responsive UX - SXSW 2016

CONDITIONAL LOADING

Page 132: More than Media Queries: Reframing Responsive UX - SXSW 2016

@duckymatt

Page 133: More than Media Queries: Reframing Responsive UX - SXSW 2016

WE’LL NEED TO ADAPT TO THESE CHALLENGES

Image credit: Paramount Pictures (Airplane!, 1980) @duckymatt

Page 134: More than Media Queries: Reframing Responsive UX - SXSW 2016

SKETCH

Image credit: Twentieth Century Fox Films, Paramount Pictures and Lightstorm Entertainment (Titanic, 1997) @duckymatt

Page 135: More than Media Queries: Reframing Responsive UX - SXSW 2016

PROTOTYPEImage credit: Paramount Pictures, Marvel Studios, Fairview Entertainment and Dark Blades Films (Iron Man, 2008) @duckymattClone or fork: https://github.com/Cyber-Duck/mobile-first-prototypes

Page 136: More than Media Queries: Reframing Responsive UX - SXSW 2016

Clone or fork: http://cyber-duck.github.io/hoisin.scss/

@duckymatt

Page 137: More than Media Queries: Reframing Responsive UX - SXSW 2016

RESPONSIVE DESIGN GOES MUCH FURTHER THAN MEDIA QUERIES

AND FLUID GRIDS

Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt

Page 138: More than Media Queries: Reframing Responsive UX - SXSW 2016

3 FACTORS Image credit: L.A. Films and HBO (¡Three Amigos!, 1986) @duckymatt

Page 139: More than Media Queries: Reframing Responsive UX - SXSW 2016

CONTENT

PERFORMANCE

FUTURE FRIENDLINESS@duckymatt

Page 140: More than Media Queries: Reframing Responsive UX - SXSW 2016

MAKE TRULY RESPONSIVE EXPERIENCES

Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt

Page 141: More than Media Queries: Reframing Responsive UX - SXSW 2016

Image credit: Walt Disney and Pixar Studios. (Up, 2009)

THAT WE

@duckymatt

Page 142: More than Media Queries: Reframing Responsive UX - SXSW 2016

OUR CLIENTS

Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt

Page 143: More than Media Queries: Reframing Responsive UX - SXSW 2016

AND OUR USERS

Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt

Page 144: More than Media Queries: Reframing Responsive UX - SXSW 2016

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 145: More than Media Queries: Reframing Responsive UX - SXSW 2016

THANK YOU

Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm (The Artist, 2011)

@duckymatt