My slides from my presentation at SXSW, Austin, Texas on 12/03/16 about going beyond the media query to deliver truly responsive experiences for people regardless of the device they're using.
20. @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
22. 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
24. BUT AREN’T MOBILE USERS
ALWAYS ‘ON THE GO’?
Image credit: 20th Century Fox Television & Greenway Productions (Batman, 1966)
@duckymatt
25. 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
26. 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
51. OUR CONTENT
WILL NEED
TO BECOME
MORE FLEXIBLE
THAN EVER
Image credit: Sunbow Productions, Marvel Productions & Hasbro (The Transformers, 1984)
@duckymatt
67. 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
69. @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
70. @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
71. MAKING THE OBAMA WEBSITE 60% FASTER
INCREASED DONATIONS BY 14%
Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
@duckymatt
72. 3 SECOND SAVING
$34 MILLION IN CONTRIBUTIONS
@duckymattSource: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
73. @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/
74. 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
75. Image credit: LucasFilms & Twentieth Century Fox Films (Star Wars: Episode IV – A New Hope, 1977)
@duckymatt
77. 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
78. Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978)
@duckymatt
80. MAKEYOUR 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
95. MAKE THE FIRST PAGE
RENDER BLAZING FAST
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995)
@duckymatt
96. 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
119. @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
120. 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
133. WE’LL NEED TO
ADAPT TO THESE
CHALLENGES
Image credit: Paramount Pictures (Airplane!, 1980)
@duckymatt
134. SKETCH
Image credit: Twentieth Century Fox Films, Paramount Pictures and Lightstorm Entertainment (Titanic, 1997)
@duckymatt
135. PROTOTYPE
Image credit: Paramount Pictures, Marvel Studios, Fairview Entertainment and Dark Blades Films (Iron Man, 2008)
@duckymatt
Clone or fork: https://github.com/Cyber-Duck/mobile-first-prototypes
136. Clone or fork: http://cyber-duck.github.io/hoisin.scss/
@duckymatt
137. RESPONSIVE DESIGN
GOES MUCH FURTHER
THAN MEDIA QUERIES
AND FLUID GRIDS
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995)
@duckymatt
140. MAKE TRULY
RESPONSIVE EXPERIENCES
Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999)
@duckymatt
141. Image credit: Walt Disney and Pixar Studios. (Up, 2009)
THAT WE
@duckymatt
142. OUR CLIENTS
Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988)
@duckymatt
143. AND OUR USERS
Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976)
@duckymatt
144. 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
145. 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