FANDOM


Content-is-like-water-1980
What can you do to make your wiki attractive and readable for the widest group of readers? Develop platform-independent design guidelines. This may require breaking with some old habits, but you’ll get a larger audience in return.
This blog will give you the essentials of progressive design. See here for the in-depth version.

Navboxes

Navboxes are groups of lists of short links packed into a layout table. They are not mobile friendly.

  • If an article is part of a group of articles, consider whether that navbox group should be a category instead.
  • If an article is part of a group, but has an ordered relationship with others—like previous/next—it's best to put the navigation in an infobox.

Tabbers

Tabbers can be an effective way of displaying information. But it’s important to observe some best practices.

  • Use only one row of tabs. If you need more tabs than will fit in a single row, you need to simplify your design.
  • Present tabs as a single row above their associated content. The nest tab labels succinctly describe the content within.
  • Never nest tabbers inside each other. And avoid using tabbers for images, particularly inside infoboxes.
  • The information inside tabbers should make sense if the tabbers weren’t present. Adjust your content until it does so.
  • A <navigation> tag of a Portable Infobox is often the ideal place to link to a subpage—one that’s significantly more progressive than tabs used at the top of pages.

Data

An infobox is a page’s anchor—it’s the first thing you see when viewing an article. But each part of an infobox is also considered a data item. As your wiki grows in complexity, you should use different infobox templates for different kinds of things. Individual data points should be of the same type and format. Don't mix numbers and words in the same data value. The template itself should be used to add formatting.

Using multiple Infoboxes in an article to describe various iterations of the topic is not recommended. Instead, use logical groups within a single infobox. For example, use a collapsible <group> for iOS stats and another for PlayStation information, rather than giving each platform its own infobox.

Images

Spock-truncated-infobox

Note how just two images effectively convey a visual summary of Spock, using an early and and late appearance of the character.

More pictures aren’t always better.

Cramming too many pictures into a single gallery overwhelms your reader. Trim it or delete it entirely. Put some of the images within the body of the article, close to relevant parts of the text. That way, your images will genuinely illustrate—not just dangle off the end of the page.

Infoboxes aren’t galleries. They're an introduction to the topic of the page. Think about whether you truly need more than one image in your infobox. Remember:

  • Pictures alone don’t make for great SEO. Pages upon pages of images alone (without text) could bring penalties for thin, low-quality content.
  • Make an image gallery a quality page. Keep your images focused on a single topic or interleave them with the article.
  • Use plain language to name your images. File names should be as descriptive as possible since search engines cannot tell images apart.
  • Fill out the summary section of your file pages. Time spent describing your images brings helps search engines bring more visitors to your wiki.

Tables

Tables are for data, not page design. We’ve known that since at least 2004.

Used properly, tables compare data in a efficient way, like spreadsheets. But they don’t always work well on smaller mobile devices.

  • Always check your tables on a real phone, held in portrait orientation.
  • Follow these guidelines to make tables easier-to-read.
  • Consult this help page for even more advice.

Design for the future

We can’t talk here about every aspect of design. So please read the longer version of this article. And definitely peek at this presentation, which offers best practices about using colors, fonts, and contrast ratios to improve your readers’ experience.

Making smart design choices that will work on all platforms will help you attract and keep readers for years to come. Putting even a few of these guidelines into practice is time well spent for your community's long term health.

Do you have any progressive design tips to share? Leave a comment below!

Want to receive updates on the latest Staff blog posts? Then click here to follow this blog.