Build sleek, professional timelines with Timetoast
- Last week I taught a session on visualizing data at the Knight Center, highlighting free and easy-to-use multimedia tools. Over the next couple of days, I’ll be posting tutorials on everything we discussed. So far that includes:
- The basics of HTML
- Creating an HTML table from a spreadsheet
- Creating graphics with Google Docs
- Creating interactive graphics with Many Eyes
- 3 ways to make text more visual
The next few days are going to be devoted to timelines. Up first: Timetoast.
- Timetoast is easy to use:
- Log in (or create an account) and click on the “create a new timeline” link. Give it a title and add an image from your desktop, if you have one. You can create any kind of timeline; to learn the program, try using your résumé.
- Under the timeline is a button to “add an event.” Each event must have a title and a date. Add a description and, if you have one, an image. Above the description box is a little chain-link icon: Click on it to add a link to a story or website. You also can use HTML in the description.
- Timetoast saves events as you add them. It also keeps your timeline in draft mode until you publish it. To preview your timeline, click the “view timeline” link under the timeline. If you’re ready to publish it, there’s a link under the timeline, or go to “your timelines” (at the top of the page) and publish the timeline.
- To add the timeline to your blog or story, view the published timeline and click on the “embed/share” link under the timeline. Copy the embed code, click the HTML tab in your blog and paste it there or in your story.
Timetoast has it’s quirks.
On the plus side, it’s easy to use, and timelines (and photos) look fantastic. (Click on one of the events with a photo in the timeline above to see what I’m talking about.)
On the negative side, dates are formatted a bit strange (following the European format of date month year, but with an unnecessary comma after the month); videos are not allowed; and events do not have scrollbars, so if you have a lot to say, it could be cut off when the timeline is embedded. You can adjust the width of your embedded timeline: Change the numbers after “width” in the embed code. (It’s in there twice; both numbers should be the same.)
I’ve also run in to a few problems trying to create a new timeline from an established account — I just sent a note to the creator of Timetoast to try to figure out why, and I’ll let you know what he recommends. (If you run into the same problem, try creating a new account. I’ve had success with that, although it’s not the most efficient solution.)
- Posted by Erica Smith at 11:37 pm / Permalink for this post
- Filed under: , interactive graphics, multimedia, timeline, Timetoast, tutorial
- RSS comments feed for this post

No comments