

Button Basics - heycarsten
http://jacojoubert.ca/post/7210637533/button-basics

======
orionlogic
No 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.

------
pedrokost
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. Either I create a button of only
one image(which often can't be reused) or I create if with CSS3 (some
compatibility issues).

~~~
patio11
_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.

~~~
sedev
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.'

------
nxn
So 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?

~~~
ryanf
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.

~~~
nxn
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.

~~~
skalpelis
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.

~~~
nxn
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.

------
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.

~~~
oneplusone
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.

~~~
heycarsten
Sorry about that :-(

------
thomasfl
Great 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.

------
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.

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

