The bigger the heading, the more important it is

Are you using headings effectively on your website? Over at buildInternet,  Zach Dunn has written a quick article about how to use the HTML Header Tags properly for headings. Header tags are numbered starting at 1, with h1 being the biggest and most important. He created the great graphic above, and you should read his article here.

A newspaper is a classic example of heading hierarchy. The name of the newspaper is biggest, boldest, and at the top of the front page. Then, a bit smaller in size is the front page main story’s heading. And the other stories have smaller headings – the smaller the heading, the shorter and less important the story appears to be.

I’ve added arrows and boxes to this photo of a newspaper’s front page to illustrate the point.

Headings in a newspaper

If this newspaper was a website, the headings in the newspaper would follow this hierarchy:

H1 – White

H2 – Yellow

H3 – Orange

H4 – Blue (same size as orange but not bold)

H5 – Green

If you look at this website below, you’ll see that the headings get smaller for each subsection:

Website headings

Is your site very user-friendly for your visitors? Do you have your information neatly organized under proper headings and subheadings?

More resources on headings/headers:

Variety in Heading and Body Fonts

Optimal HTML Headings for Proper Information Hierarchy in WordPress Blogs

Negative headlines arouse curiosity

Here’s a great article about writing compelling headlines…

It’s the reason people love NASCAR and read National Enquirer.

We don’t want to admit it. We’re not supposed to feel that way. But secretly buried, deep down inside, we all want a front row seat to the wipe out of the season.

Read the whole story at copyblogger.com/train-wreck-blogging/

photo credit: hyperscholar

404 Error page of Center'd!

Here are 60 Really Cool and Creative Error 404 Pages.

Just remember that your error page should be designed primarily to help your visitors get back on track as quickly as possible. Secondarily, being funny helps to take the sting of frustration out of getting lost on your site. Better to be helpful and not-so-funny than to just be amusing and not helpful.

Mo Serious brings us a seriously cool video about website design, coding and SEO principles, all set to rap music. Who would have thought? I’m in love with this guy – he’s a genius.

Click here to view the embedded video.

Read the whole article: How Batch Processing Made Me 10 Times More Productive

photo credit: CarbonNYC

“[Our beta testers] would sit in front of the Google screen for 15 seconds, 30 seconds, 45 seconds, a minute…Google was perplexed.”

Interested in what the problem was and how easily it was fixed? Read the article:

What You Never Noticed About Google

Smashing Magazine has a list of 10 Usability Nightmares you should be aware of with examples from real sites. There is also a list of 8 usability checkpoints:

1. Don’t use pop-ups.
2. Don’t change users’ window size.
3. Don’t use too-small font sizes.
4. Don’t have unclear link text.
5. Don’t have dead links.
6. Have at most one animation per page.
7. Make it easy to contact you.
8. Make links open in the same window.

Do you agree with the article? Do you know of any other usability nightmares that they missed?

10 Usability Nightmares You Should Be Aware Of ~ Smashing Magazine

On a side note, comment #142 for this article was very amusing:

“I think that every designer should design for their grandma. If she can get around the site, only then can you pat yourself on the back. I have had customers that when I said click on the link, they actually picked up the mouse, put it on the screen and then clicked.”

Oh, dear.

Here are a few items from the list:

• Keep background colors and images at a minimum. Backgrounds are often less than visually appealing and can make your site load slowly.
• Reduce choices. Avoid overwhelming your visitor with lots of different options.
• Stay consistent. Check to make sure that colors and design are in the same general scheme so that visitors know they’re still on your site.
• Validate design in alternative browsers. See how your design renders in browsers like Safari, Opera and Firefox to make sure that it looks right no matter who is viewing it.

101 Five-Minute Fixes to Incrementally Improve Your Website

photo credit: booleansplit