5

Badges look differently on each SE site, as per the unique themes of each site. However, when looking at the Summary of Accounts in a user's profile, the badges for all sites use the icon for the site that the viewer is viewing the page from at that time.

Badges on different sites

I think it would be an aesthetic improvement to keep the badge icons consistent with their site of origin, and not where they are being viewed from.

Suggested design

The effect of this change would be subtle, but I think it would help reinforce the appealing idea that the badges from the different sites are unique, different types of rewards, and make it more engaging to collect from all over SE as opposed to focusing on single sites.

3 Answers 3

4

I doubt this will happen, though not for the reasons mentioned.

From a design perspective, it's another variable to add into the profile page. The profile page already has a large number of variables within it based on a user's activity. This just increases the complexity. It's not an insurmountable challenge, but it does increase the complexity because every gold, silver, bronze color variation (they vary slightly between themes) works in every other theme. Are you looking to retain the shape more or the distinct colors too? That increases the challenge.

The way badge symbols are displayed would have to be revisited as well. Using a sprite sheet isn't a great solution currently and would only be compounded by this addition. Thankfully badge icons are pretty straightforward, so a easy solution to this is to recreate them with CSS instead of locking them within a sprite file. The benefits of this is it's one less HTTP request, symbols would be scalable and they would be retina/hd-ready as well. Some would prove trickier, but it could be done.

Neither hurdle is impossible. I just don't see it happening soon because work needed to properly deliver this without affecting performance and improving the design. Maybe in the future though. It's a good suggestion.

2
  • 1
    Eh, even if it were possible, a bunch of different icons in a single list would still be incredibly annoying (as I stated in my point #1). The example screenshot in the question demonstrates how terrible this would look pretty well. There's already a site-specific icon at the left - there's really no reason to make the badge icons site-specific too.
    – animuson StaffMod
    Feb 23, 2014 at 4:24
  • 1
    Just because the guy's mockup is poor doesn't mean it's 1) a poor idea or 2) couldn't be figured out. How can say that the way it would look would be "incredibly annoying"? Maybe it would work or maybe it won't work. You won't know unless you try.
    – Hynes
    Feb 23, 2014 at 4:33
13

This will not happen. Displaying all the different icons will...

  1. Make the list look just plain weird. The numbers and icons will become incredibly misaligned and not match the site's theme.

  2. Cause a huge performance hit. In order to display any possible icons, you'd need a huge sprite sheet with every possible icon from every possible site that has a different theme, as well as extra CSS to properly size and position each icon next to the text. That's a lot of extra effort for a very small and unnecessary aesthetic change.

6
  • 1
    Great answer and reasoning! I didn't realize it was so difficult! ...I wish people would stop downvoting the question, though... Feb 21, 2014 at 21:43
  • Um... I can't seem to delete my question since you have answered it. I'd much rather get my points back and stop the flow of downvotes than have the question exist. Feb 21, 2014 at 21:55
  • 1
    @SouthpawHare votes on meta can work differently than on SO. It's just indicating disagreement for your feature-request. There's nothing wrong with the quality of your post: clear request, not a dupe, etc. In fact, I would like to upvote it if it's for quality, but I couldn't since I disagree with it. Feb 23, 2014 at 4:16
  • @AndrewT. I see... Feb 23, 2014 at 6:26
  • 2
    I think that's a bit of a cop out. The CSS is already there, and the 'huge' sprite sheet probably wouldn't be that big. (I would expect it would compress very well given relatively small number of colors on the pallet... they're all golds silvers and bronzes!)
    – corsiKa
    Oct 29, 2014 at 17:15
  • @corsiKa What do you mean the CSS is already there? No it's not. To make those icons work properly, you have to add a new CSS style for every single one to specify the exact x and y coordinates of each icon.
    – animuson StaffMod
    Oct 29, 2014 at 17:23
2

... when looking at the Summary of Accounts in a user's profile, the badges for all sites use the icon for the site that the viewer is viewing the page from at that time.

There aren't individual files for each site's favicon, they are all in one file. Some sites use one style of badge for all three and some have three different styles.

The favicon for each site is stored in one file called https://cdn.sstatic.net/img/favicons-sprite32.png?v=6703ade32c17 (that name may vary, with updates), a file that is 32 pixels wide and 13572 pixels long (13572/(32+(2*2))=377 icons, for main/meta and sites with no Meta - that's an approximation, I know there's ~175 sites sites, I'm not counting all those icons).

Here's a crop of the favicon file, turned sideways, to give you an idea of its contents; due to its enormous length it's difficult to view:

A crop of favicons-sprite32.png

Notes on reimplementation: The badges on some sites look different based on whether they are bronze, silver or gold; so that increases the storage required by double; instead of a single style for all three.

Ultimately, with a 32*4 (128) bytes wide file, 13572 pixels long, all the favicons and badges could be available for all the sites. The favicons-sprite32.png file is 231kB, so 231*4=924kB bytes for everything.

That's what it would take to implement your suggestion, that and an update to the code to chop up the file.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .