Text-heavy Site Help

[MadMango]

I'm working on text-heavy site for a RPG world. The site is about 60mb of text and 30mb of graphics (mostly maps). I'm looking for suggestions for how others would approach a site that is content rich like this?

What type of navigation do you think is best?
What fonts are easiest on the eyes?
What colors are easiest on the eyes, yet still visually stimulating?

 

[JoJoH]

Hi,

1) In my opinion, in pages with alot of words, use clear cut fonts like Verdana and Arial. Verdana and Arial looks expensive in a darker shade of gray (#666666). But for larger type like headings and such, use Times new roman instead. Verdana and Arial looks good in fonts on the smaller to regular side. Wonderful for large paragraphs. Times new roman looks good too, but when used in large paragraphs, things could get hard and messy to read. Verdana and Arial looks cheap when put in larger fonts, but Times new roman looks professional and classy for larger fonts like headings.

2) As for colors, it really depends on your site's theme... Just don't use crazy colors like green, pink, yellow, etc... they look cheap and are unpleasant to the eyes... Black, dark gray are the safetest colors, even dark blue, just like this site... it really depends on the look of your site.

3) If you do not want people to just skip your site when they see alot of text, then try to have more white space around the margins. Seperate contents into resonable paragraphs. Occasionally high-light/color important words to draw viewer's attention. Use headings/numbering/bullet points too when appropriate, people tends to like to read those better.

4) Make the content interesting, if the user can benefit from the content, they'll keep reading.

5) As for navigation, just remember--don't lose the user, let them know where they are at within your site. I don't really know what you meant by what "type" of navigation... If you are talking about a side bar navigation or a top bar navigaion, well, it, again, depends on your site's design and how many navigation elements you have. If you have alot of links, you could use the side bar navigation tactic. Some site use both. Also, don't bug the user with too many clicks.

Hope this helps!

JoJoH

http://www.jadeboutique.com

 

[ChrisHunt]

You are very lucky to have a "text-heavy" site - many webmasters struggle because they have too little content, not because they've got 60MB to parcel out. Search engines like text too, so you should expect plenty of hits from them.

To answer your questions, I find sans-serif fonts (arial, verdana, etc.) easiest to read on-screen, so you should use one for your body text if possible. Dark text on a light background (black on white being an obvious choice) is also a must.

However colour scheme and typography should reflect the nature of your content - in your case the nature of your world. A high-fantasy medieval world might look better in earth tones, perhaps using a script font for headings; a cyberpunk world would call for greys with shots of bright, neon colours. Whilst body text should always be fairly conservative, you have more freedom with heading fonts (see faq215-1525 to see how to embed a particular font into your web pages).

Whatever you do, use an external CSS file to centralise the choice of fonts and colours as much as possible. That way you can experiment with a number of looks without having to change dozens of HTML files. If possible, use SSI to include standard content - like your navigation bar - on each page (DON'T use Javascript for this, not everybody switches it on and search engines won't like it either). With a site of this size maintainability will be your biggest problem!

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[MadMango]

Thanks for the input folks.

I have been using size 2 Verdana (ffcc00) on a dark background (333333), so it's good to know I'm in line with other peoples thoughts. The rest of the color theme is: links (ffff00), visited links (ff9900) and active links (ff0000).

I tried the black/dark gray text on white/tan backgrounds, but found it to be very harsh after an hour or so of reading. I imagine users reading the screen, sitting in the dark. I didn't want to blind them.

JoJoh, I like your suggestion of highlighting certain words in the paragraphs to keep the reader's eyes moving, I'll incorporate that.

ChrisHunt, I'll have to look more into SSI, it sounds promising. I'm a novice/hobbist at best, and reply on DW4 for 99.5% of my coding.

As far as the site goes, I have a Splash Page (w/counter) then all internal links point to a Main Page that is different than the Splash Page. Is this still an acceptable design aspect, or is it antiquated now?

 

[ChrisHunt]

