Ephram Zerb

One of the defining characteristics of a blog is the manner in which the content is presented. The home page is organized in reverse chronological order, and traditionally, the entirety of each entry is exposed in that view. The competing model of content presentation is one embodied by news portals: the articles are reduced to snippets and navigating away from the home page is necessary to read anything that amounts to prose. Both of these approaches also impose divergent conceptual models of the site’s organization. Whereas the news portal is taxonomy centric, the blog’s content has much more relevance in the context of time.

It is no wonder then that you will find “previous” and “next” links (linear navigation) on just about every blog, in the same way you will find links like “More articles in Politics” on news portals. One deals with time and sequence, the other with categories.

Having accrued enough posts to justify it, I decided to add linear navigation to my permalink pages.

The Accepted Solution

The most common approach to presenting these links has been to position the “previous” link on the left and the “next” link on the right. The “previous” link points to an older entry, while the “next” link points to a newer one. When not labeled with “previous” or “next”, the links rely on a guillemet to communicate that message. This approach is endorsed by the default templates of two blogging powerhouses: Six Apart and Automattic. In other words, millions of sites have unintentionally given their nod to this design pattern.

Since time is most often visualized as going from left to right, this approach is also logical on the visual level. The left link will take you to the the past, the right link, to the future. I think this is a good solution, and this is what I started with when I decided to add linear navigaton to this site. I am going to presumptuously refer to this as the accepted approach or accepted solution from this point on.

Scratching the Itch

After adding “next” and “previous” links to my permalinks, I still felt unsatisfied. Despite the fact that I frequently use linear navigation on other sites, I often find the experience marred by a good degree of indecisiveness. I’m never really sure where exactly I’m going: am I going to be taken to an older post or to a newer one?

I think the problem lies in a conceptual disconnect between the home page and the permalink.

On the home page, because posts are listed in reverse chronological order, the concept of “next” (as you scroll down the page) points to an older post. On the other hand, on the permalink, the “next” link typically takes you to a newer post.

When I am reading a blog’s homepage, I am reading the newest posts followed by older ones. When I decide to drill down to the permalink (to read comments or view rest of entry), my instinct is to continue to browse in that order. In that situation, I instinctively feel that the “next” link should point me to the older entry.

However, when I’m not coming from the home page (search engine results or my feed reader), I typically want to read the newer entry. Perhaps this is describing a personal preference. (If presented with two options: to read an older post or a newer post, I feel the very nature of blogs makes the older post a losing proposition.) But regardless, in this scenario, the “next” link feels more natural pointing to a newer entry.

It is no surprise then that there are plenty of prominent sites that do the exact opposite of the accepted solution (i.e. by making the “next” point to an older post). This ignores tradition and does little to alleviate my indecisiveness.

Detouring to Blogger

Blogger, the other mega-popular blogging tool, has a slightly different approach. Rather than rely on little arrows, or the ambiguous “next” and “previous” labels, they simply use two links titled “older” and “newer”:

Google, who owns Blogger, mirrors the approach on their official blogs and also in Google Groups, where they are also sorting posts in reverse-chronological order (same problem space). Whether this is a product of legacy implementation or the final synthesis of quantifiable research, it can’t be discounted, as it’s unlikely Google would be doing something on that scale to their disadvantage. Personally, I like to entertain the idea that every decision at Google is answered with algorithmic, supra-logical precision (but sometimes with odd results):

[dramatization] Googlebot’s algorithm favors self-preservation to the detriment of this poor searcher.

There is little ambiguity with “Newer Post” and “Older Post” - they are great labels - but I think it lacks some of the elegance of the accepted solution:

• Doesn’t surface the title of the posts
• Presentation subverts the traditional visualization of time as moving from left to right

Adding Training Wheels

The solution I settled on was a simple combination of the two most common approaches: I decided to compliment the accepted solution of linear navigation with the hyper-precision afforded by the labels of “older” and “newer”.

When solving an interface problem, using words, or any kind of help text, is often viewed as a crutch to be avoided. To make the approach less like a crutch and more like training wheels, I muted the labels’ color to a light grey and positioned it outside of the linear flow of the link text. I retained the arrows and surfaced the post titles, while keeping the older post on the left and newer on the right.

As of this writing, the linear navigation appears below every post.

In the process of me surveying the web and trying to get an understanding of what is most common, I noticed that there are plenty of blogs that don’t have “next” and “previous” links. If there is to be one takeaway from this post: make sure to have such navigation to begin with.

I’d like to hear other’s experience with linear navigation. Do you find it intuitive? In what situations do you find it helpful? Which approach do you find most appealing? When do you find yourself using it?

Recently, Jonathan Nicol, who is ever so generous with his comments on this site, curated a nice collection of approaches to styling and denoting links. To return the favor of furthering the conversation, here is my remix of the topic. Styling links is something I have thought about for a while and is a recurrant problem with every new website design. Before this topic becomes less relevant to me, I figured I might jot down some thoughts on how I have approached this design decision in the past.

As I was writing this, I found things getting very drawn out, so this post will be mostly confined to links that live within content (i.e. inline links).

Jacob Nielsen’s Design Guidelines for Visualing Links is probably the best document to provide prescriptive advice on styling links. The value of the work lies in the quantifiable HCI research that led to the final synthesis. My ideal starting point for a link is largely the prototypical link that would emerge from applying Jacob’s advice: blue and underlined, in all of its default-browser-styles glory.

I favor, what I’ve referred to in the past as, design conservatism – which, unfortunately, can be a really misleading term to use. The central concepts of the approach are tradition and culture.

