This is it. You’re reading the final post for my Online Journalism course.
I may continue to update this blog every so often, when the interactivity or web design strikes me. For the last post, I am highlighting interactive timelines in national and local news.
Timing the Arab Spring protests
Several newspapers and news organizations covered the 2011 Arab Spring protests in the Middle East with interactive timelines. There was of course extensive article, video and television coverage as well.
The difficulty was visually showing many protests, spanning several countries. These protests spread and reverberated off each other. So these timelines worked to clear up locations, dates and people involved.
The Guardian’s Arab Spring interactive timeline is perhaps the most innovative and well-designed. The Guardian staff took a risk by laying out the timeline not in the usual horizontal format, but in a vertical view. Readers essentially move into the protests as they slide the navigation button along several months.
Screenshot of The Guardian’s Arab Spring timeline
This timeline is unique and visually appealing — thus making The Guardian itself stand out.
The countries where protests and political action occurred are listed in bar-graph form at the bottom of the timeline. The lines go up vertically through the page, signifying when and where events took place.
Readers can mouse over specific icons — like the green fist icon that signifies a protest or the yellow button that represents a political move — and more information about that specific event comes up on the left column. Clicking on individual icons brings up articles that were published about the particular protest or action. This allows readers to learn more about specific events and also acts as a way to publicize articles in a visual way.
A major downside is this map is made with Adobe Flash. This means viewers can’t read the code made with Flash, so it is being used less and less for interactives.
PBS Newshour also had an interactive timeline of the protests in the Middle East. The timeline was built using ProPublica’s TimelineSetter, a free online website to create timelines.
This timeline has a lot more white space. It is not necessarily more text-heavy than The Guardian’s version, but the visual aspect of the timeline is not the page’s focus.
The horizontally laid out timeline shows countries where protests occurred in different colors. This timeline is fairly small.
Screenshot of PBS’s Arab Spring timeline
Screenshot of article in timeline
The main aspect of the page is not actually the timeline, but what sprouts from individual events on the timeline. Readers can change what appears on the timeline by clicking the color-coded countries.
Clicking on individual events brings up articles, photos and videos in the white space below the timeline. Readers can view the full articles by clicking on the “read more” button.
This timeline is not as visually appealing or innovative as The Guardian’s, but the information is easy to absorb. If readers want to learn more about individual events, they can easily find a specific event and read more.
Mapping the attacks on the U.S. embassies
Screenshot of Slate’s timeline of attacks on U.S. embassies
A more recent timeline, by Slate, outlines what happened before, during and after violent attacks at the U.S. embassy in Egypt and the U.S. consulate in Libya.
This timeline is very different than The Guardian’s or PBS’. It uses a map view to show where events happened. That is the main focus of the timeline — time is an important aspect, yes, but location is forefront in this timeline.
Readers can click on individual event pins and the stories on the left column shuffle to the specific article about the event. This organization of information mirrors PBS’.
Interactivity differences between local and national news organizations
I’ve noticed a trend after blogging about these examples of interactivity, multimedia, social media and web design. The larger, more national news organizations seem to have more staff that can create in-depth interactive graphics and well-designed websites. The smaller, more local news organizations often did not have interactivity or what they did have was very minimal and basic. This is a generalization, and certainly not true to every news organization.
For example, Slate created a map timeline of attacks at U.S. embassies with free online software called Leaflet, an open-source JavaScript library for interactive maps. PBS also used online software, ProPublica’s TimelineSetter.
Some online interactive graphic tools are:
So even though smaller, more local news organizations may not have a dedicated interactivity staff, they can find ways to provide readers with interactive information.
And that is really what matters. In an age where online software is becoming more affordable and often free, news organizations of all sizes and locations can use these resources to create well-designed, interactive informational graphics and lay out information in interesting ways.
The interactivity playing field is not even, but it may be getting there, one widget and free software program at a time.