Every article will now list its tags on the right side, as shown in the screenshot below. For the Guardian nerds among you, I’m displaying tags of the type ‘blog’, ‘contributor’, ‘keyword’ and ‘series’.

Tapping the subscribe button will expand to the view shown below:

You can see above that this user is already subscribed to the Film tag, but can still tap any of the other tags to subscribe to them. Once tapped, they can be disabled in the future via the settings dialog button up in the header.

Here’s how it looks after this user has tapped ‘Steven Spielberg’:

After the next news refresh, the Steven Spielberg tag now has its own page in the webapp:

Also included in this redesign is article navigation. Along the left hand side when you’re in article view, there are now up and down arrows. Tapping these should move you back and forth between articles in a section. All of the article tools — close, tweet, instapaper etc. — will also now follow you down the page, though this can be a little jumpy — until position: fixed is supported in iOS, this is as good as it gets. I did try a few different javascript solutions to this but they all seem like a pain in the arse. This’ll do for now.

The app itself has been using Web SQL rather than localStorage for storing articles for a few releases now. I’ll write up a more detailed post on that subject further down the line.

Tap the ‘Add your own section’ button located in the settings dialog:

You’ll then see a dialog where you input the tag, plus a display name:

This can take pretty much any tag you can find on the Guardian website. Just take everything after .co.uk/ and paste it in. Some examples:

travel/france
tone/obituaries
business/series/viewpointcolumn
music/glastonbury-2011
profile/charliebrooker
environment/badgers

It also works with combiners, for instance:

Who’s died in the pop and rock industry? music/popandrock+tone/obituaries
Interested in film and food? Try film/film+lifeandstyle/food-and-drink
What’s Hadley Freeman saying about fashion? lifeandstyle/fashion+profile/hadleyfreeman

Close any dialogs and refresh the news — you should find your tags appearing in your section list like any other section.

The default list remains, but now you should be able to see a settings icon up in the nav, as pictured below.

Tap that icon and you’ll get a section list to customise.

Caveat: the more sections you include in your list, the less likely it is that they’ll all be available offline. It looks as if I can comfortably save about 15–20 sections’ worth of data to the browser’s storage area; anything above that and the data will still be displayed but may not be available offline.

Another caveat: you’re currently obliged to have the front page in your list. There’s some work I need to do to allow you to select a default first page. Once that’s done, you’ll be able to ditch the front page.

• No large images
• No inline audio/video
• Removing articles that the Guardian didn’t have rights to distribute via the API
• Added the most asked-for feature — ads!

Regarding the removed articles: I’ve chosen to remove entirely rather than just display headlines because it was annoying to keep clicking articles and finding that you couldn’t see the thing without being re-directed to the Guardian website.

On the other hand, the app is now missing a few ‘breaking news’ articles so I may re-introduce those articles in the future but place them in a dedicated area on the page so users know what to expect.

I may also redesign the page now that it’s missing the larger images, as it looks a bit weak now. Not sure yet though.

g.joeblade.com

g.joeblade.com

How it works

It goes off to the API and gets the editors’ picks from a selected few sections, and then tops it up from the latest from that section, usually giving you about 15 articles per section. Tapping an article shows that article, plus if you’re online and that article is part of a package, sibling articles will display at the bottom.

I use localStorage to cache the API data for an hour, but you can refresh it yourself at any time from the toolbar. If you visit the app more than an hour later, it will automatically refresh. If you’re offline obviously it won’t refresh but you should find it possible to use the app thanks to HTML5’s offline functionality.

I recommend adding the page to your home screen so you can launch it without browser chrome.

Caveats and notes

Portrait orientation is recommended over landscape. Landscape will work but is a little crappy as I haven’t had much time for it yet.

Swiping left and right will switch sections, though I’m not happy yet about how this works as it’s a little temperamental.

Video and audio should be playable when they appear, so long as you’re using a browser that supports the MP4 and MP3 codecs.

I haven’t done a lot of checking in browsers other than Safari because I made this for me, and Safari is what I use. Fixing any bugs in other browsers is low on the to-do list.

Some things turn up in the article stream despite not being articles — Sudoku, for instance. Once I’ve worked out how to filter these out, I will.

Still to come

All sorts of crazy stuff.

Let me know how it works out if you use it.

Once installed to your Dashboard, the widget will download the latest article headlines, plus the latest gallery and videos published in several sections of the guardian. Clicking the headlines will open the links in your web browser of choice.

Some caveats: in this first release you can’t edit the list of sections (unless you want to open the widget up in Dashcode and edit the list yourself), and there is no auto-refreshing beyond the initial load — subsequent refreshes must be done manually via the orange icon in the top right. Also, I haven’t tested this a lot, so if it causes your computer to explode or accidentally downloads headlines from the Daily Mail, I apologise.

Download it here: Guardian Snapshot Dashboard widget (500kb)

Update

On Macs with Safari 4 installed there’s a bug where clicking links will open multiple browser tabs instead of just one. I’ve got a fix for that and will update in a few hours.

This bug has been fixed, download again if you’re having trouble.

Here’s a decent example:

BP, feds too cozy for some in assessing damage
Company weighs in on decision-making in every key aspect

This story is being reported with an article, a video and a photo slideshow — these are referred to as ‘slices’. Each slice also has a ‘drawer’ underneath it to allow you to continue exploring that particular type of media, or expand the article if there’s more content to read. Part of the rationale behind this is to abandon the notion of pageviews, as Mike Davidson explains here. Adverts are integrated into the general flow as slices in their own right, breaking up the content but not getting all in your face about it.

