Monday, October 19, 2015

How to Write a Great Website Timeline (Part 3)

History faces tough competition on the Net: when was the last time you shared a website timeline? Before we talk about the details of General Electric’s timeline, let’s note that not only were we intrigued enough to look through each of the 12 pages of the timeline (starting with 1878), but we spotted two items so irresistible that one of our writers shared them on Facebook.

What makes General Electric’s web timeline so great? Let’s look at it in terms of the questions and guidelines in our first post on this topic.

1. Audience(s). The timeline is focused on GE’s spectacular achievements across a wide range of fields, over more than a century. There’s no mention of mergers and acquisitions, but after reading a few pages, we were sorry we hadn’t invested in its stock a century or so ago.

2-3. Major events and structure. If you want a quick overview of the company history, the leading paragraphs of the 12 segments combine to form a coherent story. The breaks in the timeline are irregular (1878-1904, 1905-1912, etc.) - presumably so that major events can be featured in the segment’s leading paragraph.

For those who want more information, the second section -- below the leading paragraph on each page -- offers a series of 8 or more major events in a slideshow of a very superior sort. Each major event has a well-chosen photo and a brief description of the event and its importance. (See #4 below.) The navigation bar beneath each event (with simple, obvious left and right arrows) summarizes this major event in a few words, and states how many events are in this particular sequence. Someone at GE knows how to work with short attention spans!

4. Context. The text for each major event puts corporate history in the wider historical context. For example, from 1913: “GE develops the hot-cathode, high vacuum X-ray tube. By replacing the cold aluminum cathode with the hot tungsten filament in a high vacuum, the company could provide tubes with better control and greater output than had ever been achieved. The development greatly facilitates the use of X-rays for diagnosis and treatment.”

5. Images. The leading paragraph on every page has an image, and so does every single major event. The images are large enough to see, but small enough to flip through easily: a tricky balance to achieve.

Below the leading paragraph and the major events is a wonderful third section: a series of GE advertisements from the period. As a brief history of advertising styles these are great fun. But even better: every single one shows how cutting-edge GE’s products were and still are. (1939: “General Electric Television Receivers! Thrilling reception of exciting events as they happen!”)

6-7. Layout and navigation. The three-part layout for each page of the timeline is easy to grasp: leading paragraph, series of major events, sample GE advertisements.

The layout is the sole point where the GE website timeline has a flaw. The header image is a photo of Thomas Edison, with links to his bio, GE’s research, and GE’s past leaders. On a laptop, this header is so large that it takes up all the above-the-fold screen real estate. We assumed this was due to the fact that the page was designed to be mobile-friendly ... but then we discovered that on a smartphone, too, the header image is so large that the tabs and leading paragraph are pushed to the next screen.
This would barely matter, if it didn’t discourage visitors from finding the excellent content below the header image. Fortunately there’s an easy fix: make the header shorter top to bottom (much wider than its height).

But that’s a minor quibble. Overall, GE provides a great example of a website timeline done right.