Five Minute Upgrade – Increase Scannability

Five Minute Upgrade – Increase Scannability


Meaningful Emphasis

When scrolling down a page, the last thing a visitor wants are miles of paragraphs, all in the same font and font size, with nothing to break them up or call attention to any parts of them. If a page looks overwhelming and monotonous, chances are you’ve just lost a visitor.

The main thing you have to ask yourself when designing a page is “What are the key points I want to get across?”. These are the items that you will want to take particular care to make pop out from the rest of the content. You may have additional points you wish to make, but try to create a hierarchy in order of importance, the items at the top of this hierarchy will get the most emphasis or “pop” on the page.

Now that you have elements of your message, here are some ways to emphasize them:

  • Use a different font for the header than you do for the body text.
  • Font size dictates importance.
  • Bold should be used to highlight a key phrase or word. Don’t over do it.
  • Italics are secondary to bold, some people argue their exact proper usage, but I’ve found them useful in citations and longer phrases.
  • Lists draw the eye and give the visitor distinct points to scan over. I’ve used them here for a reason.
  • Links should stand out from the rest of the text. It’s basic but not everyone thinks about this. Use bright colors and underline if you wish.

Format Your Text

You are not obligated to stick with the default formatting, customization extends beyond just font family and size. There are quite a few tweaks made possible by CSS, here a few useful ones:

  • line-height: Defines the amount of space between lines of text. Slight increases can make paragraphs seem less bunched together.
  • word-spacing: Sets the amount of space between words. Minor changes to this can be beneficial, but sometimes unnecessary, so use your best judgment.
  • letter-spacing: Sets the spacing between each character. Slight adjustments can add breathing room or tighten up text.

Add Breathing Room

This point is often beaten into the ground, but white space does wonders for readability. It’s not always about how much you can fit into the visitors screen, it is more important that they take in what they do see, not get overwhelmed by it.

  • Try increasing margins/padding around text (Make the leap from 5px to 15px, it’ll show).
  • Use borders to establish boundaries and separate content (1px lines below headings and borders around images).

Putting It Into Practice

Now that you have been armed with knowledge, hopefully you’ll be able to implement some useful changes into your work. Click the image below to look over my example which puts these techniques to use and see the results for yourself.

Check out a live example

Posted Friday, April 10th, 2009 · Back to Top

SPONSOR

Add Comment

17 Comments 9 Mentions

  1. Vadim P. Author Editor

    Great, thanks.

    ·

  2. Matthew Author Editor

    This is a wonderful post! :)

    Matthew’s last blog post..Stopping the Non-Native Wildlife Invasion Prevention Act, H.R. 669

    ·

  3. Danh ba web 2.0 Author Editor

    Nice post. Thanks so much

    Danh ba web 2.0’s last blog post..Những free themes hàng đầu dùng để tạo CSS Gallery và photo Gallery

    ·

  4. W3Planting Author Editor

    i think you missed adding stock images into the post, which best suits with the content of the post, what do you say?

    W3Planting’s last blog post..Web Based FTP Client – Net2FTP

    ·

  5. Callum Chapman Author Editor

    simple but great tips, cheers!

    ·

  6. Robin Cannon Author Editor

    Excellent outline there. I know that it’s a flaw on my site, because I currently have the font size too small. Something I’m addressing in the reasonably near future, but as part of an overall resdesign.

    I’d reiterate W3Planting’s advice that adding imagery to the text can increase scanability. And in addition to your suggestion about the use of borders, adding something like a drop shadow to a highlighted paragraph can make a big difference also.

    Robin Cannon’s last blog post..Funky Friday Collection – 10 April 2009

    ·

  7. Binh Pham Author Editor

    Nice post. Thanks so much

    Binh Pham’s last blog post..11 Most Popular Cross-Platform And Free Softwares

    ·

  8. Angela Author Editor

    Very useful post thank you!

    ·

  9. Sam Dunn Author Editor

    I would definitely agree with the use of images to break up content. I am typically wary about the use of stock images, unless they are clearly relevant to the sites purpose.

    I discuss this briefly in a previous article:
    http://buildinternet.com/2009/01/6-reasons-websites-fail-at-getting-their-points-across/

    ·

  10. Cristhian Bedon Author Editor

    Good tip! I agree with what you say on stock image – they need to be relevant or to me it seems like I am making the reader’s mind wonder else were…

    Cristhian Bedon’s last blog post..Want To Build Your Own Multitouch Surface Computer?

    ·

  11. Hezi Author Editor

    such a nice post!
    great job!

    Hezi’s last blog post..heziabrass: This is the noise that keeps me awake! ♫ http://blip.fm/~47ifi

    ·

  12. tim Author Editor

    Nice tips, good post.

    ·

  13. carl Author Editor

    great tips

    ·

  14. Anime Art Author Editor

    oh ok i got ur point with the example. thanks ur right. thts a mistake i have made on my site’s homepage i guess. all to simple

    ·

  15. andres Author Editor

    Wow, nice tips, very very very thank you..

    ·

  16. hguhf sdhvhj Author Editor

    The next time I just read your blog, I hope that it doesnt disappoint me up to this one. I am talking about, Yes, it was my choice to read, on the other hand actually thought youd have something interesting to state. All I hear is a number of whining about something that you could fix should you werent too busy trying to find attention.

    ·

  17. Bank Card USA Author Editor

    understairs

    ·

 

Build Internet by One Mighty Roar. Since 2008.