more than media queries: reframing responsive ux - sxsw 2016

Reframing Responsive UXMore than Media Queries:

@duckymatt

#RWDUX

Image credit: Universal Pictures (Frankenstein, 1931)

HELLO I’m Matt

@duckymatt #RWDUX

cyber-duck.co.uk@duckymatt@cyberduck_uk

@duckymatt

DESIGNING RESPONSIVEEXPERIENCES

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

SO, HOW DO WE DEFINE RESPONSIVE DESIGN?

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

MEDIA QUERIES

FLUID GRIDS

FLEXIBLE IMAGES@duckymatt

Delivering elegant visual experiences, across just about any device

@duckymatt

@duckymatt

responsivelogos.co.uk

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

@duckymatt

JOB DONE, RIGHT?

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

WELL, NOTQUITE

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

YOUR USERS DON’T CARE IF YOUR SITE IS RESPONSIVE

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

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

@duckymatt

CONTENT

PERFORMANCE

FUTURE FRIENDLINESS@duckymatt

MATTER?WHY DOES ALL OF THIS

@duckymatt

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

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

@duckymatt

@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

CONTENT

PERFORMANCE

FUTURE FRIENDLINESS@duckymatt

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

ASSUMPTION IS THE ENEMY OF A GOOD CONTENT

STRATEGY

@duckymatt

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

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

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

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

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

CONTENT PARITY

Making your core content available on all platforms

@duckymatt

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

@duckymattCredit: http://wtfmobileweb.com/

@duckymattCredit: http://wtfmobileweb.com/

@duckymatt

CONTENT PARITY ≠ CONTENT PRIORITY

@duckymatt

@duckymatt

@duckymatt@duckymatt

@duckymatt@duckymatt

SO HOW CAN WEAVOID ASSUMPTIONS?

@duckymatt

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

CHALLENGE ASSUMPTIONS WITH RESEARCH

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

WHAT PEOPLE SAY THEY DO

@duckymatt

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

WHAT PEOPLE REALLY DO@duckymatt

MOBILE FIRST DESIGN

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

@duckymatt

MOBILE FIRST DESIGN

CONTENT STRATEGY

@duckymatt

FOCUS

@duckymatt

DESKTOP FIRST DESIGN

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

@duckymatt

@duckymatt

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

@duckymatt

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

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

OUR CONTENT WILL NEED TO BECOME MORE FLEXIBLE THAN EVER

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

@duckymatt

@duckymatt

@duckymatt

MY BEEF WITH THE BURGER MENU ICON

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

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

@duckymatt

MENU

7.2%ENGAGEMENT

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

@duckymatt

MENU

22.4%ENGAGEMENT

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

@duckymatt

MENU20%

ENGAGEMENT

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

CONTENT

PERFORMANCE

FUTURE FRIENDLINESS@duckymatt

THE WEB IN 2016

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

TRANSFER SIZE

2010 2016

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

700KB

2,200 KB

@duckymatt

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

WILL BE OVER 5MB!

@duckymatt

$500MONEY WELL SPENT?

@duckymatt

$500MONEY WELL SPENT?

@duckymatt

$500MONEY WELL SPENT?

@duckymatt

90 SECONDS LATER…

54.6MB 1,600 REQUESTS

$500MONEY WELL SPENT?

@duckymatt

$500

MONEY WELL SPENT, RIGHT?

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

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

EVERY SECOND COUNTS

@duckymatt

@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

@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

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

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

3 SECOND SAVING $34 MILLION IN CONTRIBUTIONS

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

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

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

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

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

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

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

PERFORMANCE BUDGETS

Image credit: Twentieth Century Fox Film Corporation (Speed, 1994) @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.

@duckymatt

PAGE LOAD SPEED

HTTP REQUESTS

SIZE OF THE PAGE@duckymatt

@duckymatt

START RENDER: 2.3 seconds

VISUALLY COMPLETE: 13.5 seconds

CURRENT WEBSITE

@duckymatt

SIMILAR WEBSITES

START RENDER: 1.9 seconds on average

VISUALLY COMPLETE: 2.4 seconds on average

@duckymatt

OUR GOAL SPEEDS

START RENDER: 1.5 seconds

VISUALLY COMPLETE: 2.0 seconds

@duckymatt

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

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

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

@duckymatt

NEW BETA SITE

START RENDER: 1.3 seconds

VISUALLY COMPLETE: 1.6 seconds

@duckymatt

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

PERCEPTION OF SPEED VS ACTUAL SPEED

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

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

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

MAKE THE FIRST PAGE RENDER BLAZING FAST

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

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

@duckymatt

@duckymatt

CONTENT

PERFORMANCE

FUTURE FRIENDLINESS@duckymatt

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

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

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

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

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

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

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

@duckymatt

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

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

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

A HOSTILE ENVIRONMENT

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

Source: http://outdatedbrowser.com/

DIFFERENT BROWSERS

@duckymatt

SLOW CONNECTIONS

@duckymatt

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

TINY TO HUGE SCREENS

@duckymatt

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

RETINA AND NON RETINA

@duckymatt

NEW INPUTS

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

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

NEW INPUTS

@duckymatt

Image credit: BBC @duckymatt

@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

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

http://dowebsitesneedtolookexactlythesameineverybrowser.com/ @duckymatt

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

@duckymatt

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

PROGRESSIVE ENHANCEMENT

DESIGN FOR TOUCH BY DEFAULT

AND ENHANCE WITH TOUCH GESTURES

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

@duckymattSee: skinnyties.com @duckymatt

FORM ENHANCEMENTUSING INPUT TYPES AND ATTRIBUTES

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

@duckymatt

ANIMATION AS AN ENHANCEMENT

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

@duckymatt

LOCATION, LOCATION, LOCATION

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

CONDITIONAL LOADING

@duckymatt

WE’LL NEED TO ADAPT TO THESE CHALLENGES

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

SKETCH

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

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

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

@duckymatt

RESPONSIVE DESIGN GOES MUCH FURTHER THAN MEDIA QUERIES

AND FLUID GRIDS

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

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

CONTENT

PERFORMANCE

FUTURE FRIENDLINESS@duckymatt

MAKE TRULY RESPONSIVE EXPERIENCES

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

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

THAT WE

@duckymatt

OUR CLIENTS

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

AND OUR USERS

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

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

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