For a while now, we've wanted to fix many of the outstanding issues with one of our widely-used but under-developed products: Portable Infoboxes. With the help of the Vanguard volunteers, many of our communities over the years have adopted these adaptable templates to put their best faces forward on all platforms. This has been especially apparent with the rise of mobile devices, where we've made recent changes to improve the look and feel of infoboxes for a clean user experience.
As useful as these infoboxes have been for mobile presentation, there was a lot of room for improvement to help communities show off their data and content in the way that they wanted to. So, in addition to fixes and a new look on mobile web and the Fandom app, we’ve added in useful customization options and more innovative ways to add depth to the information without losing the simplicity that makes Portable Infoboxes easier to code for all users.
It took us too long to get to that point. Portable Infoboxes were introduced years ago, we didn’t develop them further for a long time, and that led to some difficult community conversations where we could have done better in meeting the needs of individual wikis. Part of that was a philosophical debate we were having internally: if we're going to separate content (what users see) from presentation (how you create the infobox), how much customization should there be versus standardization? Do customization options mean that an infobox isn't simple anymore? But, after a year of changes within Fandom, we finally knew that it was time to add these options in so Portable Infoboxes would be more powerful in meeting the needs of individual communities.
So, what's changed?[]
First we wanted to address the obvious: infoboxes are primarily about information. Each element of an infobox is meant to provide a data item (whether that's text or images) or navigation (usually links). Communities have all kinds of data, and they style or format individual items in unique ways. Fandom Staff and the Vanguard volunteers that work closely with us in reaching out to communities kept running into some of the same problems that didn't happen with simple wikitext. Mostly these involved layout and style that was easily made in wikitext tables but hard for regulated elements like those used in Portable Infoboxes. This resulted in very complex CSS code that was hard to understand and which limited a community's ability to change or adapt; many hacks involved very ugly code workarounds.
We've addressed this by adding methods to access and style nearly any individual part of an infobox by JavaScript and CSS. We've also added a new way to identify infoboxes not by how they should look with themes, but by what they are logically describing. For example, an infobox for a Pokémon monster should display with a specific layout in mind, regardless of whether it is a Fire or Water type (themes which should re-color the infobox but not change the layout). Previously, themes were the only way to do this. We believe that this will allow for more powerful and flexible CSS, and doing more with less code.
Next, we saw a lot of creative ways that infoboxes were being used in unanticipated forms. Some communities would add multiple infoboxes to individual articles, and would stack them up, nest them inside each other, or switch between them with sophisticated custom solutions that did not work well on mobile devices. Ultimately, many of these clever displays do not function well on all devices. So again, we took notes about what communities were building and built native functions into Portable Infoboxes based on community feedback. The new "panels" feature will allow for more layers of infobox elements that can be dynamically switched-between. By default, these sections of a panel work much like our popular "tabbers", responsively working on mobile and desktop devices.
We have added the new features to our documentation, and they are ready for use on your communities today. We do not intend for this to be the end of the journey for Portable Infoboxes, and have more exciting things in mind. How can Portable Infoboxes better meet your community's needs? Tell us at Special:Contact, and we'll see if it's something we can incorporate into future updates. This also isn't the last time you'll hear from us in the near-term about long-awaited development updates, so keep following the staff blog for what's to come.
Click here to follow the Fandom staff blog.
Click here to sign up for the From the Desk of Community email newsletter.
Join our Official Discord server for registered editors!