Embed Size (px)
DESCRIPTION
Slides from my talk on 11 September 2014 at Figaro Digital's Mobile Seminar on the principles of responsive web design. #FigDigMobile
Citation preview
HELLO I’m Matt @duckymatt Figaro Digital !
!
!
!
!
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/
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
1
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
11
MOBILE FIRST CONTENT STRATEGY
!
!
SPEED MATTERS
2
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 !
2timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film Corporation
Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/
2
CUT DOWN ON FRAMEWORK BLOAT
http://cyber-duck.github.io/hoisin.scss/
…AND INSTEAD CREATED OUR OWN MINI-FRAMEWORK
2
ONLY LOADING WHAT WE NEED
WHEN WE NEED IT.
2
IMAGES2
27 KB 266 KB
USING THE RIGHT IMAGE FOR THE RIGHT TASK
IMAGES2
COMPRESSION
http://imageoptim.com/ https://tinypng.com/
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
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
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. 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 YOU@duckymatt @cyberduck_uk
Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm
