This document discusses adapting websites to responsive web design. It defines responsive design as creating interfaces that react quickly and positively to user conditions. It notes that people access websites in many ways, so responsive design aims to have one code base that works across devices rather than separate mobile sites. The document outlines four goals for responsive design: content parity across devices, speed optimization, future-proofing the design, and accessibility. It provides examples and tips for achieving each goal, such as conducting content audits, optimizing images, caching, and designing first for touch interfaces. The results of implementing responsive design on one website included increased mobile traffic and conversions as well as reduced exit rates.
18. ACCESSIBILITY
STYLES, BACKGROUNDS AND JAVASCRIPT
ARE PROGRESSIVE ENHANCEMENTS
4
Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
21. You don't get to decide which
device people use to access
your website.
KAREN MCGRANE
http://alistapart.com/article/your-content-now-mobile
Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
28. 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
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. IT’S EASY TO CONFUSE
IMPLEMENTATION WITH
TECHNIQUE
2
Image Copyright: Metro-Goldwyn-Mayer (MGM)
32. MAKING PERFORMANCE A PRIORITY
!
SETTING A PERFORMANCE “BUDGET”
2
timkadlec.com/2013/01/setting-a-performance-budget/
Image Copyright: Twentieth Century Fox Film Corporation
34. 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
2
41. 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
52. 1. MAKE THE PURPOSE OF
ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
IF YOUR LINKS SAY “CLICK HERE”
YOU’RE DOING IT WRONG
4
53. 2. MAKE URLS HUMAN
READABLE AND PERMANENT
WHERE POSSIBLE
HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?
ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
4
54. 3. DESIGN FOR TOUCH BY
DEFAULT
4
DOES YOUR DESIGN PASS THE
“RULE OF THUMB” TEST?
!
ARE YOU RELYING ON HOVER?
56. 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/