Text-heavy pages 2

[doctorChuckles]

Greetings,

I'm a do-it yourself web author, admittedly rather a novice.

If this message looks familiar, I earlier posted it on the wrong forum -- HTML, CSS, etc.

Most of the pages on my site are text-heavy. That's unavoidable. I think I have avoided serious readability errors. I'm more concerned about appearance.

I know enough to keep the pages reasonably short and to control the line length, and to break the text up with headings. I also have larger initial caps, in a dark color, instead of black, at the beginning of each paragraph. That's a start, but it's not good enough.

I'm looking for good examples of how designers have handled text-heavy pages, to make them as attractive as possible. The biggest problem seems to be breaking up the text with design or decorative elements. I'm having trouble coming up with good ways to do that.

I've personally invented many bad ways to do dress up a text-heavy page. The grass growing in the background-image, for example!

I'd sure appreciate it if a few subscribers would post some URLs of good examples.

Thanks in advance.


Tim

 

[Foamcow]

Why do you need to 'dress up text-heavy pages'?
Less is more and simplicity will win out in the end.

You already know about line lengths etc. Keep your lines to around 12-15 words (there is debate on this).
Choice of font is important as is the font size (between 10-14px is about right)
I don't know if it applies to your particular pages but you should design to a grid. (resources below).
What you do need to consider is the vertical rhythm of the page. The line spacing, paragraph spacing etc should let the text fall neatly onto a vertical grid.

Rather than try to explain here, it's quite complex, take a look at these sites:

http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/

http://www.subtraction.com/archives/2005/0901_the_funniest.php

http://cameronmoll.com/archives/2006/12/gridding_the_960/

This one is particularly good

http://webtypography.net/sxsw2007/

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[ChrisHunt]

Don't forget [tt]line-height[/tt]. Increasing the spacing between lines can have a dramatic effect on readability (don't overdo it though).

What's your URL, Tim?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[doctorChuckles]

Thanks very much to both of you.

To clarify, my text-heavy pages are almost ALL text! They seem way too dull, to me, though they might be readable.

My old site has lots of things wrong with it. Embarrassing, really. I've not yet put any new design elements in place -- still working on them offline.

OTOH, I must say the old site has been effective and my clients say they really like it. These are local clients, most of whom get the URL from my yellow pages ad.

FWIW, it's

http://www.doctorTimothyMiller.com.

You can see the problem with text-heavy pages. Right now, the line length depends on the size of the browser window, there aren't enough headings, and so on. That will be changed in the next version.

Cheers,


Tim

 

[doctorChuckles]

This is me, the OP.

Believe it or not, it didn't occur to me to scrutinize all the text-heavy sites. There are gazillions of them! Britannica.com, wikipedia, Snopes, and so on. Derrrr!

That's useful, but not conclusive.

I must rephrase my question. I want my text-heavy pages to look more attractive than the typical text-heavy page. For instance, someone reading a wikipedia article or Snopes article is highly motivated, and not necessarily put off by a lot of text, as long as readability is good, and might consider decoration a distraction. If a wikipedia user loses interest, wikipedia probably doesn't care that much. Billions more where that one came from...

By comparison, my users are not necessarily all that motivated. Before they hunker down to read the text, I want them to glance at the text-heavy page, and get some sense that it looks a little bit appealing.

Maybe there's no simple answer to this one. Still, I'd be interested to hear some opinions.

Cheers,


Tim Miller

 

[Foamcow]

A simple answer might be.... pictures.

http://www.istockphoto.com

is a good resource for low cost, royalty free images.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[ChrisHunt]

I don't find your pages particularly text-heavy. From the way you described it, I was expecting to have to scroll through acres of the stuff. That wasn't the case in any of the pages I looked at. As a quick fix, I'd consider increasing the font size and line height slightly.

What your site certainly is is markup-heavy. You really don't need to use a table to achieve that layout, nor do you need to use Javascript to power the menu (Google for suckerfish menus as an alternative approach).

I'm not a big fan of highlighting the first letter of every paragraph, but if you want to do that you can do it with CSS like this:

p:first-letter {font-size: 120%; color: #f00; }

without having to use any <span>s in the markup.

You should use proper heading elements - <h1>, <h2>, etc. rather than some generic <div>.

As you've already noted, line length can be an issue on big monitors. I'd suggest you wrap your whole page in a <div> like this:

<body>
<div id="container">
... page contents in here ...
</div>
</body>

Then you can limit the width with CSS something like this:

body { text-align: center; }
#container {
   margin: 0 auto;
   text-align: left;
   max-width: 800px;
}
* html #container {
   width: 800px;
}

Modern browsers which understand [tt]max-width[/tt] will not allow the page content to get wider than 800 pixels (tweak this number up or down as you like), older IEs will fix the width to that amount. I'd give the content area a lighter background to the "true" background of the <body>.

If you want to give your text pages a magazine-like look, try using "pull quotes" to highlight particular sentences. There's a really slick way of doing this with Javascript at

http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/

If you can find some suitable stock images to break up the text, it can make it look more appealing - but again, be careful not to overdo it.

Hopefully you'll find at least some of this advice useful.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[doctorChuckles]

Chris, that was wonderful! Excellent suggestions.

To seasoned programmers and designers, this sort of thing might be obvious. Not to me! Fortunately, I can recognize good advice when I see it.

Thank goodness for tek-tips, too.

Tim

 

[ChrisHunt]

Here's another useful article I've just found about formatting text online:

http://www.digital-web.com/articles/does_your_copy_hold_up_to_a_quick_glance/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[harrymossman]

Way too text-heavy for me. And I'm a guy who reads cereal boxes if the morning news doesn't arrive on time. If I opened one of your content pages, I would leave without reading it.

Note that I live in Northern California too. So perhaps I have a sense of what your clients might be like.

A sample of your text scored at 10th grade reading level. Not bad. But many sentences could be broken up without sounding childish.

You do a good job of avoiding unnecessary jargon and long words. Scan through looking for additional words that have a shorter synonym.

Use sidebar boxes, e.g. for the paragraph starting "There are a few treatment methods I DON'T use. . . ."

I agree that stock photos may be an option. Also pull quotes. For sure, break up the page with grids.

Harry Mossman
Sacramento, California

 

[monksnake]

My verbal usage scores pre-K

<.