1

Way back in the year 2020, we ended up taking on a project where all the templates onsite were responsified so they better fit into the margins of wikiHow’s pages~! However, it was also skimmed that sometime later we were discussing getting to responsifying our UIBs. Although most of our UIBs are written in wiki code the right way, there are many UIBs that don’t seem to be fitting into the dimensions of the UIBs? Sometimes, UIBs tend to see info in their infobox being pushed down a line, even though the infobox information in the edit page shows it not being pushed down. Others yet, just seem to not work, because they don’t make UIbs line up when users aren’t using either wiki methods or table methods (as described in https://www.wikihow.com/wikiHow:Make-Userboxes-Line-Up-Neatly ), which is very annoying in the readers’ eyes.

Others may find other faults with UIBs. I use UIBs, but if we’ve talked about it and is in line with a former project that was partially completed, maybe now is a good time to review and fix them - not file them away for a rainy day project that will never come. While this project might be trickier to discover a fix in the background, if we want to responsify them, maybe this time of light action, maybe let’s take care of it now.

Also, if I recall, we were also discussing the use of more neutral colors for templates - and that was also discussed to be brought over to our UIBs. I’ve tried to take on keeping our UIBs straight, and wouldn’t mind some added responsibility to change these colors to more neutral colors, if necessary.

Can we get the discussion rolling so we can get this project started and so we have more responsive UIBs that look more pleasing in the reader’s eyes?

2 Likes
2

What better time than now?! It sounds like there are two points here to me:

  1. Let’s see if we can get UIBs responsified and looking good on all screens.I think it could be good to compile a list of UIBs that aren’t behaving so we can look into them and see what the difference between those and others are. If anyone knows of a UIB that needs some tweaks, feel free to post it below so we can get that list together.
  2. Should we tone down the colors of UIBs: Let’s also open this thread up to a discussion about whether UIBs should be certain colors/saturation/hues etc. What do you think? Let us know!
2 Likes
3

Can I elaborate on this discussion? It may seem to bump it, but it’s good information that may solve the puzzle of why this needs to be looked into.

I’m a UIB creator and as I add them to my User page, I end up looking at the last ones I’ve added. And it may be good to note this:

  • If the UIB contains text in the ID field, the info box will generally vertically align the text directly in the middle.
  • However, if the ID field is a pic, the system vertically aligns the text in the INFO field so that the text starts at the middle and ends at the bottom - which produces so many extra empty-space lines, it makes it rather wonky to read on a perusal.
  • This doesn’t happen if you see the UIB from the template page. On the template page, the ID and INFO boxes are both aligned so that the text and pictures both start at the top and stop when they stop, except for textual IDs which correctly start in the middle and max out where the text stops, sometimes crushing the INFO box, pushing the text downwards. There’s no vertical alignment outside a normal system alignment.
  • This can sometimes signal issues when you try to add UIBs to the page. Some wrap “longer” than others, even when the ID box’s pic is the same size at the less-than-40px size that UIBs max out at. On my User page, there are several really large UIBs on the left of my tower while the UIBs on my right is the same height as normal UIBs as originally created. However, those on the left aren’t the only ones that sometimes cause trouble, as sometimes the ones on the right are the trouble-makers and the left ones are fine. (I don’t really know how to explain this best, without actually showing you with a straight edge just how much of a difference it is in person.)
  • Can we also expand the bar on desktop views’s towers so that they hold more than two columns of UIBs? When I tried sampling them as a tower of 3, the extra UIB that was meant for the right column (because of the extra space that could be better used to hold a third UIB) actually pushed itself into it’s own row - all by it’s lonesome self!
  • In the past, I’ve used a bunch of different browsers. My favorite was Internet Explorer in the day, but as of 2015, that changed making Microsoft Edge (Chromium Edge as of 2020) my favorite. It happened on every browser I used and happened on Google Chrome, Mozilla Firefox, and for the occasional time when I check out my userpage from another account over InPrivate for Chromium Edge - these UIB problems cause a problem there too, so it’s not just happening on my browser.
    ** I’ve seen it troublesome in the past on other computers too. From 2011 on, I myself have owned four computers (two died by 2012) one died in late 2015, and the last remaining one (a laptop still survives - Windows 10, but my computer can’t be upgraded to Windows 11 because of a hardware issue.) The others I used to use used to be Windows Vista-based (never had money to upgrade to Win 7 at that time) but that one died in 2017, when my brother bought a laptop for the family and now, more for himself.
    *** As to looking at these UIBs over desktop view on a mobile device such as my iPhone with iOS 15.5 (atm), I’m seeing the same problem.
1 Like
4

UIBs aren’t likely to get staff engineering time, so if we have any budding coders who can help with some of these things, that’d be a great start!

1 Like
5

Hi! I’ve spent my morning working on this, what I managed to achieve is available on my sandbox here .

Not sure if these changes will benefit UIBs everywhere, as we may have the same issue where they display correctly on the page with the source code and incorrectly when just the template is used?

Please let me know what you think of this!

1 Like
6

Wow! Awesome @Rupert28 . Let’s see what others think, but perhaps it’s worth trying to implement these code changes on a few to see if they work out in the “real world”:slight_smile:

1 Like
7

Thanks Jayne! I’m not sure how we can make these changes to just a few UIBS, as we’d need to change the source code for all UIBs. Unless, instead of using the UIB template that links to the source code to make a test UIB, we could just use the source code and plug info straight into that? Or would we make a new UIB template, just to make sure the changes are consistent when a template is used instead of the actual source code.

Sorry if this sounds confusing:joy:

8

Hah, well what do you think would be the best next step?

1 Like
9

We should probably test it a bit more before changing all UIBs. I also wanted to get some more input from everyone else on this before making any changes.

2 Likes
10

Maybe we should change a few and see if they work out well, and then if they do perhaps all could be changed. (But there’s so many UIBs out there, how are we gonna change them all?)

2 Likes