Do Blogs Need Your Email When You Comment?

Short Answer: No.

Slightly Longer Answer: The point of having an email field in a comment form is to have a way for the site owner to contact the commenter. I do not believe that field is necessary and adds unnecessary complexity to your form. Complexity discourages people from commenting and in turn weakens your blog community.

View the full article at my other blog, minimali.st →

Look at what we’re going to accomplish in this article:

• Before Demo Table-based
• After Demo ul Goodness

How I Want the Row to Behave

This is best illustrated with a video example from the new iTunes store.

Notice how you can click anywhere in the row to get the song to play. The hover state lets you know that it is all clickable.

How The Markup Started

I started with a table-based list of articles. It was easier to make the design align to my layout grid with a table. I justified the use of the “HTML element that shall not be named” by convincing myself that the data was mostly tabular. A column for each category, title, and summary made sense to me.

You can see the original design here. Basically, the markup looked like this:

<table class="posts" cellpadding="0" cellspacing="0">
  <colgroup>
    <col id="category" />
    <col id="title" />
    <col id="summary" />
  </colgroup>

  <tbody>
    <tr>
      <td>
        <a href="#">Usability Review</a>
      </td>
      <td>
        <h2><a href="#">Typekit</a></h2>
      </td>
      <td>
        <p>Excerpt goes right her'</p>
      </td>
    </tr>
  </tbody>

</table>

Semantically, this was probably fine, but it felt dirty when I tried making the whole table row a single link. The only way I found to do that involved three separate heavily padded links to the same place and some absolute positioning to make it look good. That created a lot more problems than it solved. After four hours of hacking at different markup and CSS, I decided to try a different approach.

Converting to an Unordered List

I thought about what this element really was and it is a list of articles, starting with the most recent. I thought to myself:

If this is a list of articles, why am I using a table to mark it up? It could be done much better with an unordered list (<ul>).

Converting this particular element to a list gives me a warm semantic butterflies in my stomach.

Semantic Butterflies

<ul class="posts">

  <li id="post-1" class="group">
    <a href="#post">

      <span class="category">Usability Review</span>
      <strong class="title">Typekit</strong>
      <em class="excerpt">Web app for embedding custom fonts in your design that will change the way you approach web typography.</em>

    </a>
  </li>

</ul>

This markup isn’t ideal for two reasons:

1. I’m using extra elements (like the span, strong and em)
2. I cannot use my h2 element for the post titles because links cannot surround block-level elements like ps or h2s. I’m losing some search engines benefits and some semantificity (I just made that word up), but strong is a good substitute.

For now, I’ll have to live with this if I want to make the entire list item a link, but there is some hope for the future. Eric Meyer proposed any element linking in which you could give any element an href property. Wouldn’t it be nice to be able to do this in HTML 5?

<p href="http://linktosomething.com">This entire paragraph will appear as a clickable link</p>

or

<tr href="http://linktosomething.com">
  <td>Every bit</td>
  <td>in this table row</td>
  <td>will be clickable</td>
</tr>

Currently, Eric’s solution works in a limited number of browsers and uses some inline Javascript to work its magic. Check out the demo if you want to see his markup.

There is still hope that any element linking will be easier in the future, but that doesn’t solve your problem now.

What Works Now

Now that we have the markup stashed away and validated (you better be validating, mister!), we can move onto making it look nice with CSS.

Expanding the Link to Fill the Entire Row

The most important part of this code is making each link a fill up the entire row. Imagine pouring water into a clear square box. It will naturally expand to fill its container. Our entire goal with this technique is make each post link more usable by increasing the entire clickable area. Currently, only the text is clickable.

We can make the link act like H₂O by making each link inside a list item a block. I’m giving the link a light blue background when it’s hovered over to let the viewer know the entire row is clickable.

