adapting to responsive design - london web - feb 2015
TRANSCRIPT
Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the user’s conditions.
PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HAVEN’T EVEN CONSIDERED YET
Image Copyright: Walt Disney Pictures & Tim Burton Pictures
THE PREVIOUS STATE(S) OF OUR OWN WEBSITE
“DESKTOP” SITE (2011)
“TABLET” SITE (LATER 2011)
*Not to scale :)
“MOBILE” SITE (2012)
SETTING 4 GOALS FOR A RESPONSIVE DESIGN
Image Copyright: Chartoff-Winkler Productions & United Artists
CONTENT PARITY
Credit: http://wtfmobileweb.com/
THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS
1
FUTURE FRIENDLY
See: http://futurefriend.ly/
CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS
3
Image Copyright: Universal TV
ACCESSIBILITYSTYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS
4
Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
You don't get to decide which device people use to access
your website.
KAREN MCGRANE
Source: http://alistapart.com/article/your-content-now-mobile
Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
1
RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CLIENTS
GOOGLE ANALYTICS
CRAZYEGG
LEAD TO SALES
1
Image Copyright: Warner Bros.
2
TRANSFER SIZE
2010 2015
700KB
1900KB
http://httparchive.org/trends.php
71% OF PEOPLE EXPECT WEBSITES TO LOAD AS QUICKLY (OR FASTER)
ON THEIR MOBILE PHONE
2
See: http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf
It’s time for us to treat performance as an essential design feature, not just as a technical best practice.
BRAD FROST
Photo credit: John Davey: http://www.flickr.com/photos/johndavey/8891059281/
Source: http://bradfrostweb.com/blog/post/performance-as-design/
2
PERFORMANCE AT THE HEART OF ALL DESIGN DECISIONS
2Copyright: Paramount Pictures, Robert Stigwood Organisation, Allan Car Production
SET PERFORMANCE BUDGETS 2
timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film Corporation
To load the Facebook, Twitter and Google social media buttons for a total of 19 requests takes
246.7 KB in bandwidth.
http://zurb.com/article/883/small-painful-buttons-why-social-media-bu
2
Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/
2
CUT DOWN ON FRAMEWORK BLOAT
KNOWING YOUR CODE FROM TOP TO BOTTOM IS ESSENTIAL TO
HAVE TOTAL CONTROL OVER IT
2
Image credit: http://css-tricks.com/
http://cyber-duck.github.io/hoisin.scss/
WE CREATED A MINI-LIBRARY THAT IS SIMPLE, FLEXIBLE, LIGHT AND
DOESN’T MAKE DECISIONS FOR YOU
2
IMAGES2
THEN COMPRESSION
http://imageoptim.com/ https://tinypng.com/
We should embrace the fact that the web doesn’t have the same constraints [as the printed page]
and design for this flexibility.
JOHN ALLSOPP
http://alistapart.com/article/dao/
Photo credit: TEDxNSW: http://www.flickr.com/photos/42645924@N02/3933255654/
3
TEST, TEST AND TEST SOME MORECopyright: The Ladd Company & Shaw Brothers & Warner Bros. http://vanamco.com/ghostlab/
1. DESIGN FOR TOUCH BY DEFAULT
4
ARE YOUR DESIGNS FINGER FRIENDLY?
ARE YOU RELYING TOO HEAVILY ON HOVER?
2. MAKE THE PURPOSE OF ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
IF YOUR LINKS SAY “CLICK HERE” YOU’RE DOING IT WRONG
4
3. MAKE URLS HUMAN READABLE AND PERMANENT
WHERE POSSIBLE
HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
4
6. DON’T USE PLACEHOLDERS AS A SUBSTITUTE FOR LABELS
ON FORMS
4
http://www.webaxe.org/placeholder-attribute-is-not-a-label/Image credit: Dave Bushell: http://dbushell.com/2013/11/08/form-label-design/
7. PROOF DESIGNS IN GREYSCALE TO CHECK COLOUR CONTRAST
4Related: http://24ways.org/2012/colour-accessibility/
SINCE LAUNCH:
200% INCREASE IN
MOBILE TRAFFIC
43% INCREASE IN
CONVERSION RATE
-4000% REDUCTION IN
HOMEPAGE EXIT RATE ON MOBILE