Category: CSS

Journey through the clickable elements for Android

Before going into the topic, I have to say, mobile browser compatibility issues are much uglier than desktop browsers. I should have appreciated the days when I was a desktop web guy:)

When there are more and more mobile devices with large touch screen available, a lot of companies are making touch friendly version of their websites for those devices. For example, Google Reader for iPhone and Android devices, and mobile portal of St. George Bank.

One thing you would notice is that they all use large clickable area for the finger to press. These are usually not implemented with buttons or images, rather using the anchor tag <a>.

Of course there are many ways to implement this, but when it comes to Android devices, things are becoming a bit tricky.

You see, when you pressed on a clickable element in the Android browser, you usually see the orange border telling you that you have pressed the element and the browser is doing it’s work right now:
Android browser highlighting pressed hyperlink

Ideally this should happen when you press on anywhere of the clickable element including the empty area. But the fact is, it doesn’t work so for all the implementations. In fact, it only works with 1 hacky implementation. Let’s us view the following 4 examples in the default Android browser:

Method 1

Wrapping a <a> with 100% width/height in <div>

Method 2

Wrapping a <span> displayed as block in <a>



<a>
    <span style="display: block">
        Contents...
    </span>
</a>


Method 3

Wrapping a <div> in <a>


<a style="display: block;">
    <div>
        Contents...
    </div>
</a>

The large empty area in the above examples are intended for your finger to press on them. If you really try these on the default Android browser, you’ll notice only Method 3 is a fully working implementation, as the browser still highlights the entire clickable block when pressing on the empty area. This is bad because method 3 is a non-standard compliance implementation (wrapping the block level element <div> in the line level element <a>), which means there’s no guarantee for the browser to support it in any future versions.

So it’s pretty clear that there’s only 2 options ahead: you either disregard the standard and go with the visually correct method (3) or stick to the standard and leaving a less perfect user experience on your website hopping it would be fixed in the Android browser one day.

Advertisements