Taking websites to the tablet 

Thanks to Apple's revolutionary iPad, 2010 was the beginning of the tablet era. The tablet trend continues well into 2011 on a bigger scale – the very first quarter has witnessed releases or announcements of tablet lineups by all major players, including Apple. By the second quarter of 2011, almost all of these devices are expected to hit the market.

Analysts predict that tablet usage will increase by a whopping 178% this year and by 2012, 84 million tablets are expected to sell in the US alone. The day tablets will eventually outsell laptops and desktops is not too far.
   

Let's compare the major tablet platforms and devices

Google Android 2.x
Although, Google has released the new Honeycomb for tablets alone, some existing tablets and a few forthcoming ones will use Android 2.x.

Popular devices: Samsung Galaxy Pad, HTC Flyer

Google Android 3.x (Honeycomb)
Honeycomb is Google's Android version for tablets. A cleverly redesigned interface and accelerated graphics make Honeycomb truly sweet... and here to stay. Many dual core tablets are already announced on this platform.

Popular devices: Motorola Xoom, Samsung Galaxy Pad 10.1

Apple iOS
Apple revolutionized tablets with its pathbreaking iPad. They've just released the iPad2 with even better  hardware. Apple is expected to top the sales charts but not without stiff competition from numerous pretenders to the tablet throne.

Devices: iPad, iPad 2

HP WebOS 3.x
Palm's WebOS was considered one of the best touch-friendly mobile operating systems. After acquiring Palm, HP made the right move – they incorporated this operating system into several devices, including printers. HP has now announced the new tablet friendly version (they've plans to incorporate it into all of their desktops as well).

Device: HP TouchPad

RIM BlackBerry Tablet OS
Research In Motion, known until now for its BlackBerry branded business class phone, has realized it's time to broaden the horizon and announced the 7'' BlackBerry PlayBook tablet. It features a new tablet friendly operating system called 'BlackBerry tablet OS' based on QNX.

Device: BlackBerry PlayBook

Microsoft Windows 7
Even if it's not dedicated to tablets, there are a number of tablets that leverage the full power of Windows 7. The UI is not optimized for tablets as others in its league, but that does not stop power users from liking the idea of a tablet that does everything (well, almost) that their desktops can. Also, Microsoft stated that Windows 8 will work on a variety of hardware, including System on Chips (SOC) based on ARM (the major player in mobile processors).

Popular devices: MSI Windpad 100,  Asus Eee Pad EP121

Tablet Comparison Table

* Adobe announced that Flash player 10.2 for the Honeycomb platform is coming soon
** These devices are announced and will be available in the market by end of quarter one of 2011

Now that we've skimmed the surface of tablet world, here are a few questions that beg answers, of special interest to the web developer.

What's the need for a tablet friendly version of a website?

Almost all of these tablets' screen resolution matches that of the desktop. So why do we need a different version for tablets? Simply speaking, we need it to improve the user experience. We use mouse clicks and keyboards for  desktops while with tablets, we use finger sweeps and on-screen keyboards. To succeed in this ever growing space, you'll need to serve a touch optimized version of your website.

Another point – even if tablet screen resolutions match that of desktops, the screen size does not. If your site is desktop optimized, content will appear smaller (almost unreadable without zooming in) on tablets 10.1 inches or lower. Also, we need to consider tablet orientation. Users might want to switch to portrait or landscape modes according to convenience.  If the site fails to adapt to the screen orientation, the user experience will suck!

What's the difference between 'mobile friendly' and 'tablet friendly' websites?

Although, most high end smartphones support WVGA  (800 x 480 pixels) or higher resolutions, screen size is not even comparable to that of tablets or desktops. The screen size of a high end smartphone can vary from 3.5 inches to 4.3 inches (not forgetting 5-inch devices like Dell Streak) while that of a tablet ranges from 7 to 10.1 inches. Also, when optimizing sites for mobile devices, you'll need to consider phones without touchscreens as well. All this means, a mobile friendly version is not enough to satisfy the needs of a tablet user.

