Tablet-Optimized Websites

I recently purchased a Motorola Xoom tablet as my replacement for a personal home laptop. While my co-workers and fellow code monkeys may find this perplexing, I found it as a perfect way to save some money in the world we live in.

Think about it: when you’re at home you mostly use a laptop (or desktop for that matter) for checking email, surfing the internet, some money management, and maybe some gaming for those of us who refuse to let go of our inner child. Not to toot my own horn, but my Xoom can do all of those things just as well as a traditional laptop, but with more portability and speed. Oh, and for half the price.  But what would make surfing easier on a device that looks like laptop but acts like a phone?

 

I now realize that tablets introduce a new concept into the web development world: tablet optimized web sites. Mobile websites are self-explanatory; with such a small screen and so much content on a traditional website, designers have been making style and business-related decisions on which items should stay and which should go. However, tablets introduce the portability of a phone with the screen real estate of a laptop. The only missing puzzle piece is the keyboard/mouse combination. Without those, clicking and typing does require more precision and practice to get where you want to go.

That said, what would make surfing on my Xoom easier? Well, for one, bigger buttons and text fields similar to mobile sites would be a great start. Best practices and standards are taking care of this issue on the mobile platform. Ask anyone that knows me, and they’ll tell you my dislike for the Apple family of products. However, they do have a good thing going with their strict guidelines for apps. In fact, they have an entire library dedicated to their application standards and practices. Everything is covered, from icon styles and size to textbox margins to do’s-and-don’ts of application development. Now, where is the support from my fellow Android brethren?

The other issue presented with tablets is the device identity the browser can read. Basically, websites can figure out what kind of device you’re visiting from. For example, I made up a quick javascript page to get the device/browser identity and visited with a couple different devices.

var uagent = navigator.userAgent.toLowerCase();
alert(uagent);

  • Regular desktop: mozilla/5.0 (windows; u; windows nt 6.1; en-us; rv:1.9.2.16) gecko/20110319 firefox/3.6.16
  • Droid 2: mozilla/5.0(linux; u; android 2.2; en-us; droid2 build/vzw) applewebkit/533.1 (khtml, like gecko) version/4.0 mobile safari/533.1
  • Xoom: mozilla/5.0 (linux; u; android 3.0.1; en-us; xoom build/hwi69) applewebkit/534.13 (khtml, like gecko) version/4.0 safari/534.13
  • iPhone 3Gs: mozilla/5.0 (iphone; u; cpu iphone os 4_3_1 like mac os x; en-us) applewebkit/533.17.9 (khtml, like gecko) version 5.0.2 mobile/8g4 safari/6533.18.5
  • iPad: mozilla/5.0 (ipad; u; cpu os 4_3 like mac os x; en-us) applewebkit/533.17.9 (khtml, like gecko) version/5.0.2 mobile/8f190 safari/6533.18.5

You can see from this list it’s pretty clear what device I was using. But how will the device name help me unless I keep a list of all 300+ devices and their identites and figure out what form of mobility it is? That’s just silly. Here’s a better idea: get the screen size and figure out if the website should be phone-optimized or tablet-optimized based on the width/height ratio. I went about this by using two methods: screen.width (that’s the possible size of the screen) and window.innerWidth (that’s the size of the browser the phone is using). I also took into account that the phone/tablet can be held vertically (how a phone is normally surfed) and horizontally (like how a tablet is normally surfed).

alert("orientation: " + window.orientation);
var screenWidth = screen.width;
var screenHeight = screen.height;
alert("width: " + screenWidth + ", height: " + screenHeight);
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
alert("width: " + screenWidth + ", height: " + screenHeight);

If you look over the numbers, you’ll start to see a trend:  there is no trend.  The results from window.innerWidth are the most concerning.  For example, window.innerWidth found the width of my Droid to be over 1000 pixels.  Or, the iPhone’s height was over 1200 pixels.  That’s way too many pixels for such a small screen.  The good news is that screen.width was pretty consistent, with exception to that pesky Droid 2.  When the device is portrait or landscape, the width and height are the same number, but flip-flopped.

So, analysis time.  With consistent width and height from screen.width, I say we use that.  From there, we can figure out how big buttons and text fields and other items need to be.  That’s pretty much what Apple is doing, since they have complete control over the hardware as well as the software.  But when we’re supporting so many devices with different displays, we’ll need to figure out what the best size is for the device at hand.

Also, since we can see that tablets have more pixels to work with, we can put more content on the page compared to a traditional mobile site.  But we don’t want to leave the pages looking cluttered and over-loaded.  A good tablet-optimized site would have less content per page, but more links to other content pages.  A great example is the YouTube app for my Xoom. 

There is plenty of content on this page, but it’s all links to videos on other pages.  This way, the user isn’t locked on one page and has to move through the site to find what they want, and can do it pretty easily.  Now your site has more exposure and a happier user.  Win-win.

Finally, we need to remember that our users can now rotate their monitors vertically or horizontally.  This will present problems if the website is hard-coded with styling numbers as opposed to percentages.  You can see evidence of this in my screen.width numbers, how the width and height flip-flop when the device is turned.  A good example of a tablet-optimized website is MTV.com.  They have implemented a lot of photos and links for content, big text for the links, and used percentages for their sizes, which you can see if you turn your device sideways and zoom out.  Kudos to Music Television.

So, as users yourselves, what would you like to see on mobile sites in the future?

« Prev Article
Next Article »