Board icons usability for themers

Board icons usability for themers Started by Antechinus · February 28, 2014, 02:30:35 pm · Read 36137 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic - Topic derived from @todo in index.css

Board icons usability for themers

February 28, 2014, 02:30:35 pm

Just took a brief look in there since I was responsible for a lot of those.

Question: WTF is this?

Code: [Select]

	background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYAQAAAADb20ChAAAAAnRSTlMAAQGU/a4AAAApSURBVHjaY/zPgIL+MTL+aWb84c74QZ/xgT6yFJALFARKARUAlaFpBACuqxnhHOnncgAAAABJRU5ErkJggg==) 98% 50% no-repeat;

Re: Board icons usability for themers

Reply #1 – February 28, 2014, 02:51:03 pm

base64 encoded images, saves a lot of http requests

Re: Board icons usability for themers

Reply #2 – February 28, 2014, 03:00:48 pm

Wonderful. You have just made it impossible for anyone to have a clue what the image is called, where to find it, and what the CSS actually is supposed to mean. I thought the plan was to make theming easier than SMF 2.0.x. Why do you want to make it harder?

Re: Board icons usability for themers

Reply #3 – February 28, 2014, 03:03:59 pm

Quote from: Antechinus – February 28, 2014, 02:30:35 pmJust took a brief look in there since I was responsible for a lot of those.

Question: WTF is this?

Code: [Select]
 background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYAQAAAADb20ChAAAAAnRSTlMAAQGU/a4AAAApSURBVHjaY/zPgIL+MTL+aWb84c74QZ/xgT6yFJALFARKARUAlaFpBACuqxnhHOnncgAAAABJRU5ErkJggg==) 98% 50% no-repeat;

Umm, how does this make this at all user-friendly?!

As a novice admin, this means I don't know where an image is.
As a novice themer, this means I don't understand how to change images.
As a user, I DON'T GIVE A DAMN. Bandwidth is cheap. Even if my internet is metered, I guarantee you that the entirety of a forum's theme images weighs less than some users' signature images.

Please don't make this harder than it has to be.

Re: Board icons usability for themers

Reply #4 – February 28, 2014, 03:05:02 pm

She talketh sense. Are you trying to write code for a server, or to write code for humans to work with?

If the former, just do everything in machine code and be done with it. It'd be awesome efficient. Popularity may dwindle somewhat, though.

Re: Board icons usability for themers

Reply #5 – February 28, 2014, 03:20:20 pm

As a forum owner: less bandwidth, less HTTP requests, faster performance
As a novice themer: http://www.elkarte.net/community/index.php?topic=1124.msg7728#msg7728
As a user: bandwidth is IMHO still important, not for my PC @ home (cable TV internet is fast with a flatrate) but for my mobile phone (my rate is 200 mb with HSPA+ per month, traffic over 200mb will be reduced to 64kbit)

Re: Board icons usability for themers

Reply #6 – February 28, 2014, 03:26:52 pm

Yes yes yes, we understand the theoretical benefits. We're not stupid. However, you are still inflicting incomprehensible default code on people for a benefit which is more theoretical than practical.

Re: Board icons usability for themers

Reply #7 – February 28, 2014, 03:31:58 pm

Quote from: TE – February 28, 2014, 03:20:20 pmAs a forum owner: less bandwidth, less HTTP requests, faster performance

Server bandwith is cheap. Have you priced a host lately? They're giving out bandwidth GBs as if it was candy, and that's not even the oversellers.

Are you trying to do this in lieu of letting images be cached?

Quote from: TE – February 28, 2014, 03:20:20 pmAs a novice themer: http://www.elkarte.net/community/index.php?topic=1124.msg7728#msg7728

Quote from: Antechinus – February 28, 2014, 03:17:04 pmThe problem is that the code you are giving people is meaningless to them. They will have no way of telling what it relates to, because there's no image that can see with their own eyes, and no image name tied to anything. So, all you have done is to make the default code incomprehensible, which I cannot think of as a good thing.

^ that's a beautiful response to that

Quote from: TE – February 28, 2014, 03:20:20 pmAs a user: bandwidth is IMHO still important, not for my PC @ home (cable TV internet is fast with a flatrate) but for my mobile phone (my rate is 200 mb with HSPA+ per month, traffic over 200mb will be reduced to 64kbit)

This is why mobile themes are important. I don't think bandwidth reduction to desktop themes are as high priority, and when it compromises user friendliness, especially for a new software without any stockpile of themes to use, user-friendliness should be the higher priority.