A mobile friendly version often means a simplified, text oriented version of the site while a tablet friendly version can be more complex in layouts and graphically as rich as the desktop version. The key to the tablet friendly version is “improved user experience”. A tablet friendly version must use the available screen real estate while ensuring touch friendliness.

How do I optimize sites for tablets?

The most common practice (which is also the best practice) is to redirect to a tablet friendly version by checking the user agent. In some cases, you need to check the screen resolution as well, using a bit of JavaScript.

We've seen iPad friendly websites serving from the sub-domain 'ipad.domain' but with with the flood of tablets now, this sub-domain makes little sense. Perhaps, a 'tablet.domain' may do better.

The main advantages of serving from a tablet friendly sub-domain are,

•  The user can clearly understand that he is visiting an optimized version for tablets , which leaves a good impression.
• Even if the device detection code fails to identify a new tablet, the user can always load the tablet friendly version using the tablet friendly URL.

For example, the following code sample detects the iPad user agent and redirects to the tablet friendly version.

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'], 'iPad');
if ($isIPad) {
    //code to redirect to the tablet friendly domain
}

Viewport is an important aspect of any mobile/tablet friendly website. It determines the default zoom level of the browser. Typically, a mobile or tablet browser assumes the site is optimized for desktop. To display the site properly, it needs to be zoomed out in the device's browser. If developers do not specify the 'viewport' correctly, the browser will try to zoom out the page a bit (you may check this by visiting a regular website on iPad). By specifying 'viewport', you are explicitly instructing the browser to not zoom because you've already optimized your site.
e.g.,  

Here, we're instructing the browser, the initial-scale is 1.0, which means do not zoom out content, it's already optimized for viewing on this device. The minimum-scale and maximum-scale allow specifying how much to zoom. By setting 'user-scalable' to 'no', the user is prevented from zooming in the page. (This makes sense because you're already providing a fully optimized site for the device and you don't want the user to mess up your layouts.)

Tablets have their limitations too

Yes, tablets are not without limitations so consider these important issues when optimizing a site for tablets.

• Though WiFi is a standard feature in tablets, many tablets support 3G/4G data connection, which means the bandwidth can be expensive.
• The latest tablets uses dual core processing technologies, but performance is still not comparable to a desktop. Also, developers need to remember the older single core (means slower) tablets.
• All tablets ship with a touch screen and users will mostly employ their fingers to navigate instead of a stylus or such pointing devices. Ensure that navigation elements are finger friendly.
• Make sure text and images are big enough for easy reading. Due to the high DPI (smaller screen, high resolution) text and images will appear smaller than they do on a desktop with the same resolution.
• Though, several platforms support (or Adobe promises) a full Flash player, the Apple iOS platform does not support Flash (not in the near future as well), hence developers need alternatives when optimizing sites for tablets.

HTML5 and Flash

Even if using Flash alone is not recommended due to the lack of support in Apple's iOS, there's no true alternative yet. If your site depends heavily on Flash (e.g., gaming site), a possible option is to detect Flash presence and display Flash content only if it's supported. If you noticed in the Tablet Comparison Table above, all tablet platforms, except Apple iOS support (or at least announced support for) Adobe Flash Player 10.1 or higher.

HTML 5 is gaining huge popularity. Many popular sites now serve HTML 5 pages with video and audio tags instead of Flash. If you use Flash just for playing video and audio, HTML 5 is the best alternative. All platforms and devices (please check the table) support HTML 5 and you can safely use it. The Javascript performance of these devices is also good, so implementing simple animations using scripting is viable too.

SEO

If you already have desktop and mobile friendly versions of your site, you don't need to optimize the tablet friendly version for search engines. You only need to redirect search engine bots to your desktop version. The tablet experience is only for users and usually, a separate search index is not required for the tablet friendly version of the site. Just make sure every page has a corresponding tablet friendly version and serve that page if the request is coming from a tablet.

The last word

Tablets are here to stay and in the near future it may outsell even desktops and laptops. It simply means if the web is your business,  it's best to optimize your site for the tablet experience as a good amount of your site's traffic will come from these devices.

Flip is looking forward to building better tablet experiences for its clients. And as a Flipper, I'm personally looking forward to taking our websites to the next dimension – the tablet!