Navigation Design Changes

Projects, websites

One of my little daily annoyances in reading blogs is that there is no standard way to navigate through the archives of posts. I think we’ve all agreed that there needs to be some kind of links at the bottom of the front page that lead to more posts. But what word to use in that link is where the confusion comes in. Some blogs use the word “Next” to denote that you are moving to the next page in the blog, as if you are digging down into the list of posts. Which is technically correct, but the fact that the posts were published previous to the ones on the first page confuses me some of the time.Because they use previous to get you back towards the front page.

It took me a while but I’ve really come to admire Engadget’s new layout. I think it’s very forward thinking and cleanly designed. So I’m using a version of their OLDER AND NEWER links for my blog design.

I’m starting the Society for the Standardization of Blog Navigation Links.

our mission:

  • use Previous to refer to the older posts.
  • or the simpler OLDER POSTS/ NEWER POSTS
  • that’s it.

VIVA LA REVOLUCION!

*UPDATE*

Turns out that I might be on the short side of the argument with this one. Right now Cinematical uses the opposite PREV and NEXT technique and so does the entire GAWKER network… and the rest of Engadget’s sister sites also… But sometimes a small band of rebels can conquer and entire empire.

How to reproduce this in WordPress.

1. Save these two images to a directory on your site back_image and forward_image or use any other images you want.

2. Put the following code in your stylesheet. But change the location of the images to where you put them on your server.

CSS CODE :

.navigation p a{
text-transform:uppercase;
text-decoration:none;
color:white;
font: 20px Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
letter-spacing: -1px;
}
.navigation p a:hover{
color: #cc0000;
}

.navigation .oldpostnav{
background:url(images/nav_link_back.gif) no-repeat left;
padding:0px 0px 0px 25px;
float:left;
}
.navigation .newpostnav{
background:url(images/nav_link_forward.gif) no-repeat right;
padding:0px 27px 0px 0px;
float:right;
}

3. Use this code where you currently have your navigation in wordpress. In the Main Index Template (index.php) search for “posts_nav_link”

<div>
<p>
<?php posts_nav_link(‘ ‘,'<div >Newer Posts</div>’,'<div >Older Posts</div>’); ?>
</p>
</div>

2 thoughts on “Navigation Design Changes

Leave a Reply

Your email address will not be published. Required fields are marked *