Technobliterator Technobliterator 20 December 2018

Data-Oriented Infoboxes

Most infoboxes summarize an article. By surfacing a few facts, they let readers quickly understand a subject.

However, particularly on gaming wikis, infoboxes can be much more data-oriented. Infoboxes on these communities are responsible for serving up actual statistics — and it makes them much larger. This kind of data-driven infobox may require you, as an admin, to adopt a different approach.

This blog will explain how to make your data-oriented infoboxes most useful for readers.

Organization instantly improves your infoboxes. Group related statistics together, making sure that the most important statistics go first.

Let’s say you’re designing an infobox for a unit in Dungeons & Dragons. You should lay out the stats the same way the Monster M…

Read Full Post
FishTank FishTank 4 October 2017

Progressive Design

Everything changes. Some things remain classic and timeless, while others come into or out of fashion or evolve by necessity in function. When we're building communities, designing to benefit readers can also be a challenge. Our global audience here at FANDOM is shifting to mobile and "second screen" experiences. Whether on a smartphone or a tablet, readers want more than just what's on their televisions and games. Fans want to be in the experience, to get context and background, walkthroughs and guides, theories and perspectives — and for some, even spoilers. We can't ignore that most communities have a significant mobile reader base — sometimes as much as 60% of total page views.

What can you do to get the best experience for the long ter…

Read Full Post
MACH-59330 MACH-59330 14 April 2017

Building Better Boxes: Themes and Accents

Hey! I'm Speedit from the Vanguard team, here to tackle the topic of infobox theming.

infobox on Nukapedia is the main element to the article lede. It's noticeable because it's large and colourful.|thumb|right|200px|link=w:c:fallout:Fallout 4]] Infoboxes are a fundamental, high-profile element of most wiki articles that gathers key facts on the article’s subject. A well-designed infobox will set the bar for an attractive article, so pay the layout good attention to make sure it ticks that box!

There are two ways to customize the appearance of Portable Infoboxes - CSS theming and accent styling. The design of the Portable Infobox product makes one fundamental change. Any markup added to change the presentation is split from the content.

This means…

Read Full Post
FishTank FishTank 8 March 2017

Join us for a special CSS Town Hall

"Hear ye, hear ye..." is a call that historically announced meetings in America's Town Halls. These days, such a herald is often an electronic one.

At 2pm (US Eastern, 6pm UTC) on Saturday, March 25th, Fandom cordially invites all users to attend a very special "town hall" gathering of our own. "CSS: a Fandom Town Hall" is an event meant to educate, to inspire, and for us to listen and hear from you.

Three presentations are scheduled for this two-hour CSS festival, each followed by a session for questions and answers.

These presentations are geared towards editors who are novice to moderate at styling communities, but will have some insights for more advanced users, too. The prese…

Read Full Post
Technobliterator Technobliterator 16 January 2017

Building Better Boxes: Separating Content Into Groups

Hey, folks! I’m your friendly neighborhood Vanguard guy, Technobliterator, here to talk about how to make your Portable Infoboxes better.

The goal of Infoboxes is to convey summarized data on an article in a way that is easy for readers to consume and interpret. This may be four to five facts about the subject, but it can often include dozens of statistics and pieces of information. In instances where infoboxes are fairly long, it may be much more desirable to group parts of information together and organize it separately, to allow readers to more quickly search through it to find what they want.

  • 1 When content should be split into groups
  • 2 More complex management and naming group headers
  • 3 Collapsible groups and grids
  • 4 But my data is too long and…

Read Full Post
Dark Yada Dark Yada 19 December 2016

Building Better Boxes: JavaScript Tabbers and Image Switches

Bonjour ! I'm Dark Yada from Vanguard, here with another topic on how to make your communities a bit more accessible.