Re: Board icons usability for themers

Reply #8 – February 28, 2014, 03:40:32 pm

Just breaking this down a bit:

Quote from: TE – February 28, 2014, 03:20:20 pmAs a forum owner: less bandwidth, less HTTP requests, faster performance
As a novice themer: http://www.elkarte.net/community/index.php?topic=1124.msg7728#msg7728
As a user: bandwidth is IMHO still important, not for my PC @ home (cable TV internet is fast with a flatrate) but for my mobile phone (my rate is 200 mb with HSPA+ per month, traffic over 200mb will be reduced to 64kbit)

1/ Images are cached, so bandwidth is not a concern except for first time visitors. Ditto performance (which is fast anyway, for Elk in default form).

2/ Already answered.

3/ Then for your phone you will never want to view any images at all, right? You'll obviously be browsing with all images disabled all the time. Yes? No?

Re: Board icons usability for themers

Reply #9 – February 28, 2014, 03:46:38 pm

There are more benefits than those listed above:
- One is my example using custom.css (one file fits all, just place it in the themes folder and you're done with restyling)
- Editing sprite maps isn't easier, at least not for me.. ok, adding a single image at the end is easy, but replacing several of them with bigger ones means: funny job in photoshop and changing all the background positioning in CSS.

Converting a PNG to a base64 string is quite simple:, there are lots of online converters available http://webcodertools.com/imagetobase64converter
IMHO it's simple, just needs some guidance for the novice themer.

Re: Board icons usability for themers

Reply #10 – February 28, 2014, 03:48:34 pm

But one css file will do any minor theme tweaks anyway, so that's nothing to do with this.

Just using the image name is simpler. You are creating an extra hoop to jump through.

Re: Board icons usability for themers

Reply #11 – February 28, 2014, 03:49:20 pm

I still don't get it. Aren't images cached? What is the point of saving bandwidth when it's already saved?

Re: Board icons usability for themers

Reply #12 – February 28, 2014, 04:37:03 pm

You could just add a comment to tell you what the image is

Re: Board icons usability for themers

Reply #13 – February 28, 2014, 07:15:18 pm

Quote from: groundup – February 28, 2014, 04:37:03 pmYou could just add a comment to tell you what the image is

But that would add a couple more bits to the file ZOMGosh!!! I'm fine with this either way. If someone doesn't know how to use a CSS background or they can't understand how to change a background, they don't belong in the CSS files anyway. Novice user or not, if you are going to alter a theme, you should have a basic understanding on how to use css backgrounds. Besides there's like what? 5 or 6 of these lines...

Re: Board icons usability for themers

Reply #14 – March 01, 2014, 01:26:11 am

Quote from: IchBin – February 28, 2014, 07:15:18 pmBesides there's like what? 5 or 6 of these lines...

So obviously they're going to give such a huge advantage that the inconsistency in format will have totally awesome performance benefits.

It's not a case of not knowing how to use a CSS background. I am well aware of how to use CSS backgrounds. The problem, IMO, is that this is a case of a picture being worth a thousand words. The examples are "thousand word code". A picture would be better.

Ok, say you want to change it. The first thing people will do is try to find out what the image is called and where it is. Right click FTW. This will not give them any useful result. Immediate reaction will be "WTF?". This means you will spend a lot of time fielding support questions that are basically variations on "WTF?". This is cool if your aim is to feel alternately exasperated and superior because "n00bz don't get it", but otherwise is a waste of time.

So ok, you say, they can RTFM. Yup, for a few inconsistent lines of CSS they can RTFM after someone can first take the time to document the inconsistency (you have to WTFM first). Then say they RTFM and get the idea and think this is how Elk CSS should be done, so they want to make their changes match.

First thing they'll probably want is a reference image, which they'll have to get for themselves by copying the existing and saving it somewhere. But hang on, that image on the screen: where does it go in the CSS? You sure can't search for image name. This aint n00b-friendly even so far, and it's looking like a nuisance even for experienced coders.

Ok, so you figure out which image it is and where it goes. So you want a different one. What do you do? You do the usual thing: a "funny job in photoshop" as TE called it. You make your new image. Then, instead of just upping that with the same name as the original, you have to go and find a base64 converter and get that code, then you have to edit that code into your CSS file, then you have to up that. Of course, you'll still need to make notes so you can remember what is what. All of this is called "making things easier".