Toronto Dude (torontodude) wrote,
Toronto Dude

Browsing experience with Android tablets

One of the biggest problems with Android tablets is the poor browsing experience you encounter sometimes. It appears as if websites want to render themselves as a smartphone.
As a developer I view the same problem from the other side; I cannot tell when an Android device is a smartphone or a tablet, they all report "Android" in the user agent. And in cases when I want to display different UI based on the device size, I end up having to add exceptions for each hardware maker, oh and there are plenty of them!.
The problem seems to come from one of Android's greatest features (screen size agnostic) that's become Achilles' heel. Yes, this design works when you are building a native app, but it doesn't work when building a web app since the server has no clue what device this is. There are basically two workarounds to overcome this:
1. window.devicePixelRatio: Well we can use javascript to get the device pixel ratio, but doing things in JavaScript is too late in some cases, we need to detect the device ahead of time (at first render), JavaScript runs after the page has been downloaded. Of course we can work around this problem by creating landing pages that will redirect or postback with the pixel ratio, this is counter intuitive especially that we are talking about mobile devices (slow connections and limited data plans) and want to reduce network chattiness.

2. -webkit-device-pixel-ratio in css media selector: We can build different css files based on medium or low or high densities, include all of them in the page then select the appropriate one based on the pixel density. This works well for Android, but we will have issues when we want to target iPads, PlayBooks or Kindle, how many selectors do we want to add in the page? The server can render different selectors depending on the device used.

These two alternatives are not easy to build, and add extra complexity especially for the basic websites that the average web designer cannot handle easily. iOS makes it very simple for the poor old web developer, there are two screen sizes iPad and iPhone and if you build separate UI for each it will render reasonably well. Basically a web developer can simply target the iPhone and let the iPad render the desktop version, which seems to work well most of the time.

Finally, there is also the blurring line between tablets and smartphones, is Galaxy Note a tablet or a phone?
Tags: android, ipad, web
  • Post a new comment


    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.