Wiki Formatting
#1

Wiki Guidelines

Table of Contents
Have you ever been curious about how you should and shouldn't format the Wiki? What's acceptable? What's not acceptable? This is not a guide about how to format the wiki, but whether you should.

First and foremost, the Wiki is a tool used for the dissemination of large quantities of information -- a.k.a. it's a place where people can put all their character and player related information for other people to see and reference. However, it's not meant to be a place for those design-savvy folks to flex their proverbial creative muscle. Embellishes here and there are acceptable, but what goes too far?

When formatting the Wiki, ask yourself if that extra border or background is there because you think it's pretty, or if it helps with the visibility and legibility of the information. If the answer's that it's pretty, you probably don't need it.

What to do & What not to do


Here we have our cute mascot Reginald's Wiki profile. It has a lot of information, but it's well organised! Great! You can see everything that might be super relevant right off the bat like what he looks like, his common nicknames, a brief bit of summary in his favorite language -- (fake) Latin -- and what other players are free to assume about Regi.

But there are some elements of the page that aren't helpful. While it's a visually pretty page, there are a few extraneous elements and bits of unnecessary color that lead the eye around the page. Depending on the colors used, this type of layout can be visually overwhelming and a little claustrophobic.

Let's break down what's detracting from the page and how it can be fixed.

Overview Table

The Overview table is a great way to give a reader a lot of quick information. But in his zeal to show off his coding savvy, Reginald may have over done it just a little bit.

Dividers
Reginald recently discovered that he could make some really cool and colorful dividers. Unfortunately, Reginald also hit the gas and put it in quite a few places on his page. These triple-bar dividers are excessive and unnecessary. If you look at the table, where does your eye go? It's quite difficult to focus on this table because there is just too much visual information detracting from the key information: the text. If the decorations are making it hard to focus, that means it's too much!

Font & Background Colors
While not the most dramatic choices in color, there is some legibility issues with the font colors of the subheaders on the light background. It makes it somewhat harder to see and quickly understand. Anything with a background should have high contrast colors in order to improve visibility. Remember, we do have folks who may not see well or are colorblind! Try to make it easy on them!

Time to prune! Snip, snip, snip...

A few simple changes really improved the visibility and legibility of the information! Remember, the wiki is meant as reference material. If you want to show how talented you are, we recommend looking into a character website so you can flex those creative muscles in a more appropriate place.

Picture & Basic Info Table

While not as common anymore, this is an even more compact blurb. Most information included here can be in the overview table, but many players specifically have this smaller box so it's visible alongside opening paragraphs. It should still follow the other guidelines and not detract from the page overall.

Unfortunately, there's a bit too much color and detail in this space, too. It's one thing to have off-color table cells to distinguish labels in a large table, but in one this small, it's largely unneeded. Besides, grey works well for this purpose and isn't as visually over-stimulating. Colored labels don't need to be in every part of the page just because!


So, what changes to make?

Very nice, Reginald! While he has not changed much with the layout and style of the table, he's removed the unnecessary colors while still setting a light grey background on the "label" sections to differentiate them more easily.

He has kept a little pop of color at the top of the table as his one bit of "decoration". Is it necessary? No, but this is an acceptable amount of decoration for this part of the page. After all, it's the likely the first thing someone will see when they load this page.

So how does this all look together? What did Reginald do to further improve the page for himself?


Results


FROM


TO
Reginald went a step or two further and changed up his Overview Table layout. Of course, you don't need to do anything like this yourself. He just wanted to do something that was not just a simple prune. And that's okay! The information is still all there in a less cluttered and more easily read way. That's so much better, Regi!

But there is more wrong with your page, Reginald.. Let's move on to his next section.

Other Sections

Reginald! Oh my! This looks quite colorful! But... once again, there's a lot going on. It feels like most of this section is color and the important bits are taking a backstage to the many splashes of color. Just like his overview table, there is too much unnecessary decoration for the sake of decoration. We're going to need to fix this up.

it's important to note that we discourage the use of colored backgrounds in tables outside of headers. If you look carefully, Reginald has added a slight background to some of these sections. Avoid doing this!

Changes made
The key things that needs to be changed is the excessive use of colored backgrounds for sections. Every section had a faint grey background that was not necessary. There was a lot issues with using small fonts and poor contrast just so that things look pretty.

Reginald further changed the way his text; text that may have been slightly less important had its font size decreased while important information was changed back to the standard size. Most of the text on the wiki should not be sized down just for visuals. The smaller the size, the harder to read it might be for someone with visual impairments. If it's key, the rule of thumb is to keep the size unchanged.

Regi's edited version may be less colorful, but they are no less impactful. The information is readily digestible as needed and the eye is not straining to find something in a colorful and pretty -- but overwhelming -- table.

Full color backgrounds
The last example we'll look at on his page is this section of his character's personality traits. There is quite a lot of information in here and it's definitely laid out for the reader to differentiate. However, the biggest problem with this is that there are colored backgrounds taking up the majority of the space and the only white in this section are the borders. If you look carefully you'll also see that there are slight differences in the background colors, too.

Unfortunately, this is not permitted. The vast majority of a page should be white, as we mentioned earlier.

Here Reginald has removed his colorful backgrounds and headers. However, he has added an image into the table to break up the monotony a little bit. This is totally acceptable! It's not required but if you look at a Wikipedia page, there will be images added to the sides of their pages. An occasional image can help to break up walls of text as well as help provide example images as needed. The key part here is that the majority of the page is white.

Takeaways


Hopefully this guide has helped you better understand our expectations of what should be done on the Wiki and what should be avoided. The Wiki is intended to provide information in as neat a way as possible and as uniformly as possible, much like Wikipedia. There are many ways to make tables and text look interesting without having to use color even once, it's just a matter of creativity!

Remember, if you are at all unsure if your intended formatting or change might be pushing the policies, ask a staff member if it's permissible.

Websites
If you still want to get super creative and use all the colors on your character's pages, we highly recommend you look at some free website builders to create your own spaces outside of the wiki. Here are a couple of free website builders if you are inclined to build your own pages:
Wix, Site123, Weebly, WordPress, Google sites.
  Reply


Forum Jump: