Brad Wardell's site for talking about the customization of Windows.
Tips for Internet publishing
Published on November 8, 2007 By Frogboy In Internet

Running a blog community as well as a multiple sites that involve people submitting articles has taught me one thing: most people do not know how to use word processors or web editors correctly.

Programs like Word, Expression, DreamWeaver make it relatively easy for people to communicate with words very effectively provided that you know how to use them.

Today, I'm going to write a brief set of rules on communicating effectively on the Internet.

Rule #1: Use Tags

If you find yourself selecting a line of text, making it bold and making it larger to indicate that it is some sort of header, stop. Don't do that. You just cause everyone pain by doing that.  Instead, use header tags.

Use tags such as heading 1, 2, etc. to make headers.

By using header tags, your document will automatically be supported by any future effort to use the table of contents tools.  Moreover, if you decide to switch fonts, you just have to modify the header tag.  But the big reason they're important is due to the nature of the web -- if you post something to the web using header tags, they will tend to be supported. By contrast, if you simply change your font to bold and change the size, the result may not look right when you post it on-line.

Rule #2: Avoid using Microsoft Word for web documents

I hate to say this but Microsoft Word sucks for writing web documents that are going to go on-line. It's particularly true if you're writing something that is going to be submitted to a site via a web form of some kind (i.e. like when you write an article on WinCustomize.com).

Even if you select "Web Filtered" in Word, to save, you still end up with an HTML file with a bunch of custom class names in it that may interfere with the CSS of the website. Use Front Page or Dream Weaver or some simple HTML editor. You don't need to write it in HTML literally, just write it in a rich editor that saves it as pure HTML if you can.

Rule #3: If you use Tables, use them right

If you find yourself using a table as part of your document, then make it look like a table too.

For example, which of the following is more aesthetically pleasing?

Example 1:

Magic Weather for DesktopX
by Stardock Design

The Magic Weather is the result of a great deal of time and effort put in by the entire team to create a really cool looking weather widget. It uses data from Acuweather to display the current weather conditions as well as a 5 day forecast.

 

Example 2:

Magic Weather for DesktopX
by Stardock Design

The Magic Weather is the result of a great deal of time and effort put in by the entire team to create a really cool looking weather widget. It uses data from Acuweather to display the current weather conditions as well as a 5 day forecast.

Example 1 is how most tables I see posted by users on-line.  But doesn't't example 2 look a lot better? If it's a table, make it look like a table. Put a border around it. To do that, you make a table, and give it a border and then put another table with columns inside. It doesn't't really take any longer.

In addition, control the size of your tables.  If you're showing images that are say 240 pixels wide, then decide precisely how big you want your text to be.  Don't rely on percentages. Give it a pixel size if you can.

Rule #4: Using Thumbnails

I'm amazed how often people will simply use a full sized image that they force size down.

Which of these looks better?

 

Image where the user simply sizes the full-sized image in HTML. Will typically link to larger image.

 

Separate thumbnail created for smaller image, links to larger image.

You may also have noticed that I put my screenshots inside of a box. Since I made the entire background a contrasting color to the background of the page, I didn't need to put a border around it. When writing for the web, it's important to break up your writing into bite sized chunks visually.

Rule #5: Using Bullet Points and Number Lists

If you're going to put together any sort of list, use bullet points or numbers. What I mean by that is to use the actual web versions of these.

Example 1: Manual number list

I have 5 things I have to do today:

1) Get up
2) Bathe
3) Eat
4) Work
5) Sleep

Example 2: Using HTML based numbering:

I have 5 things I have to do today:

  1. Get up
  2. Bathe
  3. Eat
  4. Work
  5. Sleep

Little things like indentions help break up the text and make it easier to read.

  • Family
  • Religion
  • Friendship

Those are the demons you must slay if you want to succeed in business.

Conclusions

Writing for the web does require some adjustment. But with a little practice, you can create articles that are both visually appealing as well as intellectually stimulating.

One final tip about the Stardock sites like JoeUser.com and WinCustomize.com -- if you write your article on another server, completely with images, save it, load it in a web browser, copy and paste it into the GUI editor on a Stardock site, the Stardock site will automatically put in the image paths into the HTML for you which can save quite a bit of work.

Hope this helps.  Good luck!


Comments
on Nov 08, 2007
Very informative, Thanks

It's My Secret
on Nov 08, 2007

Thanks indeed Frogboy, this is good stuff. Never again will I use MS word to pre-build my documents before posting them online!!!

on Nov 08, 2007
Cool. Thanks for the tips.   
on Nov 08, 2007
Thanks for the tips, they will help
on Nov 08, 2007
Very informative.

When's the Writing for the Wiki one coming, I need help finishing my never ending article.
on Nov 08, 2007
Tables for layout? Blasphemy!
on Nov 08, 2007
Thank you Brad this does help with things I have going.
I'll be trying something very new here soon. Still working out a few bugs and finding the time to finish this project.

SGT
on Nov 09, 2007
Here's an online table maker for anyone that doesn't have the grasp of it. Table Maker Its real easy to use.
on Nov 09, 2007
When's the Writing for the Wiki one coming, I need help finishing my never ending article.


I'd just suggest looking at the other articles on the site to get an idea of how headers work, inserting images, etc. That's how I learned it (and I had never edited on a wiki before using the WC one).

I made a rather simple how-to for adding a page on the wiki: How to Add a New Page.
on Nov 10, 2007
I made a rather simple how-to for adding a page on the wiki: How to Add a New Page.


Thanks. Was pretty sure either you or sViz had written something.
on Nov 17, 2007
Sorry, I can't see any difference between the two weather widget shots. What am I overlooking?

As for the rest, thanks for the intelligent tips; I'll try to put them into action ASAP.