“More Hackable” Web Timelines

Wednesday, September 25, 2013

When we launched our original web publishing service on the Mac, we received a lot of feedback from customers who wanted to tweek and customize the timelines in order to integrate them into their websites more fluidly.

I designed that publishing service to be a very simple, one-click, web publishing service with much of the complexity hidden on our servers.

This time around, our new web publishing feature (debuting on Timeline 3D for iOS 7) aims to maintain the same ease-of-use for the people that just want to share a timeline, but also aims to be more hackable for programmers and design pros.

Hosting your own files

Timeline 3D for iOS 7 enables you to export all of the web files required for your timeline to Dropbox, allowing you the opportunity to manage the hosting yourself. For example, you could publish the timeline on a secure server (like an intranet). It also gives you an opportunity to modify the files before publishing.

Customize Style Sheets

Web designers may want to change some of the colors and styles of their published timelines via CSS, and we are providing access to the individual web files to enable them to do so.

Most of our JavaScript code and CSS has transformed into a compact format optimized for fast downloads, which isn’t very readable by humans.

However, there are a handful of CSS settings that might be useful for tweaking. I have formatted these settings in a human-readable layout with plenty of comments and placed them near the top of the “index.html” file. These settings should be easy to find and modify for experienced web developers.

While the timelines themselves use pre-rendered graphics and cannot be modified via CSS, the color and behavior of the navigation controls can.

For example, you may want to adjust the HTML body background to match the color of the page the timeline will be embedded in so that any rounding errors around the edges of the pixels are not visible.

You may also want to change the color of the bee-line at the bottom of the timeline to match your logo or the media within your timeline events.

Finally, you may have licensed a custom font for your website, and you can change the CSS to use that font for the bee-line mouse overs.

Adding custom poster image

As an example of another “hackable” element, you may have a special situation where you want to display a poster image that is clicked to load the interactive timeline.

Perhaps the poster image contains instructions on how to use the keyboard to navigate the interactive timeline. Or, perhaps you want a highly optimized poster image to save some bandwidth on a site with millions of visitors.

Now that you have access to the files, you can add content like this before the timeline loads.

How to embed a timeline into your website

By default, if you navigate to the web timeline, it will adjust to fill the window of your web browser (or your screen if you are on a mobile device).

If you embed the timeline into your website using a standard iframe tag, it will automatically size to that iframe. For example, the timeline embedded in my announcement blog post uses code like this:

<iframe src="http://i.interactivetimeline.com/demo/index.html" width="500" height="365" frameborder="0" scrolling="no"> </iframe> <p> <a href="http://i.interactivetimeline.com/demo/index.html"> View Full Size </a> </p>

Embed at any size

Our web publishing customers have told us that they want more flexibility to embed the timeline into their websites at any size. For example, I know this blog post will be 500px wide when styled for our website. If I include images, movies, and timelines, then I want them to be 500px wide.

I may want a long and skinny timeline to use as a header for my website or a portrait-sized timeline to use beside an article.

This is now possible with web timelines published with Timeline 3D for iOS.

As I discussed last week, our new web publishing feature has two modes. It uses WebGL in browsers that support it. When the timeline is shown in WebGL, it will always adapt exactly to the window or frame that surrounds it. The size and aspect ratio do not matter.

If the end user’s browser does not support WebGL, then we show them an interactive sequence of pre-rendered images instead. Since these are pre-rendered, they are not quite as flexible on the size.

We render out each image in about a dozen different aspect ratios if you publish with the default settings in Timeline 3D. Not only that, but each image is rendered in three different resolutions.

In real-time, the javascript code will dynamically select and download that appropriate image based on the aspect ratio and size of the browser window. Yes, this takes into account retina displays.

The result of this magic is that the timeline always looks great, fills the available space, and uses bandwidth appropriately.

If you are embedding the timeline in your website, be sure to test it on a non-WebGL browser and tweak the aspect ratio until the timeline fills the iframe completely.

If the aspect ratio your coded is not available as a pre-rendered size, then there will be a border around the entire image. When you hit a pre-rendered aspect ratio exactly (or within a few pixels), the border will go away and the image will display to the edges of the frame.

Pro Tip: A more efficient render

As you may expect, it takes some time, battery power, and bandwidth for your iOS device to render all these image variations and upload them.

If you are planning to present your timeline exclusively within an embedded iframe, and if you know the aspect ratio of that iframe in advance, then you can select that aspect ratio in Timeline 3D.

If you choose a specific aspect ratio, Timeline 3D will skip all of the files that are not needed for that situation.

Specifying an aspect ratio before publishing also has the benefit of using nice simple ratios for easily calculating the optimal embedding size. “Adaptive” uses actual pixel ratios of common mobile browser, which are not as mathematically pure.

---

As you can see, the options for publishing a timeline are now more advanced. You can tell by the length of this post!

Our hope is that designers, web programmers, and news media will find Timeline 3D to be a valuable and flexible tool for telling their stories. If you have any questions about web publishing, please send us an e-mail at support@beedocs.com.

Labels: embed, publishing, timelines, web