Forum:New infobox design

As frequent chatters on the Discord server are probably already aware, A few of us (namely Nikel23, K6ka, and myself) have been working on a new visual design for infobox templates on The Sims Wiki. Our current infobox design is several years old, and was designed in order to more closely match what was at the time the wiki's overall design theme. However, that theme has been changed, so currently our infoboxes don't really match anything else.

Additionally, there has been talk about migrating our infoboxes over to the Portable Infobox markup, which would involve considerable work to ensure that the P.I.-based templates continue to have the same appearance as before. It makes more sense to update the templates to our preferred visual style before undergoing the migration to P.I., rather than migrating first and then trying to redesign them, after the design of the templates has already been put down in .css pages.

And so, a couple weeks ago, we set out with the intent to redesign the infoboxes used on the wiki. What you see demonstrated to the right is the outcome of that work: Infobox Sim. I have included the current version of the Sim template as well for side-by-side comparison.

The function of the template itself is unchanged. Users adding the templates to a page would follow the same procedure. The new template has the same available parameters as the old template and the new template behaves in pretty much the same exact way. Aside from theme differences, there's very little that any user would notice different between the two.

The Sim infobox is just the first phase of what I'm proposing. I would like to migrate the rest of the infoboxes on the wiki, such as Object or Game, to use the same design as Infobox Sim. However, before undertaking this task, we need to determine whether this is the direction we want to take the template.

So, what do you all think of the new design? Are there any things you'd change about it? Do you like or dislike the new appearance? —Preceding unsigned comment added by LostInRiverview (talk • contribs) 19:28, 11 January 2018‎ (UTC) - Please sign your comments with ~

