more than media queries: reframing responsive ux - sxsw 2016
TRANSCRIPT
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
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
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
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