HTML/CSS designs for mundane text-heavy content

Question

I am tasked with updating a family of web sites that promote scientific conferences that cater to a niche scientific field. The sites are currently written with some modest CSS layout for the shared common page template structure, but the details of each page are a mishmash of <p>, <br>, and &nbsp; to position the content. This makes it tough to update the content, since the spacings are always changing, and the page ends up ugly at the slightest mod.

So, I'd like to change this stuff into a more CSS-happy state. There are lots of sites that offer tips for specific CSS design goals, but I'm a developer without a lot of web site artistry capabilities and don't have a structure already in mind. Are there any good sites that teach CSS in the context of some relatively mundane -- but effectively presented -- business content? Stuff like the CSS zen garden is way cool, but I'm looking more for something that will both give me some simple text-heavy business data positioning ideas and present those ideas as a CSS learning opportunity.

Does any such site exist?

Answer 1

Sadly, if you don't have much control over the HTML, it's hard to get a solid, consistent presentation out of CSS. This is especially true if you're not able to add special classes/IDs to your elements. And <br/> tags, incosistently used, will wreak havoc with any attempt to standardize the layout.

If you're only limited to the HTML you've been provided, you're primary goal should be to make it as readable as possible. Make sure the font size is large enough that people can comfortably read it leaning back in a chair. Or standing over someone's shoulder. It doesn't need to be too big, but if it's text heavy like you claim, traditional 12pt might feel too small for a lot of reading.

Which font to use is another consideration. Verdana is wider than Arial, so it takes up more horizontal space, but tends to be easier on the eyes. Others tend to prefer a serifed font like Georgia, which can hold up well at larger sizes.

Vertical spacing is important. Make sure to include plenty of visual break-age between areas of the page. You can achieve this with an obvious and consistent subheading style. Also make sure that the line-height between each line is wide enough - people don't like to read 'bricks' of text.

And don't forget horizontal space. A general rule of thumb is that a column of text probably shouldn't span more than 60-70 character per line, or it becomes more difficult read.

Remember that people are coming to your site for information, and the quicker they can access and get that information the happier they'll be. Visual eye candy is nice, but your first priority should always be make the site as easy to use and legible as possible.

As for inspiration, I'm a pretty big fan of the text design over at Information Architects. You may also want to have a look at Subtraction.com. Blogs will probably be a good source of inspiration, as they're typically very text heavy.

Good luck.

Answer 2

I'd say A List Apart is a good place to start.

You can choose from a very broad (and structured) range of topics and then follow the related links from a subject that you find interesting.