Slides from my talk at Digital Shoreditch 2015 (https://twitter.com/DigiShoreditch) given on 11 May 2015.

1. HELLO.I’m Matt
@duckymatt
#DS15

2. @cyberduck_uk cyber-duck.co.uk

3. DESIGNING
RESPONSIVE
EXPERIENCES
Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt

4. SO,
HOW DO
WE DEFINE
RESPONSIVE
DESIGN?
Image credit: Hartswood Films, BBC Wales & Masterpiece (Sherlock, 2010)

5. MEDIA QUERIES
FLUID GRIDS
FLEXIBLE IMAGES

6. DELIVERING ELEGANT VISUAL
EXPERIENCES, ACROSS JUST
ABOUT ANY DEVICE.

8. JOB
DONE,
RIGHT?
Image credit: Broadway Video, Little Stranger, NBC Universal Television (30 Rock, 2006)

9. WELL,
NOT
QUITE
Image credit: Carolco Pictures, Pacific Western, Lightstorm Entertainment, Canal+ & T2 Productions (Terimator 2: Judgment Day, 1991)

10. THE TRUE CHALLENGES OF RWD
GO BEYOND MEDIA QUERIES AND
MAKING EVERYTHING STRETCHY.

11. CONTENT STRATEGY
PERFORMANCE
FUTURE FRIENDLINESS

12. MATTER?
WHY DOES ALL OF THIS
@duckymatt

13. Source: http://adwords.blogspot.co.uk/2015/05/building-for-next-moment.html
MOBILE WEB VS DESKTOP WEB
INTERNET
USERS
2007 - 2015
Source: Kleiner Perkins Caufield Byers, Mary Meeker’s Internet Trends 2011 http://www.kpcb.com/insights/2011-internet-trends
DESKTOP
MOBILE
@duckymatt
A CRUDE GRAPH…

14. #MOBILEGEDDON
Image credit: Twentieth Century Fox, & Centropolis Entertainment (Independence Day, 1996) @duckymatt

15. @duckymatt

16. CONTENT
STRATEGY
@duckymatt

17. Content strategy plans for the creation, publication, and
governance of useful, usable content.
Define not only which content will be published, but why
we’re publishing it in the first place.
KRISTINA HALVORSON
Source: http://alistapart.com/article/thedisciplineofcontentstrategy @duckymatt

18. ASSUMPTION IS
THE ENEMY OF A
GOOD CONTENT
STRATEGY
@duckymatt

19. BUT AREN’T MOBILE USERS
ALWAYS ‘ON THE GO’?
Image credit: 20th Century Fox Television & Greenway Productions (Batman, 1966) @duckymatt

20. 60% OF SMARTPHONE DATA
IS USED INDOORS
Source: http://www.cennydd.com/blog/designing-with-context
Image credit: Fox 2000 Pictures, Regency Enterprises, Linson Films, Atman Entertainment, Knickerbocker Films & Tarius Film (Fight Club, 1999)
@duckymatt

21. 39% OF PEOPLE USE THEIR
MOBILE IN THE LOO
Source: http://www.wiyamobile.net/pitch.pdf
Image credit: Bwark Productions & Young Films (The Inbetweeners, 2008)
@duckymatt

22. Source / Credit: http://xkcd.com/773/
@duckymatt

23. CONTENT
PARITY
YOUR CORE CONTENT
SHOULD BE AVAILABLE
ON ALL PLATFORMS
@duckymatt

24. Credit: http://wtfmobileweb.com/ @duckymatt

25. Credit: http://wtfmobileweb.com/ @duckymatt

26. Credit: http://wtfmobileweb.com/
@duckymatt

27. @duckymatt

28. SO HOW CAN WE
AVOID ASSUMPTIONS?
@duckymatt

29. CHALLENGE ASSUMPTIONS
WITH RESEARCH
Image credit: The Ladd Company, Shaw Brothers and Warner Bros. (Blade Runner, 1982) @duckymatt

30. WRITE USER STORIES
@duckymatt

31. AUDIT YOUR EXISTING CONTENT
Image credit: Nintendo & Capcom (The Legend of Zelda: A Link to the Past, 1991) @duckymatt

32. MOBILE FIRST
DESIGN
Check out: http://abookapart.com/products/mobile-first
@duckymatt

33. MOBILE FIRST
DESIGN
CONTENT
STRATEGY
@duckymatt

34. AVOID CONTENT BLOAT
Image credit: Imagine Entertainment (The Nutty Professor, 1996) @duckymatt

36. @duckymatt

37. CONTENT
STRUCTURE
YOU CAN’T CREATE GREAT
EXPERIENCES IF YOU DON’T KNOW
WHAT YOUR CONTENT IS MADE OF
@duckymatt

38. OUR CONTENT
WILL NEED
TO BECOME
MORE FLEXIBLE
THAN EVER
Image credit: Sunbow Productions, Marvel Productions & Hasbro (The Transformers, 1984) @duckymatt

39. PERFORMANCE
@duckymatt

40. THE WEB TODAY…
Image credit: 4Kids Productions Inc (Pokémon, 1998) @duckymatt

41. TRANSFER
SIZE
2010 2015
Source: http://httparchive.org/trends.php
700KB
2,000 KB
@duckymatt

42. IF WE CONTINUE AT THIS RATE
THE AVERAGE PAGE SIZE IN 2020
WILL BE OVER 5MB!
@duckymatt

43. 71% OF PEOPLE EXPECT
WEBSITES TO LOAD AS
QUICKLY (OR FASTER) ON
THEIR MOBILE PHONE
See: http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf @duckymatt

44. OUR USERS DON’T WANT
TO BE LEFT WAITING
Image credit: Wolper Pictures Ltd (Willy Wonka & The Chocolate Factory, 1971) @duckymatt

45. BRAD FROST
Photo credit: John Davey: http://www.flickr.com/photos/johndavey/8891059281/
Source: http://bradfrostweb.com/blog/post/performance-as-design/
It’s time for us to treat
performance as an
essential design
feature, not just as a
technical best practice
@duckymatt

46. PERFORMANCE AT THE HEART OF
ALL DESIGN DECISIONS
Image credit: Paramount Pictures, Robert Stigwood Organisation & Allan Carr Production (Grease, 1978) @duckymatt

47. SETTING A
PERFORMANCE BUDGET
Image credit: Twentieth Century Fox Film Corporation (Speed, 1994) @duckymatt

48. PAGE LOAD SPEED
HTTP REQUESTS
SIZE OF THE PAGE
@duckymatt

49. http://whatdoesmysitecost.com/
@duckymatt

50. Check out: http://danielmall.com/articles/how-to-make-a-performance-budget/
@duckymatt

51. PERCEPTION OF SPEED MATTERS
Source: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?_r=0
Image credit:Children’s Television Workshop & SesameWorkshop (Sesame Street, 1969-)
@duckymatt

52. MAKE THE FIRST PAGE
RENDER BLAZING FAST
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt

53. LOAD ONLY CRITICAL CONTENT
THAT IS VISIBLE TO THE USER
ON FIRST PAGE LOAD
https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#structure
@duckymatt

54. FUTURE
FRIENDLINESS
Check out: http://futurefriendlyweb.com/ @duckymatt

55. THE FUTURE IS ALREADY HERE
Image credit: Universal Pictures, Amblin Entertainment, U-Drive Productions (Back to the Future, 1985) @duckymatt

56. Photo credit: TechStage: https://www.flickr.com/photos/bestboyzde/15710950965 @duckymatt

57. Photo credit: Orde Saunders Liew: https://www.flickr.com/photos/79578508@N08/10081419044/ @duckymatt

58. Photo credit: Christopher Schmidt: https://www.flickr.com/photos/crschmidt/2224975112/ @duckymatt

59. Photo credit: Jon Fingas: https://www.flickr.com/photos/jfingas/15770620452/ @duckymatt

60. Photo credit: Mobilyazilar: https://www.flickr.com/photos/mobilyazilar/16172156273 @duckymatt

61. Source & Image Credit: http://arstechnica.com/gadgets/2012/03/hands-on-gesture-voice-and-the-many-inputs-of-samsungs-smart-tv/ @duckymatt

62. @duckymatt

63. Photo credit: David Carrington:https://www.flickr.com/photos/thox/5053262651 @duckymatt

64. Source & Image Credit: http://www.bmwblog.com/2008/03/05/more-info-on-the-bmw-full-in-car-web-access/ @duckymatt

65. A HOSTILE ENVIRONMENT
Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt

66. Source: http://outdatedbrowser.com/ @duckymatt
DIFFERENT BROWSERS

67. @duckymatt
SLOW CONNECTIONS

68. Photo credit: LoKan Sardari: https://www.flickr.com/photos/lokan/17289001432/ @duckymatt
TINY TO HUGE SCREENS

69. Photo credit:Paul: https://www.flickr.com/photos/-macjasp/7056169897 @duckymatt
RETINA AND NON RETINA

70. Image credit: Paramount Pictures & Industrial Light & Magic (Star TrekIV: The Voyage Home, 1986) @duckymatt
NEW INPUTS

71. @duckymatt

72. WE DON’T GET TO DECIDE HOW
PEOPLE ACCESS OUR CONTENT
@duckymatt

73. DO WEBSITES NEED TO LOOK
EXACTLY THE SAME IN EVERY
BROWSER?
@duckymatt

74. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
@duckymatt

75. Image credit: Julien Douvier: http://www.juliendouvier.com/Animated-photography-Escalators
PROGRESSIVE ENHANCEMENT
Source: http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/
@duckymatt

76. DESIGN FOR TOUCH
BY DEFAULT
AND ENHANCE WITH TOUCH GESTURES
Image credit: Twentieth Century Fox, Dreamworks SKG, Cruise/Wagner Productions, Blue Tulip Productions, Ronald Shusett/Gary Goldman (Minority Report, 2002) @duckymatt

77. FORM ENHANCEMENT
USING INPUT TYPES AND ATTRIBUTES
Image credit: http://blog.teamtreehouse.com/use-input-element
@duckymatt

78. ANIMATION AS AN
ENHANCEMENT
Source / Image credit: Dann Petty: https://dribbble.com/shots/1621359-Open-Close-Icon-Animation @duckymatt

79. LOCATION,
LOCATION,
LOCATION
@duckymatt
Check out: http://canibbq.com

80. CONDITIONAL LOADING
GREAT FOR ADAPTIVE EMBEDDING
@duckymatt

81. WE’LL NEED TO
ADAPT TO THESE
CHALLENGES
Image credit: Paramount Pictures (Airplane!, 1980)
@duckymatt

82. RESPONSIVE DESIGN
GOES MUCH FURTHER
THAN MEDIA QUERIES
AND FLUID GRIDS
Image credit: Pixar Animation Studios & Walt Disney (Toy Story, 1995) @duckymatt

83. 3 FACTORSImage credit: L.A. Films and HBO (¡Three Amigos!, 1986) @duckymatt

84. CONTENT STRATEGY
PERFORMANCE
FUTURE FRIENDLINESS
@duckymatt

85. MAKE TRULY
RESPONSIVE EXPERIENCES
Image credit: Warner Bros, Village Roadshow Pictures, Groucho II Partnership & Silver Pictures (The Matrix, 1999) @duckymatt

86. THAT WE
Image credit: Walt Disney and Pixar Studios. (Up, 2009) @duckymatt

87. OUR CLIENTS
Image credit: Twentieth Century Fox Film Corporation, Gordon Company, & Silver Pictures (Die Hard, 1988) @duckymatt

88. AND OUR USERS
Image credit: Chartoff-Winkler Productions and United Artists (Rocky, 1976) @duckymatt

89. WILL
Image credit: Warner Bros, Village Roadshow Pictures, A&E Television Network, Bazmark Films, Red Wagon Entertainment and Spectrum Films (The Great Gatsby, 2013) @duckymatt

90. THANK YOU
@duckymatt
Copyright: Studio 37 & La Petite Reine & La Classe Américaine
& JD Prod & France 3 Cinéma & Jouror Productions & uFilm (The Artist, 2011)
#DS15