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

I had a similar situation and learnt a lot by downloading and studying some of the designs at http://www.openwebdesign.org/ . There are a ton of designs and the forums are full of people willing to help.

Answer 2

Eric Meyer is always a good CSS resource.

Answer 3

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.

Answer 4

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 5

First things first. Use simple and semantic XHTML. If applicable, ditch those <br>s for <p></p>s. Use <h1>,<h2>,<h3>, etc consistently. You know you're on the right track if your page looks clean and readable without a reference to the CSS file. David Shea has a great markup guide.

David Shea's Markup Guide

As for style guidelines... I like Ben Hunt's Web Design From Scratch even though he pimps his eBooks incessantly. The content is good.

Web Design From Scratch: Style Guide

Web Design From Scratch: Current Styles

If you are looking for sample ASP.net sites with a bent towards proper CSS check out Microsoft's free templates.

ASP.net Design Starter Kits

Finally, and this is a real gem here, if you need to style tabular data, Smashing Magazine has the goods. These table designs are off the charts. Sample code included. Actually, you could spend hours on the Smashing Mag site. So many great examples and free stuff.

Smashing Magazine: Top 10 CSS Table Designs

Smashing Magazine: All CSS Articles

peace|dewde

Answer 6

Battle of the CSS Frameworks is another good resource to start with. You might be able to cut your CSS development time down by adopting a good, simplifying framework.