in Showcase

10 HTML5 news projects

HTML5 logoWhile HTML5’s specification won’t be finalized for more than three years (check out Is HTML5 Ready Yet? for the countdown and take a look at the source code), news organizations have been experimenting with it for awhile now. Besides making their videos iPad friendly, quite a few media giants have made standalone HTML5 projects.

These projects tend to mimic tablet-like experiences with horizontal grid layouts and large clickable blocks. This is for good reason, given that publishers could save a lot of money developing just one HTML5 site for mobile rather than a bunch of native apps, which haven’t been very lucrative yet. But for now, Google’s mighty Chrome browser (what every journalist should use—more on this in a later post) delivers the best HTML5 experience.

While these experiments are all strikingly refreshing ways to read online, they don’t seem to have much attention from their creators or readers. I’m curious how many people visit publishers’ HTML5 projects over their standard homepages.

Here are 10 HTML5 projects worth a peek:

1. New York Times Skimmer

New York Times Skimmer HTML5
The Gray Lady’s HTML5 site delivers a surprisingly print edition-like experience, with stories wrapping in three columns complete with indents and the occasional display ad. Click on the Customize button for some delightful layout options, or learn the easy keyboard shortcuts for quick browsing. Try as I might, I still prefer visiting that classic homepage or coming to articles via Twitter. For those looking for a pleasant way around The Times’ paywall, the Skimmer will not attack you once you hit 20 stories in a month.

2. AP Timeline Reader

AP Timeline Reader HTML5
The Associated Press’ HTML5 Reader has a nifty feature that allows you to skim through and save the stories you want to read in the queue. The page layout is a horizontal timeline of recent days with stories mapped along it. You can add and remove stories from classic sections like Politics and Sports by toggling their tabs on the left. The AP’s Reader makes heavy use of transitions and animations in the interface for a flashy—and gaudy—reading experience and also fails to generate links to stories, making it impossible to share stories from this interface. Dumb.

3. NPR HTML5 Web App

NPR HTML5
National Public Radio’s Web App separates content into three rows with sliders for finding more stories. Like AP’s Timeline Reader, NPR’s HTML5 site allows you to add stories to a playlist where they’ll play one after the other. While you’re listening to some stories, you can enjoy reading news briefs inside a very minimal reading window, again sliding between panes for more stories.

4. USA Today Optimus

USA Today HTML5
You gotta love what news organizations are dubbing their HTML5 projects. USA Today takes the award for best name with “Optimus.” Optimus fits quite a few stories in its layout with a vertical scrollbar and less negative space than most other HTML5 news projects, but it cleans out the clutter well on single article pages for a more pleasant reading experience. Optimus will notably take much longer on initial load than the other sites on this list.

5. Huffington Post NewsGlide

Huffington Post HTML5
HuffPo’s NewsGlide is stunning. Not because it’s the best HTML5 news site in existence, but I never saw it coming from the queen of clutter and 84px Arial headlines. NewsGlide doesn’t default to a fullscreen article view, but you won’t regret turning it on in the Customize menu. Always looking to generate conversation, The Post stands out for keeping its comments inside its HTML5 experience along with promient share buttons.

6. Salon Grid

Salon Grid HTML5
Salon’s Grid appropriately displays stories in a simple grid, with checkboxes to toggle what content appears in the boxes. There is quite a bit of horizontal scroll involved, but where Salon really loses is in its article view. Once you click on a story, the article box that pops up feels like an afterthought and requires a lot of scrolling to to get through a piece. Also, who dumps Flash ads inside their HTML5 web app?

7. Sports Illustrated Snapshot

Sports Illustrated Snapshot HTML5
Snapshot is perhaps the most complex of the HTML5 sites on this list. It allows you to connect via Facebook or Google account and add your own teams to the interface. It also achieves its basic purpose well—displaying great photos large and without distraction. And yes, the swimsuit models make an appearance.

8. ABC News iPad Optimized

ABC News iPad HTML5
I don’t know why, but to visit ABC News’ HTML5 version you must visit it from Safari on your iPad. I don’t own one, and had to use a cross-browser testing site to even view the project. Maybe someone with an iPad will tell us how it is.

9. Center for Public Integrity Looting the Seas Series

Center for Public Integrity HTML5
The Center for Public Integrity gets an honorable mention for its small HTML5 project Looting the Seas, built by Treesaver. This is a very simple and nice way to read in-depth online reporting that I would like to see more news organizations utilize on a project by project basis.

10. News 21 Behind Bars Microsite

News 21 Behind Bars HTML5
News 21 at UC Berkeley makes the list for its Executing Abbott microsite, which allows you to research San Francisco Examiner archives, photos and an original video and encourages the reader to deliver a verdict for Burton Abbott at the end. It’s another neat example of interactive story-telling for an in-depth series.

If you think I’ve missed some cool HTML5 projects, share them in the comments.

Comments (2)

  1. Pingback: Mo’bile journalism, Mo’ problems « jclee89

  2. HTML5 will expode but what about the people who don’t update? Yes there are like 5% tech-savy beta-testers and “cool a new update to my browser” that will use an html5 capable web-browser, but will you miss a bunch of visitors to your site just cause you want to use a new technology that is not yet polished?