Discussion
I really like the new designs! You did amazing work and I'm already excited to see these on the wiki! But the only thing that irks me a bit is that the logo of The Sims and The Sims 4 are way smaller than the logos of The Sims 2 and The Sims 3. - KailynnKat  (talk  /fanon)  20:02, January 11, 2018 (UTC)


 * The new designs are great; though I feel like there's a lack of contrast compared to the old infobox which makes information slightly harder to read. Even so, I'm all for updating the infobox design given how old the old infobox is. -- EpicJoyBoy   (My talk page!)  21:38, January 11, 2018 (UTC)


 * When redesigning, I originally had no background color, but some complained that the infobox looked too "boring" without that color included. Perhaps a compromise would be to dilute the background color a bit? --  LiR talk · blog  ·  contribs 00:49, January 12, 2018 (UTC)


 * That could work. For Sims 3 and 4 we could use the color used for the header on the main page. As for Sims 1 for the most part they are fine, although Sims 2 could use some diluting. – EpicJoyBoy  (talk with me 11:44, January 14, 2018 (UTC)


 * Just so I understand what you're talking about, you want to change the header color, not the background color? The infobox has two colors - the "header" color and the "background" color, as do the boxes on the main page. The backgrounds on the main page are intentionally diluted so that there's a contrast between the background color and the text. --  LiR talk · blog  ·  contribs 18:03, January 14, 2018 (UTC)


 * Oops, I may have phrased that wrong; what I meant was to use the background color used on the main page, not the header color. – EpicJoyBoy  (talk with me 14:10, January 15, 2018 (UTC)


 * I've lightened the backgrounds somewhat, you might need to clear your cache in order to see it. --  LiR talk · blog  ·  contribs 04:13, January 18, 2018 (UTC)

I'd say it's somewhat more readable overall, but for Sims 4 I'd personally give it a slightly more bluish tone, since IMO light aqua isn't very readable. – EpicJoyBoy  (talk with me 03:45, January 20, 2018 (UTC)

These new infoboxes look pretty nice; though I would like to ask that will Sim1, Sim2, Sim3 and Sim4 templates be combined into this Infobox Sim template, or will they stay separate? - SimDestroyer (talk) 15:18, January 12, 2018 (UTC)


 * As it is now, Sim1 (and the like) all use Sim as their base, "meta" template, so changing Sim will affect all Sim templates that use it as their base. Infobox Sim will most likely be used as a base template for other Sim-templates to use. So no, they'll stay separate, but they kinda already use the same code anyways. — k6ka  🍁 ( Talk ·  Contributions ) 17:10, January 12, 2018 (UTC)
 * K6 is correct... the plan is to keep Sim, Sim1, etc as well as Simbio-start, Simbio1, etc. The main reasoning behind this decision is fanon pages. Editing the Sim "meta infobox" would affect all other Sim and Simbio infobox templates, since all those templates are built on top of Sim. Fanon editors might not want the design of the infoboxes they use on their fanon pages to change, so by creating new infobox templates, we can avoid forcing those authors into a template change. The downside of this decision is that every page on the canon side of the wiki that uses a "Sim"-based infobox will have to be edited to use an "Infobox Sim"-based infobox instead. But, I also see this is as a positive, since it gives us the ability to roll the new infobox out slowly, testing it on various pages and demonstrating it to a wider audience before we fully implement it, if we choose to go that route. --  LiR talk · blog  ·  contribs 18:26, January 12, 2018 (UTC)


 * So does it mean that Sim1, Sim2, Sim3 and Sim4 will be combined into this Infobox Sim one for canon pages? - SimDestroyer (talk) 21:29, January 12, 2018 (UTC)
 * No. Sim1, Sim2, and the others will not be modified. Infobox Sim1, Infobox Sim2, etc will be created instead. --  LiR talk · blog  ·  contribs 21:36, January 12, 2018 (UTC)

I wanted to add that these proposed changes would (eventually) affect all infoboxes, not just the Sim/Simbio infoboxes. The idea is to create a standardized design that we can apply to any infobox on the wiki, so that they all have a uniform design. To that end, I've "migrated" a few different infoboxes over to the proposed new design. The infoboxes that have been migrated so far are:
 * Sim > Infobox sim
 * Game > Infobox game
 * Lot > Infobox lot
 * Website > Infobox website

It's important to note that these new templates are still being tested and there may yet be bugs to be found. However, I am confident that there will be very few issues in migrating over the rest of the infoboxes. This is because, aside from design and appearance, very little else is being changed. The templates should, by design, work just as they do now. Additionally, thanks to Nikel23, the design coding for the "meta-infobox" is now in the Wiki's .css pages, meaning migrating existing infoboxes to the new design will be even easier and faster, and any design changes we want to make to the infoboxes should be able to be done all at one time, rather than template-by-template.

What I would like to do in this forum is resolve first whether the community at large wishes to adopt a new template design and if so, whether the community wishes to adopt the particular design I've shared here. I would like to get the template design finalized soon, so that we can begin to migrate over the infobox templates en masse, and then after that, migrate over all the main namespace pages that use the infobox templates so that all infoboxes in the mainspace are based on the meta-infobox design. --  LiR talk · blog  ·  contribs 00:11, January 20, 2018 (UTC)


 * I'm all in for the new design.  Nikel  Talk  –  Vote!  04:40, January 20, 2018 (UTC)


 * I'm fine with the new design. The last time I looked at the code it was a lot cleaner and more streamlined as well, which is always a plus. I think it's truly seriously time we updated these infoboxes to match our current wiki theme. — k6ka  🍁 ( Talk ·  Contributions ) 21:40, January 22, 2018 (UTC)


 * The new design looks good to me as well. - SimDestroyer (talk) 11:11, January 28, 2018 (UTC)


 * Also, is there anything going to be done regarding the Infobox template? It has been proposed in the talk page to possibly update it to the current infobox designs and that it can be used as a metatemplate to build other infobox templates. So should this template be updated to the new design, or should it just be left alone? - SimDestroyer (talk) 17:01, February 2, 2018 (UTC)

I'm liking the designs. There is a great blend of colour used, and it is sticking with the main colour themes of the game. Also, our currently used infoboxes are old and are in a serious need of being redesigned. I have no issues with this. ~ Beds  (talk - blog ) 23:36, February 6, 2018 (UTC)


 * Okay, Beds mentioned on the Discord general chat channel about a bit of difficulty reading the subheader text with the text shadow in place. I've tried fiddling around in the css settings to adjust the appearance, but I'm having a hard time seeing a definite improvement. So, I'm going to put in a few headers here and see what they look like with varying text shadows...

Test text - ABCDEFGHIJKLMNOPQRSTUVWXYZ Test text - ABCDEFGHIJKLMNOPQRSTUVWXYZ Test text - ABCDEFGHIJKLMNOPQRSTUVWXYZ Test text - ABCDEFGHIJKLMNOPQRSTUVWXYZ
 * Current setting for "main" infobox header, 2px "blur" on shadow (TS3 background as example)
 * With 1px "blur" on shadow
 * No blur on shadow
 * With a 3px "blur"


 * The difference between the first and second examples is much more subtle than the difference between second and third... Third example seems to me to be way too "sharp," second example might be a good compromise. --  LostInRiverview talk · blog  ·  contribs 23:59, February 6, 2018 (UTC)
 * I also want to experiment with an increased shadow radius, which would have the effect of making the shadow more "washed out" than the first example above... so I've added that as a fourth example. --  LostInRiverview talk · blog  ·  contribs 00:03, February 7, 2018 (UTC)

Standards for infoboxes
At the risk of going off on a tangent, I think we also ought to develop/refine standards about how infoboxes should be designed and implemented, in terms of their functional design and use on a page-by-page basis. This, in my opinion, would be a good addition to the MOS, or perhaps to another page more suited to it. In my brief adventure into the world of infobox design, I've noticed a lot of issues which cause at the least, minor inconvenience but, at the most, cause page-breaking issues. For a starting point to further discussion, I'd like to lay down some preliminary standards:

These aren't necessarily uncontroversial points, and they aren't meant to be "laws" or hard-and-fast by any means, just basic standards to follow when designing new infoboxes. What do you all think? --  LostInRiverview talk · blog  ·  contribs 07:39, February 2, 2018 (UTC)
 * 1) Infoboxes on The Sims Wiki should start with "Template:Infobox..." to differentiate infobox templates from other templates which might have similar names (for example, the name for Sim is very similar to the name for Sims despite the two templates being vastly different from each other). This would also help editors in the page source identify infoboxes at-a-glance.
 * 2) Infoboxes should use the same parameter names as much as possible, and standardize how those parameters are used. For instance, all infoboxes should have a  parameter, and that parameter should be automatically set to italicize and link to the name input into it; the infobox's top image should always be set by the  parameter, and file link and file size should not be automatic (in other words, the user of the template would have to include the brackets and image size), etc etc
 * 3) Images in infoboxes should be set to a maximum 250px width, and should be set to exactly 250px wide unless circumstances (like low-quality or low-resolution images) prevent this
 * 4) Infoboxes should use the same base .css style (as helpfully written into our .css pages by resident guru Nikel23
 * 5) No more than 10 infoboxes should be used on a single page, and no more than 6 infoboxes should be used in a single section on a page, in order to cut down on page length, size, and loading time. In all instances, editors should review whether infoboxes are necessary, or if the information could be condensed down into a table instead (see Mysterious Mr. Gnome for what I'd classify as an example of what not to do... notice how the object's size and type never vary from instance to instance; this could be much better arranged in a table)
 * 6) Infobox code should be as clear, straightforward and easy to understand as possible. It should be made simple enough for later editors to make additions to the template as needed without having to consult the original author for an explanation as to how it works.
 * 7) Parameter names should not be capitalized.
 * 8) Infoboxes that automatically display text, images, or add categories to pages should avoid including complex "getting" code in the infobox itself; instead, this functionality should be provided by Category:Categorizing templates, Category:Image retrieval templates, and Category:Namespace checking templates (what I'd refer to collectively as "retrieval" templates or "fetch" templates)