Embed Size (px)
DESCRIPTION
We can no longer predict how people are accessing our websites now, let alone in a few years’ time when the technology people use to access the web will inevitably diverge even further and perhaps in ways we haven’t even considered yet. Rather than seeing this unpredictability and lack of control as a problem, we should embrace these ‘known unknowns’ and the inherent flexibility of the web. Put simply, responsive web design is about being more flexible and assuming less about our users, from how they’re accessing our websites and what technology they’re using to their environment. This talk will discuss the four tenets of good responsive design: content parity, performance, future friendliness and accessibility against a backdrop of Matt's experiences designing and building responsive websites over the past 3 years with plenty of useful tips and takeaways along the way.
Citation preview
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/
2
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
USE STYLE TILEShttp://styletil.es/
3
Copyright: Sandollar Productions & Touchstone Pictures
PROTOTYPECREATE PATTERN LIBRARIEShttp://boagworld.com/design/pattern-library/
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
IF YOUR LINKS SAY “CLICK HERE” YOU’RE DOING IT WRONG
4
2. CREATE A HIDDEN SKIP NAVIGATION LINK
4
3. MAKE URLS HUMAN READABLE AND PERMANENT
WHERE POSSIBLE
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
43% 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
