Bar a couple of slight changes, that is near identical to your current infobox you have now. The difference with this one is that it is a Portable Infobox (PI). Have you come across those before?
As a quick summary if not, PIs are a type of infobox that display better on mobile devices for mobile readers using the mobile skin. This is very important as roughly 60% of readers view wikis from mobile devices and that is only going to increase in the future. The good thing with them is they look great on desktop too and can be made to look identical to old-style infoboxes, while maintaining the great mobile experience.
The next good thing is that they are also easier to handle. If you look here, the top code is the code you place into Template:Character and the CSS beneath it adds the styling. That should make them nicer to use. If you scroll further down that link, I posted images of what the infobox looks like as not a PI and one with what it looks like as a PI.
So really with PIs, the looks stay the same but the mobile experience improves and the editing experience should be easier also.
Well, I kept like this because I didn't know whether or not I have to change something in the coding for the infoboxes, which isn't my strong suit; I am not good at coding. Also, when it was first introduced it looked nothing like the desktop look and if they actually make look alike that's great and I could consider making it a portable one.
Yeah I understand what you mean. For a lot of communities it was tough at first, but it is rewarding once it's done. As I say, with more people using mobile devices, it's important wikis keep up with that really.
Do let us know if you want help with the coding side. I'm not an amazing coder myself. The good thing with PIs is that you can use code from other wikis as a template more easily as the code is easier to discern - for me anyway. Worth saying the CSS would apply to all infoboxes, so no need to craft the infoboxes individually.
How is the infobox I created on my test wiki? Is there anything you'd want changed with that? :)
Hey guys, sorry to butt in but I strongly suggest we wait for our Head Bureaucrat and Admin, @User:The Rush, before we make any changes to this Wiki. I also strongly believe that the community should be notified of this change first as well. With that being said, I'm actually the one who usually handles coding around here/my Wikis, and I've been thinking of PIs for a while now. I've never actually made one before, however I was planning on switching this Wiki over after a chat with the Admins and community sometime in the future. I love the PI you've suggested, but can you make the background light grey like it usually is instead of white? Also, I actually like how the template currently looks on mobile, btw.
Again, I believe we should notify Carlos and the community before making any changes.
Oof! They do make a good point and if makes it easier on mobile users to see it then why not?
So what would be the cons and pros of having it. Ember you are the code wiz. What do you think? I also wanna hear your opinion Skye.
Hi guys! Absolutely, getting the community's input is a great step, go ahead!
Fangirl1111: it's certainly possible to make it light grey and I've just made the change. Please feel free to use any of the code here and test it out here or on your own test wiki as you'd like. If you'd like me to make changes to it so you can see it on my test wiki let me know also.
Definitely talk to anyone you need to about this as, with this being a wiki, it's important the community is on board with the change. Please contact me still if you have any questions! :)
Hi! Sure, I'll make a list of the pros and cons now:
An improved look on mobile devices - the infoboxes display and flex to all kinds of devices for a better viewing experience for all
As a result, they are easier for viewers on mobile devices to read
Easy to code, with CSS accounting for styling on all PIs and the actual infobox code being simple and intuitive
With this, PIs can be styled to look identical to current infoboxes while still offering a better mobile experience
Different coding style which may take some getting used to but, as I said, it is still intuitive
Hopefully that helps!
Absolutely, feel free to announce it and get the community involved.
I made the change to the PI background, let us know what you think! What do you mean about the image background being the darker blue please? The headers are the same colour as on your current infoboxes. :)
Hi guys! How are you? Have you decided what you'd like to do regarding the above? If you'd like to get the community involved, you could create an Announcement to get the message out.
For what it's worth, as above, there would be minimal disruption and the doc for the infobox would largely remain the same. We would just be updating the code for the infoboxes and adding the CSS for the styling.
@Chris (First message) Oh wow, can you put the blue back, please? I did not expect that XD #F0F0F0 is for the white part of the background, to make it the same light grey as is currently on our infoboxes. As for the image background, what I mean is that sometimes the image takes a moment to load and you can see the background is dark blue, the same blue as the first header.
(Second message) Yes, that's what I was talking about with announcing it.
Well done! Sure, I'll put it back. As you may have noticed, I'm designing some PIs for a few wikis so I have to pick and choose haha. Would you be open to me creating the infobox in my user namespace so you can see the PI here? :)
Hi! Sorry for being late getting back to you. I've create it and you can see it in action here. It might take a while for the CSS I added here to take effect. How does that look? You are free to edit anything you like that I've created, let us know what you think! :)
Hi guys! While you're both in this thread, I just wanted to let you know that Fandom will be upgrading to a modern version of MediaWiki which could bring new extensions! More details can be found here! :)
Hi guys, how's it going? Does the infobox design look alright?
Like before, as we're all on this thread, you may have already seen it, but Fandom now has an official Discord server! You can chat about all things pop culture and ask your Fandom related questions there too. Here are the details! :)
Hey guys, sorry for the follow-up announcement so soon, but this one is relevant to this thread and has been highly requested for some time!
Introducing Special:Analytics, a new statistics tracking tool for admins on all Fandom wikis.
This feature includes some really insightful statistics that should allow you guys to inform some wiki decisions, such as:
Top viewed pages
# of page views (daily over the past 30 days)
Most visited files
Desktop vs mobile sessions
So as I mentioned above, this feature is really great as it allows you to see what areas are doing very well and how you can capitalise on them. For example, and highly relevant to this thread, the tool shows the vast majority of your wiki's views come from mobile devices (63%!). This is why implementing PIs will really help. :)
Hopefully you like this feature, it's been highly requested for some time and we would really appreciate your feedback on it. For more help with it, please feel free to ask me questions and also refer to these two super useful articles: