adapting to responsive design - london web - feb 2015
TRANSCRIPT
ADAPTING TO A RESPONSIVE WEB DESIGN
HOW DO WE DEFINE RESPONSIVE?
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)
OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY
SO WHY GO RESPONSIVE?
3 FACTORS
Image Copyright: L.A. Films & Home Box Office (HBO)
MULTIPLE CODE BASES 1
CONTENT STRATEGY2
KNOWN UNKNOWNS3
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
SPEED MATTERSBECAUSE PERFORMANCE AFFECTS EVERYONE
2
Image Copyright: Universal Pictures
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/
CONTENT PARITY
1
ASSUMPTION IS THE ENEMY OF A GOOD CONTENT
STRATEGY
1
Image Copyright: BBC
1
Image Copyright: BBC
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
1
1
RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CLIENTS
GOOGLE ANALYTICS
CRAZYEGG
LEAD TO SALES
1
Image Copyright: Warner Bros.
OUR CONTENT DEFINES THE LAYOUTS WE NEED
NOT THE OTHER WAY AROUND
1
11
MOBILE FIRST CONTENT STRATEGY
SPEED MATTERS
2
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
SO, TO ENHANCE PERFORMANCE WE…
2
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
OFF THE SHELF FRONT-END FRAMEWORKS
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
ONLY LOADING WHAT WE NEED
WHEN WE NEED IT.
2
IMAGES2
BEGIN WITH OPTIMISATION
IMAGES2
THEN COMPRESSION
http://imageoptim.com/ https://tinypng.com/
FUTURE FRIENDLINESS
3
THE WEB DOESN’T HAVE A FIXED WIDTH
3
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
3
LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3
RESPONSIVE DESIGN WORKFLOW
3
SKETCH
3
Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
SKETCH
PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises
3
TEST, TEST AND TEST SOME MORECopyright: The Ladd Company & Shaw Brothers & Warner Bros. http://vanamco.com/ghostlab/
ACCESSIBILITY
4
7 QUICK WINS FOR ACCESSIBILITY
4Image Copyright: Paramount Pictures & Lucasfilm
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
4. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON
FORMS
4
5. CREATE A HIDDEN SKIP NAVIGATION LINK
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/
THE RESULTS
SINCE LAUNCH:
200% INCREASE IN
MOBILE TRAFFIC
43% INCREASE IN
CONVERSION RATE
-4000% REDUCTION IN
HOMEPAGE EXIT RATE ON MOBILE
MUCH TO LEARN THERE ISCopyright: Lucasfilm
THANK YOU@duckymatt @cyberduck_uk
Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm