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.
Text of Adapting to Responsive Design - On The Edge Conference #edgebrum
HELLO Im Matt @duckymatt #EdgeBRUM ! ! ! ! !
ADAPTING TO A RESPONSIVE WEB DESIGN
HOW DO WE DEFINE RESPONSIVE?
To react quickly and positively. http://goo.gl/hMFzFm
Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the users 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 HADNT 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 Ofce (HBO)
MULTIPLE CODE BASES1 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
FUTURE FRIENDLY See: http://futurefriend.ly/ CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS 3 Image Copyright: Universal TV
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.ickr.com/photos/webdagene/6149954950/
Credit: http://xkcd.com/773/ 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.ickr.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
ITS EASY TO CONFUSE IMPLEMENTATION WITH TECHNIQUE 2 Image Copyright: Metro-Goldwyn-Mayer (MGM)
GOOD RESPONSIVE DESIGN HAS PERFORMANCE AT ITS HEART ! 2 timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film Corporation
We should embrace the fact that the web doesnt have the same constraints [as the printed page] and design for this exibility. JOHN ALLSOPP http://alistapart.com/article/dao/ Photo credit: TEDxNSW: http://www.ickr.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