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.

1. ADAPTING TO A
RESPONSIVE
WEB DESIGN

2. HELLO
I’m Matt
@duckymatt
!
!
!
!
!
!

3. @cyberduck_uk
cyber-duck.co.uk

4. HOW DO WE DEFINE
RESPONSIVE?

5. To react quickly
and positively.

6. Responsive web design is a
design approach that aims to
create interfaces that react
quickly and positively to the
user’s conditions.

7. Image Copyright: Walt Disney Pictures & Tim Burton Pictures
PEOPLE WILL ACCESS OUR
WEBSITES IN WAYS WE HADN’T
EVEN CONSIDERED YET

8. THE PREVIOUS STATE(S) OF
OUR OWN WEBSITE
“DESKTOP” SITE
“TABLET” SITE
“MOBILE” SITE
(2011)
(LATER 2011)
(2012)
*Not to scale :)

9. OUR SEPARATE MOBILE WEBSITES:
A STOP-GAP STRATEGY

10. SO WHY GO
RESPONSIVE?

11. Image Copyright: L.A. Films & Home Box Office (HBO)
3 FACTORS

12. 1
MULTIPLE CODE BASES
2
CONTENT STRATEGY
3
KNOWN UNKNOWNS

14. SETTING 4 GOALS FOR A
RESPONSIVE DESIGN
Image Copyright: Chartoff-Winkler Productions & United Artists

15. CONTENT
PARITY
THE SAME CONTENT
SHOULD BE AVAILABLE
ON ALL PLATFORMS
Credit: http://wtfmobileweb.com/
1

16. SPEED
MATTERS
2
BECAUSE PERFORMANCE
AFFECTS EVERYONE
Image Copyright: Universal Pictures

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

19. 1
CONTENT PARITY

20. 1
ASSUMPTIONS
Image Copyright: BBC

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/

22. 1
Credit: http://xkcd.com/773/

23. 1

24. RESEARCHING
CONTENT STRATEGY
1
SPEAKING TO EXISTING CUSTOMERS
GOOGLE ANALYTICS
CRAZYEGG
LEAD FORENSICS
Image Copyright: Warner Bros.

25. 1
OUR CONTENT DEFINES
THE LAYOUTS WE NEED
!
NOT THE OTHER WAY AROUND

26. 2
SPEED MATTERS

27. 2
moto.oakley.com

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

30. 2
To react quickly
and positively.

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

34. 2
OFF THE SHELF
FRONT-END FRAMEWORKS

35. 2
TRYING TO DO EVERYTHING
Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/

36. THEY MAKE DESIGN
DECISIONS FOR YOU
Photo credit: James Bowe: http://www.flickr.com/photos/jamesrbowe/4231509266/
2

37. KNOWING YOUR CODE FROM
TOP TO BOTTOM IS ESSENTIAL TO
HAVE TOTAL CONTROL OVER IT
2
Image credit: http://css-tricks.com/

38. 2
WE CREATED A MINI-LIBRARY THAT
IS SIMPLE, FLEXIBLE, LIGHT AND
DOESN’T MAKE DECISIONS FOR YOU
http://cyber-duck.github.io/hoisin.scss/

39. 2
ONLY LOADING
WHAT WE NEED
WHEN WE NEED IT.

40. JAVASCRIPT
http://requirejs.org/
2

41. 2
CSS
http://sass-lang.com/

42. IMAGES
BEGIN WITH OPTIMISATION
2

43. 2
IMAGES
THEN COMPRESSION
http://imageoptim.com/
https://tinypng.com/

44. 2
IMAGES
USING THE RIGHT IMAGE FOR THE RIGHT TASK
27 KB
266 KB

45. 2
CACHING
SERVING FILES FASTER
http://www.cloudflare.com/
https://www.varnish-cache.org/

46. 2

47. 3
FUTURE
FRIENDLINESS

48. 3
THE WEB DOESN’T HAVE
A FIXED WIDTH

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

50. LAYOUT
AND
FLOW
3

51. 3
LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE

52. 3
RESPONSIVE DESIGN WORKFLOW

53. 3
SKETCH
Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures

54. 3
PROTOTYPE
Copyright: Paramount Pictures & Marvel Enterprises

55. 3
CREATE PATTERN LIBRARIES
PROTOTYPE
Copyright: Universal Pictures & Alphaville Films
http://styletil.es/

56. ENHANCE FOR CONTEXT
3

57. Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
ANIMATION AS AN
ENHANCEMENT
3

58. 4
ACCESSIBILITY

59. Copyright: Warner Bros.
4
7 QUICK WINS FOR
ACCESSIBILITY

60. 4
1. MAKE THE PURPOSE OF
ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
AVOID LINK ANCHORS THAT PRESUME THE
INTERACTION METHOD LIKE “CLICK HERE”

61. 4
2. CREATE A HIDDEN SKIP
NAVIGATION LINK

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

63. 4
4. USE DESCRIPTIVE ALT TAGS
FOR WHEN AN IMAGE
CANNOT BE SHOWN.

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/

65. 4
6. USE APPROPRIATE INPUT
TYPES AND ATTRIBUTES ON
FORMS

66. Related: http://24ways.org/2012/colour-accessibility/
7. PROOF DESIGNS IN GREYSCALE
TO CHECK COLOUR CONTRAST
ALSO USE COLOUR BLINDNESS SIMULATORS
AND COLOUR CONTRAST CHECK TOOLS
4

67. THE RESULTS

68. SINCE LAUNCH:
200%
2.07% -4000%
INCREASE IN
MOBILE
TRAFFIC
INCREASE IN
CONVERSION
RATE
REDUCTION IN
HOMEPAGE EXIT
RATE ON MOBILE

69. Copyright: Lucasfilm
MUCH TO LEARN THERE IS

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