Check out faq253-2000 and faq253-3309 for SSI. Your web host needs to support it (which most free ones don't), and you may need to name your files whatever.shtml, but it's well worth it on a big site.

Splash pages are generally frowned upon, why make people go through an extra page to get to your main one? The only time it's really acceptable is if you need to offer the user a choice between versions of a site, typically different languages or with/without flash. That said, it's your site and your call. If you're going to have a long-loading element on the page like a Flash animation, make sure you have a link that allows visitors to bypass it.

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[cian]

I'd say keep it very simple.
I find there's nothing worse than a text-packed site based in a busy template. Make it simple, clean and easy to read.

Use good spacing, keep away from long paragraphs and try as much as possible to break the content into managable chunks.

As for navigation I personally would go with 1 simple menu, listing main sections, a more indepth expandable menu (js, dhtml) and a site map link on every page.
Make sure to have a site search facility also.

"I tried the black/dark gray text on white/tan backgrounds, but found it to be very harsh after an hour or so of reading."
I doubt many readers will stay online reading for an hour, more than likely they'll download the page, print it or copy/paste. either way keep it simple, clean, well spaced out with good clear fonts.
And don't make the text too small!!

If your content requires a lot of images then make sure your template has minimal images. Set yourself a maximum size of page and try to stick to it. Loading time is very important as we all know.

That's all I can think of for now.

SSI is a good way to go but can be heavy on the server, depending on how many pages will be parsed. 60mb of text, number of pages?

An alternative to SSI would be PHP but you definitly need to use some sort of template system for such a large site, ssi is the easiest.





- É -

http://www.ssi-developer.net

 

[MadMango]

ChrisHunt and cian, I actually found that DreamWeaver can mimic SSI with something called Library Items. I know it's probably not w3C compliant, but it seems to do what I need it to do. I don't think I need to worry about w3c since the site will be non-profit, and it's more of a hobby and an actual business site.

I will be using very simple templates. Cian, you mentioned sticking to a selected page size... what would a decent page size be? 10kb, 50kb? 100kb? I posted a question regarding this a few weeks ago, but didn't get much response: thread253-583643

As for the site, currently I have about 60mb of text, not sure of how many pages that is. I know one section was printed to hard copy and created 118 pages at Arial/size 10 and standard 1" margins... sans graphics and maps. Whew!

 

[ChrisHunt]

I don't use Dreamweaver (I'm a die-hard hand coder!), but my understanding is that Library Items are snippets of HTML that Dreamweaver adds to each page as it produces it. If you change the content of the library item, DW will rewrite every HTML page that uses it - and you'll then need to upload the revised pages to your server.

The advantage of this approach is that you need no special facilities on your server, and take no performance hit for parsing pages as you serve them. It also makes it easier to view your pages off-line on your own PC. The disadvantage is the additional maintainance involved in uploading changed pages to the server, though I understand Dreamweaver automates much of the process. Both Library Items and SSI deliver the same core benefit - centralising common elements into one place. Put enough time into developing your basic template in the first place and you shouldn't need to make many changes anyway!

Non-profit or not, your site should comply to W3C guidelines if at all possible. Doing so will make it accessible to the widest range of browsers, and may make it load faster too. It's not difficult to comply with one of the Transitional DTDs.

There are few hard-and-fast rules with regard to page size. I try to keep total page weight (it's own size + size of any images) to less than 32K, but don't always do so. It's important that your front page be lightweight and quick to load, as people delve deeper into your site they're probably willing to wait longer.

I think your real problem with this site is going to be structure and navigation. People on-line do not tend to read through 118-page documents end-to-end, they want to pick out particular bits & pieces that they're interested in. Think about how you might carve your documents up into more manageable chunks.

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[CliveC]

You might consider putting the document all in one page with anchored chapter headings. This makes keyword search and navigation easy. Another feature you might include is a place saver so that the place on the page will be saved between sessions.

Clive

http://tubularity.com

 

[ChrisHunt]

I estimate the size of your 118 page document at

100 characters per line × 55 lines per page × 118 pages = 649000 characters

Admittedly it's an over estimate as it makes no allowance for paragraph breaks or headings, but you're still looking at around half a megabyte before you add any HTML markup, images, etc. Please DON'T put all this on one page - nobody is going to wait to download all that, still less read it all.

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[CliveC]

Text loads very quickly. Diagrams can be handled with links instead of including them in-line. Here is an example of a Shakespeare play. I tried increasing its size four-fold with no problem.

http://tubularity.com/h41

Clive

http://tubularity.com

 

[ChrisHunt]

Half a megabyte of text loads as slowly as half a megabyte of images. It's too much to go into one page.

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[MadMango]

Don't worry, that .5mb page is actually split into about 24 pages.