Several communities on Fandom use tabbers in their infoboxes, which allows displaying several images in an infobox. The Portable Infobox tool comes with an integrated tabber functionality, usable via the tag, which may require JS, but this result won't be portable and the look of your infobox on the mobile skin won't be great and won't "look good". There are still other ways you can use to put your pictures on your infobox, or elsewhere on the page: the best ways are to put all the tabs "at the same level", with a more descriptive name, or to put your images on a gallery, elsewhere on the page. Those solutions are portable …

Read Full Post
FishTank FishTank 10 November 2016

Join us for a special Portability Town Hall

"Hear ye, hear ye..." is a call that historically announced meetings in America's Town Halls. These days, such a herald is often an electronic one.

At 2pm (US Eastern, 7pm UTC) on Saturday, November 19th, Fandom cordially invites all users to attend a very special "town hall" gathering of our own. "Portability: a Fandom Town Hall" is an event meant to educate, inspire, and for us to listen and hear from you.

Three presentations are scheduled for this two hour portability festival, each followed by a session for questions and answers:

  • "Portability, Elements, and Articles" by Isaac Fischer (FishTank)
  • "Best Practices with Images" by CzechOut
  • "Looking Forward: Portability and Mobile" by…
Read Full Post
Trollocool Trollocool 4 September 2016

Styling your infoboxes

This blog is a translation of my German blog in the German portability hub.

Thanks to Wikia's Tools and helpful pages, many users can already use portable infoboxes ("PIs" for short). With some experience, images, various types of data or subheadings are no problem at all. But this is only the first step of creating an infobox. In most cases, you need more than that, you need CSS.

  • 1 CSS
  • 2 The Europa theme
  • 3 Adjusting your infoboxes
    • 3.1 CSS selectors without Europa
    • 3.2 CSS selectors with Europa
    • 3.3 Theme selectors
  • 4 Your own themes
  • 5 Last words

CSS is an important part of developing portable infoboxes, the other part being the PI language. The PI language on the template page is used to create a layout for the infobox by positioning its elements in a certain …

Read Full Post
Technobliterator Technobliterator 3 July 2016

Why Data Organization is Important for Gaming Wikis

Hey, I’m Technobliterator from Vanguard. Today I’m here to talk about why convenient access to information is important for games.

When playing a game, there’s often a very strong desire to have a guide available for that game, or to be able to quickly look up a fact that’s needed. Whether it’s a strategy for a boss battle, the cost of a rare item, or the unlock conditions for an achievement, it’s likely that anyone playing will want to find out facts immediately rather than having to memorize it. As the technology on which people play games advances rapidly, so too has the technology to look up these facts that people will need on the fly.

This is why portability is so important. Wikis have proven to be a fantastic resource for many gamers …

Read Full Post
Flightmare Flightmare 19 May 2016

Visualizing data in Portable Infoboxes

Hello! My name is Flightmare and I'm not a member of Vanguard. I'm here to talk to you about some tricks that can make your infoboxes represent (dynamic) data in an alternate format. A nice feature of Portable Infoboxes is the ease of switching lay-out to horizontal mode to make a boring streak of numerical values a bit more interesting. But more so: "A picture is worth a thousand words", and perhaps it is worth a thousand data entries too.

I have been experimenting with charts in infoboxes, inspired by the stat representations of Pokémon X & Y, my results are included in the sections below.

  • 1 Hexagonal statistics
  • 2 Historical data
  • 3 Getting technical
  • 4 Sources
  • 5 Further reading

Inspired by Pokémon, I first used this chart in a Pokémon infobox. Not lon…

Read Full Post
MACH-59330 MACH-59330 3 May 2016

How to add portable gallery-based character portals to your wiki

The majority of Wikia wikis have strong character coverage. This is well shown by the prominent character portals with colorful little cards going to the popular or prominent characters or content of the wiki's subject. These character portals are usually done using a template many are familiar with despite its broken status in the mobile view. This makes the content inaccessible to half the wiki's readership who may not see the content or any content at all because it lacks portability. Why is the code flawed and how could it be done better so that it works for mobile readers too?

  • 1 The Problem: Tables not Good Design

