I'm going to talk about time travel. Responsive Web Design is an approach to optimizing your experience depending on what *device* you're using, but what approaches do we have for when websites get crazy and need to adapt to what *time* you are viewing it? This talk will discuss challenges faced when designing sites that need to respond to time. We will also discuss tools and techniques to use that help websites become more dynamic (is there such a thing as a media query for time?). The case study for this talk will be a wedding website. As the date for the wedding approaches and passes, visitors will care about different pieces of information. 6 months out, 3 months out, a week before, the night before, the day of, a week after, and way-way after. Another example that will be used is how the Olympics website would've been designed using these techniques.

1. Designing for
Time Travel
When Responsive
Design Is Not Enough @burin
!
Big (D)esign 2014
#designfortimetravel
http://oneperfectshot.wordpress.com/2014/05/31/back-to-the-future-1985/

2. Let me tell you a story.

3. Once upon a time:

4. I met a girl.

5. I proposed.

6. Me:
“Finding a ring and
proposing was the hard
part.”

7. Most wedding planning advice:
“Just let her make the
decisions, Burin.”

8. Disclaimer:
I wouldn’t really consider
myself a designer,
but I do like making things.

9. designer*
+ = Really High
wedding
Expectations
*kinda

13. I made invitations. Letterpressed. (photo)

14. I made menus. (photo)

15. I made paper flowers.

16. “Let her make the
decisions?”

17. These were things I was not good at.

18. I’ll do what I’m good at!
Making Websites.

19. So I made a website.

20. It needed an RSVP thing.
(photo of rsvp)

21. It needed to be responsive.

23. But that wasn’t enough :(

24. There was still a gap.

25. Responsive
Design ???

26. Let’s Go Back In Time
Before Web Standards
http://en.wikipedia.org/wiki/WABAC_machine

27. Best viewed in 800x600

28. Best viewed with

29. Flash required

30. The Now
We’ve Come a Long Way

31. web standards
http://www.zeldman.com/category/blue-beanie-day/

32. adaptive layouts

33. media queries

34. media queries
+
adaptive layout
+
= Responsive
Design*
*for the most part?

35. Responsive Design
is awesome.

36. Responsive Design
is awesome, but.

37. Responsive Design
i s not enough
We need to design for
Time Travel

38. Responsive
Design ???

39. Let’s talk about the
Future of Responsive Design

40. back to Once Upon a Time

41. I had to keep updating the
wedding site every day, because
something different was
important as we got closer.

42. http://xkcd.com/974/

43. Build a Time Machine
My own personal
time machine
https://oneperfectshot.wordpress.com/2014/08/18/the-time-machine-1960/

44. Designed for Time Travel

45. My Wedding Website
Venue/Time What to Expect RSVP
Accommodations
Instagram/
Photos
Proposal Story/
Wedding Party

46. Months Before
Venue/Time What to Expect RSVP
Accommodations
Instagram/
Photos
Proposal Story/
Wedding Party

47. Weeks Before
Venue/Time What to Expect RSVP
Accommodations
Instagram/
Photos
Proposal Story/
Wedding Party

48. Day of Wedding
Venue/Time What to Expect RSVP
Accommodations
Instagram/
Photos
Proposal Story/
Wedding Party

49. Night of Wedding
Venue/Time What to Expect RSVP
Accommodations
Instagram/
Photos
Proposal Story/
Wedding Party

50. Day after Wedding
Venue/Time What to Expect RSVP
Accommodations
Instagram/
Photos
Proposal Story/
Wedding Party

51. I know what you’re thinking.

52. Normal people:
“Not everything can be
designed for time travel,
Burin.”

53. Time Travel is
Serious Business®.

54. In that case, make sure you’re
not “unstuck in time”.

55. “Unstuck in time?”

56. Make your experiences
timeless
creative commons licensed (BY-NC-SA) flickr photo by x-ray delta one:
http://flickr.com/photos/x-ray_delta_one/3928200642

57. Story time: The Olympics

58. @moubry:
“I want to see the best figure
skating performances, ever.”

60. (screenshot of timely information)
Timely, but Wrong

61. but this was weeks after the
olympics. Sean didn’t care “what
happened last night”.

62. Let’s talk about
What Could Be
for the Olympics.

63. Timeless Content
http://www.nytimes.com/interactive/2012/08/01/sports/
olympics/racing-against-history.html?_r=0

64. This kind of thinking isn’t
limited to websites.

65. A time-aware
experience with apps
http://www.viewsedge.com/2012/10/safety-not-guaranteed-2012.html

66. A typical Travel Itinerary

67. mostly the same…

68. Imagine what could be.
time

69. Responsive Design is not
enough.
We need to design for time
travel.

70. Your Role: Doer

71. Front-end developers,
designers, can design and create
these experiences.

72. Your Role: Influencer

73. Designers can sway others to
expect these experiences.

74. Your Role: Innovator

75. Designers can create entirely new
experiences, beyond what we’ve seen
today.

76. This is hard.

77. “We don't design for browsers.
We don't design for mobile devices.
We don't design for tablets, phablets,
touch screens, and everything else.
We design for people.
”
— Jeffrey Zeldman
An Event Apart Seattle 2014

78. Who else will do it?
Who else will expect it?

79. designfortimetravel.com
@burin

80. Tools for
the Journey
https://twitter.com/RealCoryEdwards/status/507556081988427776/photo/1

81. Let’s talk about how we can
do this.

82. Prioritizing content?
We already do this. Examples:
“Above the fold”
Hierarchy.

83. We need to put ourselves in context.

84. Exercise: Boarding Pass
Arrival
Gate/Time
Passenger
Name
Departure
Gate/Time
Flight Number Seat Number Baggage Claim

85. What is most important before you
get to the airport?
Arrival
Gate/Time
Passenger
Name
Departure
Gate/Time
Flight Number Seat Number Baggage Claim

86. Arrival
Gate/Time
What is most important for
security?
Passenger
Name
Departure
Gate/Time
Flight Number Seat Number Baggage Claim

87. Arrival
Gate/Time
What is most important when
you’re getting off the plane?
Passenger
Name
Departure
Gate/Time
Flight Number Seat Number Baggage Claim

88. Timed content

89. Scheduled Posts

90. Expiration Dates

91. Take advantage of streams

92. Integrate Feeds

93. Instagram, tumblr, tweets.

94. Feed of blog posts

95. Time media query?

96. CSS changes depending on the time

97. CSS changes depending
on the time
default-time.css week-before.css day-of.css after.css
event start
event end
week before

98. How?

99. Demo

100. designfortimetravel.com
@burin