Wiki Life: Hints & tips for keeping the article design under control

The latest Wiki Life articles have been guiding you into some design principles on the Technet Wiki.
I hope you have enjoyed last week’s Wiki Life: Design Principles.
Ana Paula de Almeida has put together a useful series of baseline design principles.
In that perspective, also check the techiques used by Markus Vilcinskas in the WIki toolbox (See: Wiki Life: Introduction to the Wiki Toolbox).

In this blogpost I would like to highlight a few advanced design tips & techniques.

Using and Fixing TOC

The Wiki Toolbox has some templates on board to build a basic article with advanced layout, using headers and TOC.

The use of the TOC is explained in this article How to Automatically Add a Table of Contents (TOC) to Your Wiki Article .
Other Wiki Ninjas have put considerable effort to explain the TOC in other languages too.

Important note:
When you plan to use the TOC, avoid using numbers in the header text, as the TOC auto-generation risks to fail.

See: Tips & Tricks to fix the Wiki article [TOC] (Table of Contents)

Using and Fixing color

To make your article more attracive, the use of colors is an interesting technique.
But sometimes the use of the default color codes in hexadecimal or RGB values in HTML doesn’t deliver a stable result.

A practical hint I wish to highlight is the use of color names, see WIKI: Troubleshooting color issues in your Wiki articles

Using the “Back to top” Link

The use of the “↑ Back to top” link in an article is a useful technique to ease navigation.
There are 2 components you need to make it work.

1. Use a “TOP” Anchor, on the first line of your HTML code:

  • Go into HTML Edit mode of your article.
  • The first line of HTML code must be :

<a name=”Top”></a>

2. After every large paragraph use the “↑ Back to top” link

In HTML code it looks like:

<p>↑&nbsp;<a href=”#Top”>Back to top</a></p>

Using and fixing tables

It still requires some further investigation, but one of the items Wiki authors seems to struggle with is the use of tables.
One of the articles I would like to refer to is TechNet Wiki: Technology Tags.

Lots of people have been contributing to this article.
But the use of the table in the article has not always the required result.

The use of relative column width  (in %, not fixed px), seems to stabilize the table layout when the articles is published.
More on this topic to follow later on.


[Ka-jah Shakaah!]
The Security & Identity Ninja.

Peter Geelen
Premier Field Engineer – Security & Identity at Microsoft

Comments (4)

  1. Kurt Hudson says:

    This is a great article and one that I will have to put into my favorites. I also want to say that Markus found out that Expressions Web is now free for download. I find it to be an excellent TechNet Wiki offline copy and paste formatting tool. I made a short URL link to the download

    Using that editor makes me feel much better about not losing my work and has resolved a lot of the issues I've run into trying to fix formatting in my own TechNet Wiki articles. So far I have just been able to click Edit, do a copy and paste into a local HTML file, and when I am done, do another copy and paste into the Editor on the TechNet Wiki.

  2. Very thorough! Thanks!

  3. Nice writing Peter .. I have to learn to add TOC on my articles ..

  4. Peter, about  the TOC in other languages, recently I created this article in pt-br:…/

    To keep the original article x articles translated, I will adjust my article for the content of the How to Automatically Add a Table of Contents (TOC) to Your Wiki Article.

    Although it is the simple procedure to include the TOC it generates many questions to contributors. =|