ul.posts li a { border: 0; display: block; overflow: hidden; }
ul.posts li a:hover { background-color: #DBF1F9;/* light blue */ }

Next, we’ll float the different pieces of data to where we want them. Categories goes all the way to the left, title in the middle, and post excerpt to the right.

ul.posts span.category { float: left; }
ul.posts strong.title { float: left; }
ul.posts em.excerpt { float: right; }

Easy enough. There is no float: middle so for the title, we float it left too. It ends up bumping up against the category block keeping it in the center.

Floating isn’t effective because we still need to give each piece of data a width and padding so it has some room to breath. When trying to make something simple and easily scannable, white space is your friend.

ul.posts span.category { float: left; width: 20.2%; }
ul.posts strong.title { float: left; width: 38.4%; }
ul.posts em.excerpt { float: right; width: 38.4%; }

ul.posts span.category,
ul.posts strong.title,
ul.posts em.excerpt { padding: 3% 1% 2% 0; }

Where the hell did I get those widths?!

I actually just made them up! The skillful designer in me told me that 38.4% was the way to go.

Just kidding. I actually used a mathematical formula to figure it out (and you thought you were done with math in high school). Instead of giving each element a fixed width, I went with a percent to give the design fluidity.

Here’s how to convert from a fixed width element to a percentage:

1. Determine the element’s desired width (300px for the title) and the width of the containing element (760px).
2. Divide the desired width by the width of the container. (300px/760px)
3. Convert that to a percentage. (0.394 is 39.4%)
4. Subtract any padding (1% on the right)
5. Ta-da! You have your width in a percentage. (38.4%)

I got the width of the containing element by seeing how many columns it spans in my grid system. I use the 960 grid system for my layouts. If you’ve never used a grid system, I recommend trying one out, at least while first laying out your design.

The layout is there and the entire row is clickable (denoted by the blue). We need to style it so it looks pretty (as a designer, I tend to like pretty things).

Prettifying It

Let’s put a border beneath each item, a border at the tippy top of the list for balance, and ditch that bullet point.

ul.posts { border-top: 1px solid #ddd; list-style: none; }
ul.posts li { border-bottom: 1px solid #ddd; }

Let’s add some finishing touches to make attract attention where it is most important. I want viewers to first see the title, so I’ll make that the darkest and the biggest (basically mimic what an h2 normally looks like). If the title strikes their fancy, I want them to read the one sentence excerpt about the post. Lastly, I want them to see the category on the left, so I’ll make that the lightest.

ul.posts span.category { color: #888; color: rgba(0,0,0,0.47); padding: 4% 1% 4% 0; }
ul.posts strong.title { color: #333; color: rgba(0,0,0,0.8); font-size: 42px; font-weight: bold; line-height: 41px; margin: 0; }
ul.posts em.excerpt { color: #555; color: rgba(0,0,0,0.66); font-style: normal; }

Note about the rgba: I like to use rgba when coloring something a shade of gray because it allows me to adjust the visual weight straight from the code. If I want something to be less important (like the category), I’ll knock its opacity down (the a part of rgba). Once I’ve found a shade I like, I convert it to a regular hex color so older browsers still color it appropriately.

I put the hex color code first because older browsers will just ignore the rgba if they don’t understand it. I keep the rgba color there to give modern browsers a bit of snazzy styling. If I had a background color on the whole page (blue for example), the semi-opaque gray text would pick up the slightest hint of blue because the background would show through. Dan Cederholm talks extensively about this subtle visual effect in his new book Handcrafted CSS.

We end up with a minimalist and usable clickable list item that uses valid HTML and CSS code. Check out the live demo to see the final result in action.

Here’s the complete CSS code for reference:

ul.posts li a { border: 0; display: block; overflow: hidden; }
ul.posts li a:hover { background-color: #DBF1F9;/* light blue */ }

ul.posts span.category { float: left; width: 20.2%; } /* 160/760px - 1% padding */
ul.posts strong.title { float: left; width: 38.4%; } /* 300/760px - 1% padding */
ul.posts em.excerpt { float: right; width: 38.4%; } /* 300/760px - 1% padding */
ul.posts span.category, ul.posts strong.title, ul.posts em.excerpt { padding: 3% 1% 2% 0; }

ul.posts { border-top: 1px solid #ddd; list-style: none; margin-right: 40px; }
ul.posts li { border-bottom: 1px solid #ddd; }
ul.posts span.category { color: #888; color: rgba(0,0,0,0.47); padding: 4% 1% 4% 0; }
ul.posts strong.title { color: #333; color: rgba(0,0,0,0.8); font-size: 42px; font-weight: bold; line-height: 41px; margin: 0; }
ul.posts em.excerpt { color: #555; color: rgba(0,0,0,0.66); font-style: normal; }

I tested this code in IE7, IE8, Safari and Firefox (for Mac and Windows).

How Your Site Could Handle Different Requests

1. Both www and non-www URLs work.
2. If your visitor enters www.example.com, they will be redirected to example.com
3. If the visitor enters example.com, they will be redirected to www.example.com
4. Or it could be broken!

www and Non-www Work

An example of a site that does this would be TechCrunch. Both the www version and the non-www version work without any redirects.

This is a usable practice. Visitors don’t have to worry about being redirected or typing in the wrong address prefix. However, some search engines see the www as a subdomain. If a blog links to www.techcrunch.com and another one links to techcrunch.com, they are counted as links to two separate sites, which leads to a lower search engine rank. This can severely hurt TechCrunch’s SEO score, although that probably isn’t an issue for them as the #2 most popular Technorati blog.

Redirect to non-www

Digg.com redirects its www-inclined visitors to the non-www equivalent. The readability of the URL is improved because the visitor isn’t distracted by the unnecessary www.

Bonus points: if you have information in the URL (say you’re trying to view the top stories over the last 24 hours), using the www prefix doesn’t delete that information and leave you confused and at their homepage. Check out what happens when you go to their top stories with www. You’ll never even notice the difference.

Redirect to www

Amazon.com is the most popular online retailer and they use this method. When you go to http://amazon.com, you are quickly redirected to http://www.amazon.com. This doesn’t make a difference from a usability standpoint once you consider their audience. Amazon attracts more people that aren’t as technologically-inclined as Digg users. Seeing the www missing from the URL might confuse them to the point of thinking something is broken with Amazon and abandon whatever shopping they were doing. This is the worst case scenario, but none the less, a valid consideration. Amazon made the right choice when it came to which www method to use.

Bonus points for Amazon: if you get a bit too trigger happy with your w’s, Amazon is right there to save you. If you type in wwww.amazon.com, you are still redirected successfully to Amazon’s homepage. This reinforces trust in the Amazon brand because they will always have your back. From a business perspective, this is an excellent idea because Amazon wants to get you looking at products faster by avoiding a potentially confusing error from a simple typo.

URL Was Broked

If your site only works with www.yoursite.com, you are going to run into trouble when a power user comes along, someone who knows that the www is now a pointless exercise. A visitor comes along, doesn’t type the www, and then is presented with a “Server Not Found” error or a 404 page. They will think something is wrong and most likely leave.

Please do not let this happen to your visitors. Accept any variation of URL your visitor can throw at you.

How To Do It Right

The ideal solution for the www problem is to redirect all requests to a non-www address as soon as the visitor gets to the site. During the redirection, the visitor should not lose any valuable URL information either. It should preserve the visitor’s original request, like the Digg example above. Redirect pages are definitely not invited to the party (”wait here for 5 second while we bore the hell out of you”). This allows for usability improvements and higher SEO scores for certain search engines.

Truthfully, it doesn’t matter much whether you use option 2 or 3. It’s a personal preference and I like keeping www out of all the fun!

The only step to redirecting your visitors is to put the following in your .htaccess file and changing example.com to your domain:

Options +FollowSymlinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.example.com$ [NC]
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]]

The first bit is turning on Apache’s ability to redirect certain URLs. The 3rd line is saying “for URLs that begin with a www” and the 4th “permanently redirect to a non-www version of the URL.” The 301 redirect (note the R=301) makes sure search engines and browsers understand that this is a permanent redirection. Copying and pasting 4 lines into your .htaccess file is an easy way to instantly improve the usability and SEO of your site.