Adapting to Responsive Design - On The Edge Conference #edgebrum
of 68
/68
-
Author
matt-gibson -
Category
Design
-
view
1.092 -
download
0
Embed Size (px)
description
My slides from On The Edge Birmingham 2014 on 3rd July 2014 (#edgebrum). My talk was about the principles of responsive web design with real world experiences of how Cyber-Duck approached responsive design for our own website.
Transcript of Adapting to Responsive Design - On The Edge Conference #edgebrum
HELLO I’m Matt @duckymatt #EdgeBRUM !
!
!
!
!
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.
ARE YOU BUILDING A BARRIER TO YOUR USERS?
Image Copyright: Michael White Productions & National Film Trustee & Python (Monty) Pictures
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
4 PRINCIPLES FOR RESPONSIVE DESIGN
Image Copyright: Warner Bros. & The Guber-Peters Company & PolyGram Filmed Entertainment
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/
People will forget what you said. People will forget what you did. But people will never forget how you made them feel.
MAYA ANGELOU
Photo credit: York College ISLGP http://commons.wikimedia.org/wiki/File:Maya_Angelou_visits_YCP!_2413.jpg
Source: http://mayaangelou.com/news/13/
CONTENT PARITY
1
AVOID ASSUMPTIONS
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
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
Source: 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)
GOOD RESPONSIVE DESIGN HAS PERFORMANCE AT ITS HEART
!
2timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film Corporation
ONLY LOADING WHAT WE NEED
WHEN WE NEED IT.
2
IMAGES2
BEGIN WITH OPTIMISATION
IMAGES2
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/[email protected]/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
TEST, TEST AND TEST SOME MORECopyright: The Ladd Company & Shaw Brothers & Warner Bros. http://vanamco.com/ghostlab/
ENHANCE FOR CONTEXT3
ANIMATION AS AN ENHANCEMENT
3Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
LOCATION AS AN ENHANCEMENT?
3Copyright: Metro-Goldwyn-Mayer (MGM)
ACCESSIBILITY
4
5 QUICK WINS FOR ACCESSIBILITY
4Image Copyright: Paramount Pictures & Lucasfilm
1. DESIGN FOR TOUCH BY DEFAULT
4
DOES YOUR DESIGN PASS THE “RULE OF THUMB” TEST?
!
ARE YOU RELYING 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. 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
WANT TO LEARN MORE?https://shop.smashingmagazine.com/responsive-web-design-vol-2.html
THANK [email protected] @cyberduck_uk
Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm
