

Pixel-perfect Android web UIs - badhairday
http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui

======
untog
This doesn't apply to all cases, but in the example given... why are you using
images at all? The button style could easily be created using CSS3 and allow
you to sidestep all this inconvenience.

~~~
johnhok
I believe rounded corners do not render nicely with CSS3 on Android's
implementation of WebKit. At least on my device, if you create rounded corner
buttons using CSS3, they end up looking jagged in the browser.

~~~
johnbender
Android's WebKit implementation lacks anti-aliasing for border radius prior to
3.x.

------
wmeredith
I'm going to be honest and say that as a developer my policy toward Android
web users is similar to the one I have for Internet Explorer users. It goes
something like, "Eh, they're used to the web looking shitty."

This is all barring those specific users and/or cases being called out in my
site requirements documentation, of course...

~~~
icebraining
As a non-smartphone user, I don't get it: why would the web when on Android
look shitty (or shittier than iOS)? They even use the same engine, shouldn't
they be very similar by definition?

~~~
SomeCallMeTim
As a mobile app developer who has several Android phones, and several iOS
devices, I can verify that the Web does in fact look the same on Android
devices as it does on iOS.

Except when the page uses Flash, of course, at which point it looks better on
an Android 2.2 device, since then I can at least see it. Not that I think
Flash should ever be used to put up a normal web site, but it's going to be a
while before we get rid of Flash from the web. If it ever happens. Some sites
from the '90s are still up, complete with heavy use of the "blink" tag, after
all...

And to be fair, the zoom pinch "feels" better on iOS than on some Android
devices, probably because their touch screen works a bit better than some
older Android touch screens. Apple's hardware quality control IS good for
something.

~~~
johnbender
As mentioned above, prior to 3.x border-radius was visually broken.

~~~
SomeCallMeTim
Hmm...on my 2.1 test phone, I just rendered this page:

[http://www.red-team-design.com/wp-
content/uploads/2011/09/aw...](http://www.red-team-design.com/wp-
content/uploads/2011/09/awesome-css3-buttons.html)

here:

<http://imgur.com/FDsdZ>

and here:

<http://imgur.com/WoMOf>

It looks substantially similar on my 2.3.3 phone, too.

I see that when it's small, it's messed up. Bummer. I guess I wait for >=3.x
to be the dominant platform before using CSS for my WebView buttons. :(

