Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Button Basics

jacojoubert.ca

Post reply on HN
Print view View original

11–20 of 25 posts

Re: Button Basics

#11

Post by skalpelis »

nxn wrote: post #5
ryanf wrote: post #4

Earlier quoted context omitted.

He's zooming in so you can see the pixels. He obviously isn't talking about putting giant, stretched-out buttons on an actual site.

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.

Re: Button Basics

#12

Post by [deleted] »

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…

[deleted]

Re: Button Basics

#13

Post by MikeMacMan »

One downside with image buttons: they are really, really, annoying to localize. A compromise would be to have the button itself as an image and overlay the label in HTML.

Re: Button Basics

#14

Post by Pewpewarrows »

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.

Re: Button Basics

#15

Post by lucian1900 »

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…

Not only that, but they also break when not using a mouse. Or when white backgrounds annoy you and you reverse colours. Or in any number of other cases.

Stupid idea, but sadly popular.

Re: Button Basics

#16

Post by sedev »

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…

I'm one of the people perennially angry over 'I disabled JavaScript and your website broke,' but that's limited to sites that should work fine with JS off. Like this guy's - it's a blog post. A blog post should not completely break with JS off.

What I think isn't that 'the site breaks with JS off' is inherently terrible. Some sites actually do require JS - but that's far fewer than the number that think that they require JS, and completely breaking with JS off is a very distinct code smell. It says 'this person does not sweat the details.'

Re: Button Basics

#17

Post by oneplusone »

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.

Re: Button Basics

#18

Post by oneplusone »

MikeMacMan wrote: post #13

One downside with image buttons: they are really, really, annoying to localize. A compromise would be to have the button itself as an image and overlay the label in HTML.

That is how this is done. The label is html, only the background is an image.

Re: Button Basics

#19

Post by oneplusone »

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…

Zooming as it is is a broken mechanic. Google Docs already attempts to detect if you are zooming in and tells you to zoom to 100% or things will be broken. I wish there was a reliable way to detect if the user is at a weird zoom level.

Re: Button Basics

#20

Post by oneplusone »

masklinn wrote: post #7
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 (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.
Post reply on HN