Responsive Timeline

http://www.nytimes.com/interactive/2013/07/13/nyregion/nyc-noise-timeline.html?ref=multimedia#/#time228_7605

This is a quite straightforward story – a timeline for the war of noise in the Big Apple. The thing I particularly love about this story is its responsive design.

The timeline starts from 1905, with the little gray dot on the left.

Screen Shot 2013-11-12 at 10.23.11 PM

As you scroll down, you can view the content from different periods.  But the gray dot also follows your movement. When I was browsing the content of the 1950s, the gray dot has moved to the middle.

Screen Shot 2013-11-12 at 10.26.28 PM

By looking into the source, I found that this effect is achieved by a javascript that creates a path for the dot.

I really like how considerate the design is. It is really convenient for the readers to follow where they are. Especially if it’s a timeline, it helps you keep better track of the order of incidents and have a better idea of how things progress.

Actually the responsive design is the only obvious interactive design. And I definitely think it’s necessary and not distracting at all.

 

_________________________________________________________________________

Also I found an absolutely amazing one also in NY times, it uses panorama view of the house of Syrian Refugees, just like the Google Street View. It actually uses flash plugin. Just want to share with you guys~

http://www.nytimes.com/interactive/2013/09/05/world/middleeast/Syrian-Refugees-in-Lebanon.html?ref=multimedia&_r=0

Screen Shot 2013-11-12 at 10.11.39 PMAt first glance, this picture is just an ordinary one, but wait until you click the “Click and Drag” icon on the bottom right. It is actually a panorama of the house, just like Google Street View. You can see the other walls, the ceiling and the floor. It’s just like you are standing in the room with them.

Screen Shot 2013-11-12 at 10.15.52 PM Screen Shot 2013-11-12 at 10.15.16 PM

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s