This is (but not for long, hopefully) done usually using customised yet minimal variations of a table-based template commonly…

Read Full Post
Technobliterator Technobliterator 29 April 2016

Building Better Boxes: Organizing Your Data

Hey! I'm Technobliterator from Vanguard, here with another topic on how to make your Portable Infoboxes better.

When you're making an article as a wiki editor, naturally your aim is to list all the available and relevant information about the subject. But an equally important aim is to display that information on pages in a way that's convenient and elegant for readers, whether they're just passing by to quickly check a stat value, or whether they want an in-depth description. Infoboxes are an excellent way of conveying information to readers immediately, but they're by no means the be-all end-all.

  • 1 Bite sized boxes
  • 2 Let's table that...
  • 3 Drawing the middle line
  • 4 Ultimate goals of organizing data
  • 5 Further reading

Infoboxes are useful for displayin…

Read Full Post
BritishCynic BritishCynic 29 April 2016

Building Better Boxes: A Beginner's Guide to Specializing your Data

Hello! My name is Stuart, also known as TwoTailedFox, and I am a member of Vanguard, Wikia's community outreach and future-proofing task force. I'm here today to talk to you about Portable Infoboxes, and why it is now a good idea to have more than one on your Wiki.

  • 1 Features
  • 2 A case study
  • 3 What's the meaning of this?
  • 4 Keeping it simple
  • 5 Further Customization
  • 6 Consulting

Portable Infoboxes allow us to display information across a wider range of devices than the current Wikitext-based system currently allows, but they grant us several other features:

  • The appearance of these Infoboxes is standardised, as the CSS is stored in a protected location, and is no longer a concern when building an Infobox from scratch; the theme and appearance of these Infobo…

Read Full Post
TOR TOR 18 March 2016

Why you should avoid inline styles

As we recommended in the Portability Checklist, it's best to avoid inline styles on your pages in consideration of users who look at your articles via mobile devices. This is a more in-depth explanation of why inline styles create portability issues.

  • 1 What exactly are inline styles?
  • 2 But I can't do what I want to do without inline styles!
  • 3 Using site-wide style sheets: MediaWiki:Wikia.css
  • 4 Do you still have questions or concerns about this?

Inline styles are the bits of CSS code that are put directly in the page (or template) content. You can spot them by looking for in wikitext) used to represent quotes or dialog. A device trying to interpret what kind of content this is won't recognize a quote as a quote, and won't realize that the table is …

Read Full Post
FishTank FishTank 17 February 2016

Cinematic Themes contest

In an effort to build a gallery of Themes to inspire Portable elements, Portability Hub is launching a contest: build Themes based on your favorite or most iconic films! We have a few films already in mind that we're working on (and will post some examples for), but we want to see what you're cooking up. Winners get special recognition badges and will have their creations featured in our Themes gallery.

We intend to have at least two categories of awards for this particular contest: mockups (submitted images of your great designs drawn as infoboxes) and fully realized designs (functional CSS and any image files required for texture, etc.). Who knows, the winning mockups may even get design help to bring their creations to life! ☺ You'll als…

Read Full Post
FishTank FishTank 15 February 2016

Holistic Portability, part 1: Designing Templates for all devices

Templates are more than just Infoboxes. As we've seen, there are plenty types of Templates. However, some Templates are simply more portable than others. That's important when you are designing for future-proof communities (that aren't just using Desktop and Mobile). As part of being future-proof, our entire communities should be able to be seen on any platform; that's the essence of Portability. Most editors think of how things look on a desktop browser, but they need to think about how things will also present in other devices (especially those with smaller screens). The real benefits will come when smart devices and special interfaces, like virtual reality become more commonplace over the next couple of years.

This series of articles is …

Read Full Post

Community content is available under CC-BY-SA unless otherwise noted.