Button Basics • Hacker News Board

Re: Button Basics

#21

Post by Poiesis » Tue, Jul 05, 2011, 4:32 PM UTC

patio11 wrote: post #8

pedrokost wrote: post #6

The problem with image buttons like the ones shown are that they visually break when zoomed in (tested in Chrome). When I zoom in, the right side of the buttons does no longer fit perfectly with the rest of the button: it get moved by some 2 pixels up, while the rest of the button remains in place. I've experienced this problem on many websites, that's why I try to avoid composite image buttons whenever possible. Eit…

The problem with image buttons like the ones shown are that they visually break when zoomed in Breaking features that paying users overwhelmingly do not use is not a showstopper for most businesses. I don't actively hate power-users, but if you're savvy enough to do anything other than open up the browser in the default settings and make with the clicky-clicky, you're savvy enough to undo it when you run into problem…

That economic argument against paying to help the disabled access services is the reason why the ADA was passed.

It's a tough decision where to draw the line. A purely economic decision seems soulless; accommodation of everyone will bankrupt you.

Re: Button Basics

#22

Post by masklinn » Tue, Jul 05, 2011, 4:41 PM UTC

oneplusone wrote: post #20

masklinn wrote: post #7

Earlier quoted context omitted.

> The problem with image buttons like the ones shown are that they visually break when zoomed in (tested in Chrome). When I zoom in, the right side of the buttons does no longer fit perfectly with the rest of the button: it get moved by some 2 pixels up, while the rest of the button remains in place. Using Camino (FF3 or FF3.5 engine, something like that) there isn't even a need to zoom in: the alignment is broken by…

Is this still the case? If so I will get it fixed. I didn't do any testing yet because the blog post was not meant to go live yet.

> Is this still the case?

It is.

Re: Button Basics

#23

Post by oneplusone » Tue, Jul 05, 2011, 11:16 PM UTC

masklinn wrote: post #22

oneplusone wrote: post #20

Earlier quoted context omitted.

Is this still the case? If so I will get it fixed. I didn't do any testing yet because the blog post was not meant to go live yet.

> Is this still the case? It is.

Oh man, Camino uses Gecko 1.9.0 which is the same version Firefox 3.0 shipped with (but the buttons work in firefox 3.0).

I traced down the bug to a conflict in my blog's css with the buttons. Somewhere they are inheriting styles that break them. The code for the buttons on github does not have this problem.

I would love to fix this, but Camino doesn't appear to have any sort of developer tool. How are you suppose to debug things?

Re: Button Basics

#24

Post by nxn » Wed, Jul 06, 2011, 12:42 AM UTC

skalpelis wrote: post #11

nxn wrote: post #5

Earlier quoted context omitted.

Which is not what I'm talking about either. I'm just saying it's a bit ironic to need to zoom in on a button to even distinguish any quality differences and then giving the quality award to the method that isn't suitable for scaling.

The zoomed image was meant to illustrate why the photoshop button was rendered better at default size - it has nothing to do with browser zooming.

I understand that, in fact I mentioned that the aspect of zooming was completely ignored in my first post, and I found it ironic that it was.

But anyway, lets forget about that fact for now. If you need to zoom in 400-800x on some pixels to even be able to spot the differences, then in practical terms there are no differences. You can't expect your typical visitor to sit in front of the monitor with a magnifying glass sweating at your pixel perfect buttons. Honestly, no one is going to give it much more than a glance, so attention to detail you can hardly spot with the naked eye is almost completely pointless.

Now to come back to my main point: what isn't pointless is maintaining quality when zooming in with the browser. This is something I often do myself when I'm too lazy to put my contacts in to just casually browse the web. Just about every website looks like a mess of blurry/pixelated crap when you do that. Had he just went with the css3 approach, the quality at non standard zoom levels would far outweigh the minuscule pixel details at normal zoom levels between the css3 and photoshop versions.

Anyway, that's all I really wanted to say. Had the point been that CSS3 styling was still iffy with older browsers being around and the photoshop button was superior for that reason, I wouldn't have said anything. But to dismiss it based on some differences in pixelation you wouldn't even spot normally, while ignoring that if you had actually zoomed in the browser there would be no pixelation at all with the "inferior" css3 version, was just too much.

Re: Button Basics

#25

Post by heycarsten » Wed, Jul 06, 2011, 11:06 PM UTC

oneplusone wrote: post #17

Pewpewarrows wrote: post #14

Fyi, using Dropbox as a replacement for real image hosting (either on your own server or through a service such as S3) means that anyone at work who can't get to a Dropbox URL can't see basically anything worthwhile on your site.

Author here: I will move the images over to a real host as soon as I can. The blog post was incomplete and only published so some friends could read it over. Wasn't meant to go live at all.

Sorry about that :-(