FANDOM


  • Hi again Skye! Just thought I'd drop by to suggest something I hope will be appeal to you. :)

    My initial question is what do you think of this infobox?

    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.

    If you have any questions, please let me know! :)

      Loading editor
    • 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.

        Loading editor
    • 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? :)

        Loading editor
    • I understand that.

      Okay.

      Looks great. No change that I can see.

        Loading editor
    • 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.

        Loading editor
    • Good plan, Ember. I hope Carlos responds soon.

        Loading editor
    • 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.

        Loading editor
    • 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! :)

        Loading editor
    • I wouldn't mind giving the portable infoboxes a try, since I am looking at them and I don't see any issues or differences between mobile and desktop.

        Loading editor
    • The choice is up to you guys really. If you're willing to give them a try now I'm happy to assist, if you'd like to consult other community members first I'm happy to help out there too. :)

        Loading editor
    • @Skye Thanks and same.

      @Carlos I think it's good as long as it looks the same and functions the same way. I like the way it looks on mobile already, but the new way is good too.

      @Chris I agree with Carlos, what are the pros and cons?

      I'll make an Announcement of this Thread, if everyone's okay with that.

      Thank you for making the change, but I think #F0F0F0 is the exact match, if you could try that out instead? Also, the background for the image is typically the darker blue.

      @Skye Same.

      @Chris I'll make an Announcement so anyone can reply, and then we can probably give it a try!

        Loading editor
    • All right, Ember. Having an announcement made is a good idea.

        Loading editor
    • Hi! Sure, I'll make a list of the pros and cons now:

      Pros
      • 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
      Cons
      • 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. :)

        Loading editor
    • 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.

      Let us know what you think! :)

        Loading editor
    • @Skye Yes, agreed.

      @Chris I see, thank you.

      Thanks, I will asap. I'm on my phone atm but I'll do it as soon as I'm on my laptop. I'll also check out the change you made and explain the blue background a bit better once I have my laptop.

        Loading editor
    • No problem! :)

        Loading editor
    • The Announcement is done!

      @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.

        Loading editor
    • 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? :)

        Loading editor
    • Yeah, you can go ahead, Chris.

        Loading editor
    • Sure! :P

        Loading editor
    • 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! :)

        Loading editor
    • I'm on my phone but it looks like how it would on a laptop, which is great! Can you try the hex code I gave you earlier for the light grey? Can you also make the background behind the image dark blue?

        Loading editor
    • Hi, I added those changes. Let us know what you think! :)

        Loading editor
    • I'm still on my phone but it looks perfect! The only thing is can you make the image cover the entire blue background like our current infobox does? Then it would be the exact same as ours.

        Loading editor
    • Fixed! Let us know what you think :)

        Loading editor
    • 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! :)

        Loading editor
    • I'm still on my phone but it looks great!

      Yes, I saw that too.

        Loading editor
    • Great! :D

        Loading editor
    • One last thing, the background for the source link should be white, not blue, and the PI infobox seems a bit bigger than ours, but that's not really a huge difference.

        Loading editor
    • Hi, I made some changes - let us know what you think! :)

        Loading editor
    • 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! :)

        Loading editor
    • The infobox design to me look great.

        Loading editor
    • Great! Would you like some help implementing them? :)

        Loading editor
    • Is it just me (I'm on mobile) or is the lighter blue off?

      And yes, I've seen the Discord news. I don't have a Discord nor am I planning to get one, and I don't think this Wiki needs one either by the way.

        Loading editor
    • I don't use Discord at all.

        Loading editor
    • Okay guys, no worries! I've fixed the infobox code, the colour should be displaying normally. Trust me to forget a comma!

        Loading editor
    • Hi guys, how are you? The infobox design should be about ready, let me know if you need any help with it. :)

        Loading editor
    • I am doing good. That will be great.

        Loading editor
    • Great! It's there and ready, would you like me to help implement it or are you alright? :)

        Loading editor
    • 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
      • and more!

      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:

      Thanks!

        Loading editor
    • Oooh! Interesting!

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.