Date post: | 14-Aug-2015 |
Category: |
Design |
Upload: | matt-gibson |
View: | 381 times |
Download: | 0 times |
Image credit: Universal Pictures (Frankenstein, 1931)
@duckymatt Figaro Digital
ADAPTING TO RESPONSIVE DESIGN
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
@duckymattImage credit: Am Psycho Productions, Edward R Pressman Film, Lions Gate Films, Muse Productions, PPS Films, Quadra Entertainment, Universal Pictures (American Psycho, 2000)
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
Source: http://adwords.blogspot.co.uk/2015/05/building-for-next-moment.html
MOBILE WEB VS DESKTOP WEB
INTERNET USERS
2007 - 2015
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
Photo Credit: Kris Krüg: https://www.flickr.com/photos/kk/6863172432/
THIS IS WHY RWD MATTERS@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 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
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
CHALLENGE ASSUMPTIONS WITH RESEARCH
Image credit: The Ladd Company, Shaw Brothers and Warner Bros. (Blade Runner, 1982) @duckymatt
Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt
WHAT PEOPLE SAY THEY DO
Image credit: Gracie Films & 20th Century Fox Television (The Simpsons, 1989–) @duckymatt
WHAT PEOPLE REALLY DO
LAYOUTS BASED ON CONTENT NOT DEVICES
@duckymattImage credit: http://nexuscolorado.blogspot.com/2012/07/10-new-car-dilemas-does-it-fit-in-my.html
@duckymattSource: http://opensignal.com/reports/fragmentation.php
FRAGMENTATION
OUR CONTENT WILL NEED TO BECOME MORE FLEXIBLE THAN EVER
Image credit: Sunbow Productions, Marvel Productions & Hasbro (The Transformers, 1984) @duckymatt
TRANSFER SIZE
2010 2015
Source: http://httparchive.org/trends.php
700KB
2,000 KB
@duckymatt
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
EVERY SECOND COUNTS
@duckymatt@duckymattImage credit:Children’s Television Workshop & SesameWorkshop (Sesame Street, 1969-)
@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
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 CONTRIBUTIONSSource: 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/
@duckymatt
DRIVING AN ADDITIONAL
60 MILLION DOWNLOADS PER YEARSource: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
THINK SPEED MATTERS?
@duckymattImage credit: LucasFilms & Twentieth Century Fox Films (Star Wars: Episode IV – A New Hope, 1977)
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
PERFORMANCE AT THE HEART OF ALL DESIGN DECISIONS
Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978) @duckymatt
SETTING APERFORMANCE BUDGET
Image credit: Twentieth Century Fox Film Corporation (Speed, 1994) @duckymatt
@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.
PERCEPTION OF SPEED MATTERS
@duckymattImage credit: Reliance Entertainment, IM Global, DNA Films, Peach Trees, Rena Films (Dredd, 2012)
Source: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?_r=0 @duckymatt
@duckymattSource: 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…
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
@duckymatt
https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#structure
FUTURE FRIENDLY ≠ FUTURE PROOF
@duckymatt
WE CAN NEVER TRULY FUTURE PROOF OUR DESIGNS
Check out: http://futurefriendlyweb.com/
THE FUTURE IS ALREADY HERE
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
Photo credit: David Carrington: https://www.flickr.com/photos/thox/5053262651 @duckymatt
@duckymattSource & Image Credit: http://fuckyeahinternetfridge.tumblr.com/
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
Photo credit: LoKan Sardari: https://www.flickr.com/photos/lokan/17289001432/ @duckymatt
TINY TO HUGE SCREENS
Photo credit:Paul: https://www.flickr.com/photos/-macjasp/7056169897 @duckymatt
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)
Image credit: Paramount Pictures & Industrial Light & Magic (Star TrekIV: The Voyage Home, 1986) @duckymatt
NEW INPUTS
DO WEBSITES NEED TO LOOK EXACTLY THE SAME
IN EVERY BROWSER?
@duckymattImage credit: StudioCanal, Aardman Animations & Anton Capital Entertainment (Shaun The Sheep Movie, 2015)
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
DESIGN FOR TOUCH BY DEFAULT
AND ENHANCE WITH TOUCH GESTURES
Image credit: Walt Disney Productions, Lisberger/Kushney (TRON, 1982) @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
WE’LL NEED TO ADAPT TO THESE CHALLENGES
Image credit: Paramount Pictures (Airplane!, 1980)@duckymatt
RESPONSIVE DESIGN GOES MUCH FURTHER
THAN MEDIA QUERIES AND FLUID GRIDS
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt
MAKE TRULY RESPONSIVE EXPERIENCES
Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @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