Mobile view of the infobox for Luke Skywalker

Just in time for the release of Star Wars: The Force Awakens in December, our Star Wars community Wookieepedia made the transition from non-portable content to portable content. The release of a film with this much anticipation and buzz was sure to drive a record number of visitors to the community, many of them reading on their phones, and so we wanted to be ready.

Wookieepedia has a huge number of infoboxes. There are around 100 of them, and they're designed with several dozen different themes. This made it necessary to break up their migration to the portable markup into several steps, something which might make your community's transition to portable content more manageable as well.

To keep the variety of themes, we built a CSS file for all of them, and local admins helped assign the correct theme to each infobox template. For future maintainers, we made sure that the infoboxes that used each theme were clearly identified. This we achieved by including remarks in the CSS code like this:

/* The following theme used by Individual ship, Ship class and Ship series */

This prep work proved highly useful during the transition, allowing us to know for sure when to use <infobox theme="ship"> vs. <infobox theme="land vehicle">. Adding comments like this to your CSS does a big favor to those who might come after you and try to maintain and update your work.

Wookieepedia’s excellent template categorization helped immensely in speeding up the infobox migration. They had taken the time to create categories like Category:Media infoboxes, allowing us to work on all the infoboxes of that type at once. The differences between each of those infoboxes was relatively small, so flipping a few variables was all we needed to do before moving on to the next template.

Migrating infoboxes on a huge community like Wookieepedia is hard work, but it taught us some very valuable lessons that you might find useful when you migrate your own community’s infoboxes.

Lessons learned

1. Split up the work

Pick one person in charge of leading the discussion with your fellow admins and contributors, to make sure everyone knows who to turn to with questions and comments. If it's unclear who is in charge, everyone might wait for someone else to start the work. Have another person figure out the coding for your designs and present samples of portable infoboxes. If you’re the only person on your community interested in coding, then do the coding first before you present your suggestions.

2. Take the time to do your prep work

If your community’s templates aren’t fully categorized, do that first. Not only will it make long-term maintenance easier, but it will also allow you to group similar infoboxes together and suggest a fast path to converting all of them.

3. Don’t be afraid to ask for help

If the infobox isn’t doing what you need it to, send up a Bat-Signal. Here at the Portability Hub, there are mentors who are willing and able to assist and guide you, so ask for help if you get stuck.

4. Use a good code editor

If you’ve got more than about 10 infoboxes to migrate, a code editor that color-codes your HTML is essential. Automatic color-coding of your text instantly lets you see when and where you’ve made a mistake. Some Fandom staff use DreamWeaver, but there are tons of free text editors out there, too. An example of an easy-to-use, free editor is Notepad++.

After this work was done, Wookieepedia’s 120K+ pages were in great shape for the expected huge surge in traffic that came with the release of The Force Awakens. Thanks to the newly portable infoboxes, editors could feel confident that their hard work looked good on all types of devices and could be appreciated by old and new Star Wars fans!

See also

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