These are the slides from my talk at UXPA2015 (http://uxpa2015.org/) in San Diego on June 25 2015. The talk centred on going further with our responsive designs, looking at content strategy, performance, progressive enhancement and more future friendly thinking.
22. Photo Credit: Kris Krüg: https://www.flickr.com/photos/kk/6863172432/
THIS IS WHY RWD MATTERS
@duckymatt
23. @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
25. 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
27. BUT AREN’T MOBILE USERS
ALWAYS ‘ON THE GO’?
Image credit: 20th Century Fox Television & Greenway Productions (Batman, 1966) @duckymatt
28. 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
29. 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
55. OUR CONTENT
WILL NEED
TO BECOME
MORE FLEXIBLE
THAN EVER
Image credit: Sunbow Productions, Marvel Productions & Hasbro (The Transformers, 1984) @duckymatt
63. 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
65. @duckymatt
EVERY 100 MILLISECOND DELAY
COSTS 1% IN SALES
Source: https://moz.com/blog/how-to-improve-your-conversion-rates-with-a-faster-website
66. @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
67. @duckymatt
MAKING THE OBAMA WEBSITE 60% FASTER
INCREASED DONATIONS BY 14%
Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
68. @duckymatt
3 SECOND SAVING
$34 MILLION IN CONTRIBUTIONS
Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
69. @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/
70. @duckymatt
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/
73. 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
74. PERFORMANCE AT THE HEART OF
ALL DESIGN DECISIONS
Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978) @duckymatt
76. @duckymatt
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.
83. @duckymatt
SO WHAT NEXT?
Image credit: Twentieth Century Fox Films, UTV Motion Pictures, Spyglass Entertainment, Blinding Edge Pictures, Dune Entertainment (The Happening, 2008)
91. MAKE THE FIRST PAGE
RENDER BLAZING FAST
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt
92. LOAD ONLY CRITICAL CONTENT
THAT IS VISIBLE TO THE USER
ON FIRST PAGE LOAD
@duckymatt
https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#structure
116. WE DON’T GET TO DECIDE HOW
PEOPLE ACCESS OUR CONTENT
THEY DO.
@duckymatt
117. DO WEBSITES NEED TO
LOOK EXACTLY THE SAME
IN EVERY BROWSER?
@duckymattImage credit: StudioCanal, Aardman Animations & Anton Capital Entertainment (Shaun The Sheep Movie, 2015)
135. RESPONSIVE DESIGN
GOES MUCH FURTHER
THAN MEDIA QUERIES
AND FLUID GRIDS
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt
138. MAKE TRULY
RESPONSIVE EXPERIENCES
Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt
140. OUR CLIENTS
Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt
141. AND OUR USERS
Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt
142. 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
143. 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)