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.
17. 3
FUTURE FRIENDLY
CUT DOWN ON MAINTENANCE AND
SUPPORT KNOWN UNKNOWNS
Image Copyright: Universal TV
See: http://futurefriend.ly/
18. ACCESSIBILITY
STYLES, BACKGROUNDS AND JAVASCRIPT
ARE PROGRESSIVE ENHANCEMENTS
Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
4
21. KAREN MCGRANE
You don't get to decide which
device people use to access
your website.
http://alistapart.com/article/your-content-now-mobile
Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
28. ANDREW CLARKE
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!
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
29. DOES RESPONSIVE =
POOR PERFORMANCE?
Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
2
31. 2
IT’S EASY TO CONFUSE
IMPLEMENTATION WITH
TECHNIQUE
Image Copyright: Metro-Goldwyn-Mayer (MGM)
32. Image Copyright: Twentieth Century Fox Film Corporation
2
MAKING PERFORMANCE A PRIORITY
!
SETTING A PERFORMANCE “BUDGET”
timkadlec.com/2013/01/setting-a-performance-budget/
33. 2
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
49. JOHN ALLSOPP
We should embrace the fact that
the web doesn’t have the same
constraints [as the printed page]
and design for this flexibility.
http://alistapart.com/article/dao/
Photo credit: TEDxNSW: http://www.flickr.com/photos/42645924@N02/3933255654/
3
62. 4
3. MAKE URLS HUMAN
READABLE AND PERMANENT
WHERE POSSIBLE
IS THIS HUMAN READABLE?
!
HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?
ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
64. 4
5. DON’T USE PLACEHOLDERS
AS A SUBSTITUTE FOR LABELS
ON FORMS
Image credit: Dave Bushell: http://dbushell.com/2013/11/08/form-label-design/
http://www.webaxe.org/placeholder-attribute-is-not-a-label/
70. Copyright: Studio 37 & La Petite Reine & La Classe Américaine
& JD Prod & France 3 Cinéma & Jouror Productions & uFilm
THANK YOU
@duckymatt
@cyberduck_uk