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.

1. HELLO
I’m Matt
@duckymatt
#EdgeBRUM
!
!
!
!
!

2. @cyberduck_uk cyber-duck.co.uk

3. ADAPTING TO A
RESPONSIVE
WEB DESIGN

4. HOW DO WE DEFINE
RESPONSIVE?

5. To react quickly
and positively.
http://goo.gl/hMFzFm

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

7. ARE YOU BUILDING A
BARRIER TO YOUR USERS?
Image Copyright: Michael White Productions & National Film Trustee
& Python (Monty) Pictures

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

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

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

11. SO WHY GO
RESPONSIVE?

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

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

15. 4 PRINCIPLES FOR
RESPONSIVE DESIGN
Image Copyright: Warner Bros. & The Guber-Peters Company & PolyGram Filmed Entertainment

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

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

18. FUTURE FRIENDLY
See: http://futurefriend.ly/
CUT DOWN ON MAINTENANCE AND
SUPPORT KNOWN UNKNOWNS
3
Image Copyright: Universal TV

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/

21. CONTENT PARITY
1

22. AVOID
ASSUMPTIONS
1
Image Copyright: BBC

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/

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

25. 1

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

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

28. SPEED MATTERS
2

29. 2
moto.oakley.com

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

32. To react quickly
and positively.
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

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

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

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

38. IMAGES
2
BEGIN WITH OPTIMISATION

39. IMAGES
2
COMPRESSION
http://imageoptim.com/ https://tinypng.com/

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

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

42. 2

43. FUTURE
FRIENDLINESS
3

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

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

46. LAYOUT
AND
FLOW
3

47. LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3

48. RESPONSIVE DESIGN WORKFLOW
3

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

50. PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises

51. USE STYLE TILES
http://styletil.es/
3
Copyright: Sandollar Productions & Touchstone Pictures

52. PROTOTYPE
CREATE PATTERN LIBRARIES
http://boagworld.com/design/pattern-library/
3
Copyright: Universal Pictures & Alphaville Films

53. TEST, TEST AND TEST SOME MORE
Copyright: The Ladd Company & Shaw Brothers & Warner Bros. http://vanamco.com/ghostlab/

54. ENHANCE FOR CONTEXT
3

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

56. LOCATION AS AN
ENHANCEMENT?
3
Copyright: Metro-Goldwyn-Mayer (MGM)

57. ACCESSIBILITY
4

58. 5 QUICK WINS FOR
ACCESSIBILITY
4
Image Copyright: Paramount Pictures & Lucasfilm

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

62. 4. USE APPROPRIATE INPUT
TYPES AND ATTRIBUTES ON
FORMS
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/

64. THE RESULTS

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

66. MUCH TO LEARN THERE IS
Copyright: Lucasfilm

67. WANT TO LEARN MORE?
https://shop.smashingmagazine.com/responsive-web-design-vol-2.html

68. THANK YOU
@duckymatt
@cyberduck_uk
Copyright: Studio 37 & La Petite Reine & La Classe Américaine
& JD Prod & France 3 Cinéma & Jouror Productions & uFilm