Post on 17-Aug-2014
description
ADAPTING TO A RESPONSIVE WEB DESIGN
HELLO I’m Matt @duckymatt !
!
!
!
!
!
HOW DO WE DEFINE RESPONSIVE?
To react quickly and positively.
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 HADN’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
ASSUMPTIONS
1
Image Copyright: BBC
You don't get to decide which device people use to access
your website.
KAREN MCGRANE
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 CUSTOMERS
GOOGLE ANALYTICS
CRAZYEGG
LEAD FORENSICS
1
Image Copyright: Warner Bros.
OUR CONTENT DEFINES THE LAYOUTS WE NEED
!
NOT THE OTHER WAY AROUND
1
SPEED MATTERS
2
If you were data roaming on an iPhone, at $9 per Mb data
roaming, that web page would cost me $785 to look at on my
iPhone!
ANDREW CLARKE
http://alistapart.com/article/dao/
Photo credit: Jeffrey Zeldman: http://www.flickr.com/photos/zeldman/12621077243
http://dandelion-burdock.com/articles/view/the-weight-of-the-web
DOES RESPONSIVE = POOR PERFORMANCE?
Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
2
To react quickly and positively.
2
IT’S EASY TO CONFUSE IMPLEMENTATION WITH
TECHNIQUE
2
Image Copyright: Metro-Goldwyn-Mayer (MGM)
MAKING PERFORMANCE A PRIORITY !
SETTING A PERFORMANCE “BUDGET”
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/
TRYING TO DO EVERYTHING
2
THEY MAKE DESIGN DECISIONS FOR YOU
2
Photo credit: James Bowe: http://www.flickr.com/photos/jamesrbowe/4231509266/
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/
IMAGES2
27 KB 266 KB
USING THE RIGHT IMAGE FOR THE RIGHT TASK
CACHING2
SERVING FILES FASTER
http://www.cloudflare.com/ https://www.varnish-cache.org/
2
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
LAYOUT AND FLOW
3
LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3
RESPONSIVE DESIGN WORKFLOW
3
SKETCH
3
Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises
PROTOTYPECREATE PATTERN LIBRARIEShttp://styletil.es/
3
Copyright: Universal Pictures & Alphaville Films
ENHANCE FOR CONTEXT3
ANIMATION AS AN ENHANCEMENT
3Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
ACCESSIBILITY
4
7 QUICK WINS FOR ACCESSIBILITY
4Copyright: Warner Bros.
1. MAKE THE PURPOSE OF ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
AVOID LINK ANCHORS THAT PRESUME THE INTERACTION METHOD LIKE “CLICK HERE”
4
2. CREATE A HIDDEN SKIP NAVIGATION LINK
4
3. MAKE URLS HUMAN READABLE AND PERMANENT
WHERE POSSIBLE
IS THIS HUMAN READABLE? !
HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
4
4. USE DESCRIPTIVE ALT TAGS FOR WHEN AN IMAGE CANNOT BE SHOWN.
4
5. 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/
6. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON
FORMS
4
7. PROOF DESIGNS IN GREYSCALE TO CHECK COLOUR CONTRAST
4
ALSO USE COLOUR BLINDNESS SIMULATORS AND COLOUR CONTRAST CHECK TOOLS
Related: http://24ways.org/2012/colour-accessibility/
THE RESULTS
SINCE LAUNCH:
200% INCREASE IN
MOBILE TRAFFIC
2.07% INCREASE IN
CONVERSION RATE
-4000% REDUCTION IN
HOMEPAGE EXIT RATE ON MOBILE
MUCH TO LEARN THERE IS
Copyright: 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