The relaunch of Senior Correspondent got me thinking a lot about lists, especially in terms of structure and interactivity.
The above illustration represents a standard way to mark up an article teaser. The outside element is some sort of container, then we code the title as a headline with a link inside, show a small teaser, and if there is an image, we can link that too. One of the big issues that comes up in mobile is that often times there is an expectation for an entire teaser to be clickable rather than just the image or headline.
I have gotten around this issue in the past by using a small bit of javascript to grab a link’s destination and make the whole container clickable. This works fairly well, but I thought that it could be better. I felt that having to link up a headline, an image, and potentially a “read more” link all with separate link markup was rather inelegant.
If our goal from the list view is to get to the detail view, shouldn’t the article teaser itself be a link?
There are several things I like about this markup:
- Only have to set a link destination once.
- Hit area is much larger.
- Now responds to :hover in less capable browsers.
It is important to note that this style of markup wasn’t considered acceptable prior to the HTML 5 spec. It used to be a no-no to include block level elements inside of an inline level element. With the new spec, this markup is completely acceptable, and in my opinion, a great addition.