Embed Size (px)
DESCRIPTION
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.
Citation preview
Designing for Time TravelWhen Responsive Design Is Not Enough @burin
!http://oneperfectshot.wordpress.com/2014/05/31/back-to-the-future-1985/
#designfortimetravel
Big (D)esign 2014
Let me tell you a story.
Once upon a time:
I met a girl.
I proposed.
Me:
“Finding a ring and proposing was the hard part.”
Most wedding planning advice:
“Just let her make the decisions, Burin.”
I wouldn’t really consider myself a designer, but I do like making things.
Disclaimer:
designer*
wedding
+ = Really High Expectations
*kinda
I made invitations. Letterpressed. (photo)
I made menus. (photo)
I made paper flowers.
“Let her make the decisions?”
These were things I was not good at.
I’ll do what I’m good at!Making Websites.
So I made a website.
(photo of rsvp)
It needed an RSVP thing.
It needed to be responsive.
But that wasn’t enough :(
There was still a gap.
Responsive Design ???
Before Web Standards
Let’s Go Back In Time
http://en.wikipedia.org/wiki/WABAC_machine
Best viewed in 800x600
Best viewed with
Flash required
The NowWe’ve Come a Long Way
web standards
http://www.zeldman.com/category/blue-beanie-day/
adaptive layouts
media queries
media queries
adaptive layout+
+
= ResponsiveDesign*
*for the most part?
Responsive Design is awesome.
Responsive Design is awesome, but.
Responsive Design is not enoughWe need to design for Time Travel
Responsive Design ???
Let’s talk about theFuture of Responsive Design
back to Once Upon a Time
I had to keep updating the wedding site every day, because something different was important as we got closer.
http://xkcd.com/974/
https://oneperfectshot.wordpress.com/2014/08/18/the-time-machine-1960/
Build a Time MachineMy own personal time machine
Designed for Time Travel
My Wedding Website
RSVPVenue/Time What to Expect
AccommodationsInstagram/
PhotosProposal Story/Wedding Party
Months Before
RSVPVenue/Time What to Expect
AccommodationsInstagram/
PhotosProposal Story/Wedding Party
Weeks Before
RSVPVenue/Time What to Expect
AccommodationsInstagram/
PhotosProposal Story/Wedding Party
Day of Wedding
RSVPVenue/Time What to Expect
AccommodationsInstagram/
PhotosProposal Story/Wedding Party
Night of Wedding
RSVPVenue/Time What to Expect
AccommodationsInstagram/
PhotosProposal Story/Wedding Party
Day after Wedding
RSVPVenue/Time What to Expect
AccommodationsInstagram/
PhotosProposal Story/Wedding Party
I know what you’re thinking.
“Not everything can be designed for time travel, Burin.”
Normal people:
Time Travel is Serious Business®.
In that case, make sure you’re not “unstuck in time”.
“Unstuck in time?”
creative commons licensed (BY-NC-SA) flickr photo by x-ray delta one: http://flickr.com/photos/x-ray_delta_one/3928200642
Make your experiences timeless
Story time: The Olympics
@moubry:
“I want to see the best figure skating performances, ever.”
(screenshot of timely information)
Timely, but Wrong
but this was weeks after the olympics. Sean didn’t care “what
happened last night”.
Let’s talk about What Could Be
for the Olympics.
http://www.nytimes.com/interactive/2012/08/01/sports/olympics/racing-against-history.html?_r=0
Timeless Content
This kind of thinking isn’t limited to websites.
http://www.viewsedge.com/2012/10/safety-not-guaranteed-2012.html
A time-aware experience with apps
A typical Travel Itinerary
mostly the same…
Imagine what could be.
time
Responsive Design is not enough.
We need to design for time
travel.
Your Role: Doer
Front-end developers, designers, can design and create these experiences.
Your Role: Influencer
Designers can sway others to expect these experiences.
Your Role: Innovator
Designers can create entirely new experiences, beyond what we’ve seen today.
This is hard.
“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
”
Who else will do it?
Who else will expect it?
designfortimetravel.com
@burin
https://twitter.com/RealCoryEdwards/status/507556081988427776/photo/1
Tools for the Journey
Let’s talk about how we can do this.
Prioritizing content?
We already do this. Examples: “Above the fold”Hierarchy.
We need to put ourselves in context.
Exercise: Boarding Pass
ArrivalGate/Time
Passenger Name
DepartureGate/Time
Flight Number Seat Number Baggage Claim
ArrivalGate/Time
Passenger Name
DepartureGate/Time
Flight Number Seat Number Baggage Claim
What is most important before you get to the airport?
ArrivalGate/Time
Passenger Name
DepartureGate/Time
Flight Number Seat Number Baggage Claim
What is most important for security?
ArrivalGate/Time
Passenger Name
DepartureGate/Time
Flight Number Seat Number Baggage Claim
What is most important when you’re getting off the plane?
Timed content
Scheduled Posts
Expiration Dates
Take advantage of streams
Integrate Feeds
Instagram, tumblr, tweets.
Feed of blog posts
Time media query?
CSS changes depending on the time
CSS changes depending on the time
event start
event end
week before
default-time.css week-before.css day-of.css after.css
How?
Demo
designfortimetravel.com
@burin