Pages vs packages

At the guardian we have the notion of a ‘story package’; it’s the same concept that msnbc are playing with but it’s simpler. Pieces of content — articles, galleries, videos, etc. — are editorially linked together in the editors’ tools and then every bit of content provides links to everything other bit of the same package. You can see it in action here, on the story about Michael Jackson dying.

It’s more flexible in some ways than msnbc’s approach and allows the editors to thematically link a much larger number of items — the Michael Jackson story package all on one page would be enormous, and the commenting model wouldn’t work; at guardian.co.uk you generally comment on the piece of content, not on the overarching story. In the case of the Jackson package there are several opinion pieces, each with a different slant on the story, each with their own discussion thread. This allows for a far more intimate dynamic between commenter and author, but does also fragment the discussion of the story. Swings and roundabouts.

One advantage to a story page rather than a story package is that more people may explore more aspects of the story if they’re presented in the same space. It’s very easy to quickly browse a gallery or watch a video if it’s immediately after an article and all you have to do to reach it is to continue scrolling.

Navigation

To explore the story page there are several floating icons that allow you to jump straight to slice you’re interested in, including links to the discussion thread and the ‘related content’ area at the foot of the story. These are pretty cool; essentially they’re a jazzed-up modern version of the ‘skip to content’ links that we’ve been peppering our sites with for a few years now except they’re not just for assistive devices, they’re for everyone, and they work pretty well. They always position themselves relative to the length of the page (though this might also work against them — as a user, I may find them easier to use if I always know where they’re going to be).

Their video player features both subtitles and transcripts which is a big usability and accessibility win. I rarely watch videos on sites because it either involves me getting headphones out if I’m in the office or turning down my radio if I’m at home, so subtitle support means I’m far more likely now to explore their video content.

The entire design is extremely polished; it feels like a finished product, very complete and lots of nice touches. It’s like playing a Nintendo game — I keep finding little secret bits and pieces like the hidden headlines at the very top of the page. I love every bit of their photo galleries. I love their timelines, visible on this story. There’s a Newsvine discussion about the redesign and predictably, most of the commenters hate it. In my experience, this means the team behind the redesign have done something worthwhile, and they should feel very proud of themselves.

Some niggles

If JavaScript is disabled, you lose a lot of functionality. Photo slideshows no longer work at all, for instance. Visitors without JavaScript enabled are a small minority these days but nevertheless, some more graceful degradation would be nice.

There doesn’t appear to be any way in referencing a particular part of the story. If I want to send someone a link to the video for instance, I don’t think I can — I have to send them the story link and tell them to find the video. It would be nice if there were per-slice permalinks for this purpose.

The video player is in Flash so I can’t watch videos on my iPhone. There does seem to be a mobile version of the site so maybe I’m just looking in the wrong place, but as MobileSafari is a fully-featured desktop browser, I generally resent being carolled into the cut-down mobile site.

Further reading

• Welcome to our new story pages | msnbc.com
• Quick critique of the new MSNBC redesign | cooper.com
• Touting Redesign, MSNBC Declares Pageviews ‘Dead’ | paidcontent.org
• Redesigning stories | jimray

The structure I’m using is more or less as follows:

<header>
<aside>
<article>
  <header>
    <time>
<footer>

You can view the source code for the full story. The first <header> is there to contain the masthead, and that’s all it does for now. The <aside> is for ancillary information about the main article and its category: related posts, tags and other posts from the same category. The <article> is obviously the main bit of content on the page.

The second <header>, within the <article>, contains the post headline and the byline. The byline contains the <time> element for the publication date, amongst other things.

The <footer> just contains what you would expect; footer stuff. In my case, it contains a bunch of links to category indecies and a few other pages.

The <time> element

My publication date is marked up like this:

<time datetime="2010-05-30">30 May, 2010</time>

The text of the element is in a human readable form; the datetime attribute provides a machine-readable form (though what I’m using is probably still readable by most humans). If I was using multiple <time> elements then I could remove ambiguity as to the function of this first one by including a boolean pubdate attribute, to indicate that this is a reference to a publishing date rather than, for instance, an event.

The <nav> element

You’ll notice I’ve not used a <nav> element for any of the links in my footer — I ummed and ahhed about this for a while but decided against it on the grounds that the <nav> element is meant for the site’s major navigation, and my site doesn’t really have major navigation. It isn’t a site you really navigate — you’re generally just reading an article. So, this is more of a philosophical omission rather than a technical one.

HTML5 enabling script

Modern browsers will allow you to style unrecognised elements but to support versions of IE older than version 9 I’m using Remy Sharp’s HTML5 enabling script.

Benefits

What I’ve done for joeblade is all pretty basic, but it did help me to think more about the actual structure of my site and what things meant. When everything’s a <div> you just end up throwing stuff together, but HTML5 makes you think a bit more, and I spent more time reorganising my page than I did introducing new elements.

It’s unclear what benefit there is at this stage; I assume that search engines will start paying more attention to HTML5 markup than <div>–heavy markup in the same way they tend to favour standards-based sites over old table-based layouts. At the moment though, converting my sites to HTML5 was useful as a thought exercise, and it’s refreshing to not have to use the same tag for every element on the page.

Further reading

Designing a blog with HTML5 by Bruce Lawson