Button Basics
jacojoubert.ca
Button Basics
1–10 of 25 posts
Re: Button Basics
#2So to get this straight, the author created a button image in photoshop, then created the same style using css3, took a picture of both, zoomed in, and compared the pixelated blockyness? ... While completely disregarding the fact that actually zooming in on the css3 version in the browser would avoid any pixelation and blockyness in the first place?
Re: Button Basics
#3Great tutorial if you want to create buttons form scratch in photoshop with and use css sprites.
What I would like to see, is a simple javascript api on top to generate all the nitty gritty css in the browser. That's excatly what sproutcore and sencha touch does.
Re: Button Basics
#4So to get this straight, the author created a button image in photoshop, then created the same style using css3, took a picture of both, zoomed in, and compared the pixelated blockyness? ... While completely disregarding the fact that actually zooming in on the css3 version in the browser would avoid any pixelation and blockyness in the first place?
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.
Re: Button Basics
#5So to get this straight, the author created a button image in photoshop, then created the same style using css3, took a picture of both, zoomed in, and compared the pixelated blockyness? ... While completely disregarding the fact that actually zooming in on the css3 version in the browser would avoid any pixelation and blockyness in the first place?
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.
Re: Button Basics
#6The 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. Either I create a button of only one image(which often can't be reused) or I create if with CSS3 (some compatibility issues).
Re: Button Basics
#7The 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 default[0], and when zooming in the button sometimes "tears" out[1]
Re: Button Basics
#8The 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 problems.
See also: "I disabled Javascript and your website broke", "I disable first-party cookies by default and your website broke", "I couldn't get your website to work on my wife's computer which I set up to run Lynx on Ubuntu Dapper" (no, really), etc.
I feel a lot worse over the related answer for disabled users, since they typically don't have an option to turn off being disabled, but the economics are the same: 100% higher development costs to improve the experience of under 1% of users is not feasible.
Re: Button Basics
#9The 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…
RE: disability, the economics are a little different, insofar as if you're a big enough target [1] it can be considered discrimination in a bunch of places.
Also, angry geeks aren't your decision-making customers/normal users, so you're not [as likely to be] foregoing revenue with them as you are with disabled users.
I don't mean this to come off as a holier-than-thou accessibility rant, but just thought the two situations were different enough to note.
1. http://www.law.com/jsp/cc/PubArticleCC.jsp?id=1159347929235 (pun possibly intended)
Re: Button Basics
#10No body is mentioning but the tutorial is really descriptive in content where much of the design tutorials on the web lacks. It explains each design step, not 'how to do it' but 'why to do it', which i think developer minds looking for in design.
I will have an eye on this, keep up the good work.