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.
19. ACCESSIBILITY
STYLES, BACKGROUNDS AND JAVASCRIPT
ARE PROGRESSIVE ENHANCEMENTS
4
Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
20. 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/
23. 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/
30. 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
31. DOES RESPONSIVE =
POOR PERFORMANCE?
Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
2
33. IT’S EASY TO CONFUSE
IMPLEMENTATION WITH
TECHNIQUE
2
Image Copyright: Metro-Goldwyn-Mayer (MGM)
34. GOOD RESPONSIVE DESIGN
HAS PERFORMANCE AT ITS HEART
!
2
timkadlec.com/2013/01/setting-a-performance-budget/
Image Copyright: Twentieth Century Fox Film Corporation
45. 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
59. 1. DESIGN FOR TOUCH BY
DEFAULT
4
DOES YOUR DESIGN PASS THE
“RULE OF THUMB” TEST?
!
ARE YOU RELYING ON HOVER?
60. 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
61. 3. MAKE URLS HUMAN
READABLE AND PERMANENT
WHERE POSSIBLE
HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?
ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
4
63. 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/