Tradition can be seen as the collective synthesis of meaning across a culture. By ignoring it, you run the risk of diluting the communicative potential of your work. There’s such a long and established tradition (largely thanks to browser defaults) of denoting links with blue, underlined text that having such treatment not be a hyperlink is as jarring as an inverted traffic light. By appealing to tradition, you leverage cultural expectations of interaction and meaning for greater clarity. Maximizing perceived affordance is a closely related strategy, but I feel that confines the approach to interaction design.

From Type: The Secret History of Letters:

It has been remarked that ‘extreme conservatism as to the presentation of reading matter has always been the oustanding characteristic of the reading public’. In other words, if it looks strange and unfamiliar, the reader won’t go near it.

In the case of links, the most conservative choice would be to make them blue and underlined. This represents a starting / reference point. But since links don’t live in isolation, but rather in the context of a web page that introduces its own set of design tensions, this style is not always the end point. One needs good reason to transcend the treatment, where the end result extends and never subverts the tradition of the device.

Putting Blue in Context

One of my favorite takeaways from toiling through Robert Bringhurst’s Elements of Typographic Style was a morsel of advice on how to choose the appropriate typeface. I think these excerpts sum it best:

Choose a face whose historical echoes and associations are in harmony with the text.
…
If, for example, you are setting a text by a woman, you might prefer a face, or several faces, designed by a woman
…
But perhaps a text by a French author, or a text dealing with France, might be set in a French typeface.

These assertions tie a decision like choosing a typeface closely to the cultural context under which it was conceived - in other words, a cultural artifact always carries with it the baggage of its past. Similarly, choosing blue speaks heavily to the history of the medium, which can often be too specific or wrong under the circumstances of your design goals. Some of the first sites on the web were those created by those with ties to academia, technology and government. The pedigree of the style make it an appropriate choice for non-profits, academic sites, archives, sites with a long heritage and those made for the tech-savvy audience. Sites meant for ubiquity, like Google, are complimented nicely by adopting this style as the core of their visual language. Communicating a novel, modern brand with blue underlined text can prove a challenge, making the color a good candidate to cycle through some transformations.

More obvious reasons not to use blue as your link color is if the content is set on a dark background or if it clashes with the already-defined color pallette of a brand’s identity.

When I go through design iterations, something I frequently try out is setting the link color to one found in the identity’s palette – especially when it’s a color that provides good contrast within the design. I like the way this associates “action” (that of clicking on a link) and instills a certain dynamicism to a company’s brand. This doesn’t always work, but using an identity’s color to constitute a specific piece of your visual language is also an option: doing so with buttons and headings can also further a cohesive and logical experience. Dan Cederholm’s Cork’d serves as a nice example of this:

Notice how the colors of the buttons “search” and “sign up!” match the wine glass logo. The relationship suggests: “search cork’d” and “sign up (to) cork’d”.

Transcending the Conventional Underscore

Getting past the underscore is not as natural as choosing a different color for the link, as the device is more closely associated with the concept of the link than the color is. Still, the default underscore (text-decoration: underline) leaves something to be desired.

I find underlined links can often be disruptive to the rhythm of the text. Content densely populated with such links begins looking busy with all of the extra lines crowding the leading. The default underline also tends to cut off the characters’ descenders. For example, take text set in 11px Verdana (figure 1). It is composed of 81 pixels, with the underline contributing 70 more. This effectively amounts to a 45% increase in the footprint of the link, which can quickly add up 1 + 1 = 3 clutter.

figure 1 - Along with obscuring descenders (notice the bottom of the ‘g’), the default underline adds 45% more pixels to this text. On link-heavy sites like Wikipedia, this can easily become a burdensome treatment at the expense of the content.

From my perspective, link text that distinguishes itself by color alone (without an underscore) is a bit too anemic and fails to stand out. More importantly, I’ve always taken to the almost-axiomatic idea, endorsed by accessibility professionals, that color alone shouldn’t be used to convey meaning. A crude test you can perform is take a screenshot of your website, drop it in Photoshop and desaturate the image. Upon desaturation, you might also find that the color of the type is far too light to be a comfortable read. Simply removing the underline is not the solution for me.

Instead, I find the light-colored underline to be a pretty fair compromise. It allows you to maintain the underscore to denote the link while minimizing the noise a conventional underscore can introduce. Most people use a light grey, or a darker, but dotted underline (effectively same thing). To accomplish this, I’m currently using a light color from this site’s color palette to underline my inline links. The only way to achieve this is to use the border-bottom CSS property, which has the added benefit of placing the underscore below your descenders.

Having made the leap of faith to embrace links with a light underline, this style can now serve as a valid future starting point.

I think it’s time to wrap up this overwrought prose. To be continued in the comments.

I don’t remember who exactly said, something to the effect of, “every web designer should be blogging.” For some reason, I tend to attribute that bit of wisdom to Jeffrey Zeldman. But then again, I attribute (and probably misattribute) a lot to JZ. Having said that, I was surprised to read his somewhat-jaded depiction of self-publishing, later echoed by Greg Storey, as I set out to launch this blog.

In one form or another, I have been publishing on the web for over 8 years. As any aspiring web designer, I’ve patronized countless websites in a search for answers, techniques and inspiration. From distinctly hobbyist roots, I now find myself working as a web professional in San Francisco - all thanks to my WWW education and the innumerable people who contributed to it.

The web is filled with sites that feature a giant disclaimer announcing the owner’s decision to stop updating the site. Most of the time, these websites aren’t the product of self-perpetuating machinery brimming with editors, salesmen, writers and a viable business model. Instead, they are an individual’s labor of love, propped up by interests and motivations that can change on a whim.

So it is without any fanfare, I go where millions have gone before. It’s not far fetched to think that, one day, this website will be tedious to maintain. Still, I can only hope, that between this post and the inevitable last, I can give back to the web design and development community as much as it has given me.

Damn, that’s a really grandiloquent (case in point) first post. Love it.