Forum icon upgrade and new BBtag [ongoing]

r3naissanc3r

Honoured Citizen
Citizen
Hello everyone,

I've been doing some maintenance on our forum over the past couple of weeks. This mostly involves technical upgrades, stuff like changing javascript requests to be asynchronous, that make the forum faster and safer but otherwise are mostly invisible to users.

I've now started slowly working on a more visible upgrade. It involves changing the various images used by the forum skins, with an end goal of replacing almost all of them (except for the Euro button, city skyline, and footer ads) with SVG or font-icon versions.

Making these changes is advantageous for several reasons. For example, the new images will load much faster, will be easier to edit and maintain, and will be resolution-independent (remain sharp no matter how much you zoom-in, important for mobile browsing).

However, there are a couple of important technical issues. The first is that the coding techniques used for these replacements, while by now well-supported, are still far from having universal support. Even though I try to test any forum changes I make in a variety of browsers and OSes, I don't have either the means or the time to test every single browser and platform combination. This is made worse by the fact that we don't have full access to the forum server and code, meaning that often I have to rely on less-than-perfect workarounds (hacks if you prefer).

The second is that, unless implemented very carefully, these changes can critically reduce forum accessibility. By accessibility I'm referring here primarily to users who need to use screen-readers or text-only browsers.

For these reasons, I will be implementing these changes gradually and at a very slow pace (which naturally also works well with my RL time constraints :p ). In the process of doing so, it'll be really helpful if you can report any issues that notice here in this thread. If some image suddenly disappears, or no longer looks like what you'd expect it to, then please make sure to post this here. If you only see the issue under some specific browser or device/OS, you should still report it, and naturally include these details.

It'll also be very helpful if someone browsing the forum using a screen reader could share their experience. If you don't feel comfortable doing so in public, you're welcome to contact me via PM (or on skype, if you have my skype). I'll be very interested in the feedback and hearing how we can improve forum accessibility (even if it's issues unrelated to icons).


For now, I have installed the new versions only in the following places:

-Euro bright skin, icons appearing at the top of the forum (next to preferences, inbox, etc.);
-Euro bright skin, icons for expanding/collapsing categories in the index page;
-All skins, new icons at the third row of the header (the colorful one, with the links for citizenship, handbook, etc.).
 
So the small boxes to the left of the text in the header are there on purpose?
 
They also dont show up for me. I currently use firefox nightly for linux.
 
Oh, that's nice. Yeah, I just see boxes (Euro Classic, Windows 7, Chrome, PC).
 
r3naissanc3r said:
Apparently they don't show up under Windows. Here's what the header is meant to look like:

I have Google Chrome for Mac and I don't see them either :(
 
I now see the real icons, and they look fly.
 
As a note, the addition of the new icons in the third row of the header is independent of the icon upgrade. We can decide to keep or ditch those new icons, no matter what happens to the icons in the rest of the forum.

Personally, I think they make the header look too busy and I'd be inclined to remove them. But let me know what you think.
 
I rather like them, but it's not important to me either way.
 
I lean marginally towards removing them - don't mind really.
 
Any further opinions on the header icons?


Continuing with the upgrade, the flag next to online users, and the stamp and recruitment ads at the footer have been replaced by SVG versions. This means that, no matter how much you zoom in, they will continue to look sharp. Compare with the three-bar image next to forum statistics, which is still a PNG.

The downsides are:
1) old browsers, in particular Internet Explorer 8, do not support SVG images.
2) the recruitment and stamp ad images are now much bigger than they used to.

If we have any IE8 users around for whom the images do not appear, please post here. It is possible to create "fallbacks" for browsers that lack SVG support, but if there are no users with issues, I'd prefer to avoid it.

Also, if the images appear different than they used to for your browser, post here and I'll investigate.
 
There was an issue with the new ads not rendering properly under Safari. This should be fixed now.

Additionally, I've redrawn the SVG versions and they are now much smaller than they used to be, and much smaller than the original PNG files as well. So, downside (2) in the previous post no longer applies.
 
Several updates today.

Both skins:
- The skyline is now an SVG file.

Bright skin:
- Hover behavior of all buttons has been changed (try hovering over the "Quote" button of this post").
- Icons for "user profile", "PM", and "goto top" buttons have been updated.
- Icons have been added to a bunch of other buttons (edit, delete, quote, report).
- The icons indicating thread activity when looking at the contents of a forum have been changed.


Those of you using the classic skin, please take a look at the bright to see the new visuals and leave feedback.

 
r3naissanc3r said:
I've also shrunk the header, in all skins. Good, bad?
It's definitely different. I'll need more than a day or so to determine if it's good or not. I thought I accidentally zoomed out for a moment. :p
 
Back
Top