Website Design for Tablets and Mobile

Recently I went through a redesign, and as part of the effort, I reviewed how best to support tablets and mobile visitors. If you haven’t been researching this topic recently, no one could blame you for dismissing mobile/tablets as a novelty that won’t have much impact on your web presence. But if that’s where you’re at, consider this:

It was recently estimated (as of early 2012), that 10% of all Internet traffic is now coming from mobile devices and mobile traffic will be as high as 36% by 2016. And compared to this time last year, mobile traffic is up 131% … in a single year. We are clearly in a secular trend toward personal mobility in computing. Proliferation of mobile devices now is accelerating and sales of internet enabled mobile and tablet devices now exceeds that of traditional desktop devices; tablets alone will exceed desktop sales as early as next year!

So there is a compelling need to support mobile and tablet users with any new web design moving forward. But how do you do that? First let’s talk about our objectives and we can look at a couple possible strategies from there:

Objectives:

Consider the use pattern of these devices. When using a desktop computer, they’re typically at the office and either researching work-related information, or procrastinating between projects (yes, ahem, at work). Tablet users meanwhile are typically sitting on the couch in front of the television during evenings and weekends. Mobile users meanwhile are trying to squeeze in activity while waiting in the doctors office or at a red light in their car (sad to say).

So what is going to be a meaningful and satisfying user experience for these three users? The desktop and tablet users are going to be more receptive to alternative suggestions for content (upsell eCommerce and related posts links, etc). Tablet users will enjoy media and rich images more. And all of this rich user experience is actually an impediment for mobile users who are fighting against time constraints, a small screen, and slow load times. They just want to get to the critical information such as contact information as quickly as possible. So sticking with the traditional web design only, which is geared for the desktop user, is not going to well represent the other two new classes of users (table & mobile) that you need to start thinking about.

To facilitate these new users, there are a few options:
Native Application:

The first thing that comes to most people’s minds with mobile content, are the native applications for iOS and Android that you download and install on your mobile and tablet devices. These provide very rich user experiences but require that you develop a separate application for each device that you want to support. That can get expensive. And let’s be honest, how many websites are users going to want to take the effort to download an app for? So does all that extra expense justify developing for a use case that users likely won’t even engage? There are exceptions to this rule of course. If you’re a gaming company or you are a cloud software application that provides a productivity tool that the user will need to access on a regular basis, then a native app is certainly a possibility and probably even a superior user experience. For the majority for corporate and marketing websites though, this just isn’t a reasonable option, since a user is merely looking for some quick information about your site.

Separate Mobile Design:

The next reasonable consideration is creating a separate website to support tablets and mobile phones. This is relatively easy to accomplish. It is relatively straightforward to detect the device type (e.g. HTTPUserAgent) and redirect users to alternative content accordingly. If you use your phone to browse web content frequently, you’ve likely come across a few sites that will redirect you to a separate subdomain of their website. xyz.com for example might redirect you to m.xyz.com. And there you serve the simplified version of the website that better applies to mobile devices. But this gets complicated when you begin to consider all the various permutations. What about tablets for example that actually benefit from richer user experience?

Responsive Web Design:

There is a quiet movement in the design community that began with an article by Ethan Marcotte, describing the possibility of Responsive Web Design (RWD). The idea provides a technical framework for implementing a “mobile first” web design, in which you start by designing the constrained mobile experience and layer on the richer user experience based on capability from there. By working backwards, you ensure you’ve accounted for all the various permutations such as all the different screen sizes (media ports), landscape versus portrait layout, etc.

Responsive Web design is possible primarily because of the introduction of media queries with the new stylesheets standard in CSS3. Media queries enable the website author to encapsulate CSS classes within conditional statements that evaluate the media type of the user such as window size (viewport) and orientation. RWD also addresses use of flexible design grids and context-aware images that adapt the size and quality of the image also based upon device type.

A Hybrid Approach:

After evaluating these different options, I ultimately concluded a hybrid approach was in order. The philosophy of responsive web design is elegant, I naturally gravitate to it, and it worked wonders for optimizing the desktop version of the website for tablet devices. At the end of the day though, I did not feel it was appropriate for mobile devices. As mentioned earlier in this post, mobile users have fundamentally different goals and needs, and are simply not looking for a more elegant representation of my website; they want to get the information and get it quiclkly, period. I think about my mobile experiences and when I look up a business online, its typically because I just want to find their address or contact information. Thus, there is a lot of information on the primary website that does not belong there for the mobile version, and it really should be treated separately.

An Example:

If you check out Enlogica.com on your smart phone, you’ll see that there are only 5 pages and the first is the contact link. If you click on this, it is a very simple page with the address and three buttons that allow the user to: click to call, click to email, and click to get directions on their phone. That’s it. There are a few other pages below that for the sake of completeness (the blog section is accessible at the bottom), but I’m really trying to create a simplified user experience, based upon the assumed use pattern of the user. And this is fundamentally a different prerogative than Responsive web design, which is focused on adaptive aesthetics, not user experience.

Because I’m using WordPress as the CMS framework for the site, I was able to easily setup a secondary mobile template that is only delivered to mobile devices, based upon the device type (HTTPuserAgent). This provided an elegant solution, since I was able to and optimize the content for mobile devices without having to create a separate mobile site to maintain.

In summary, I determined a hybrid approach to mobile accessibility that married the benefits of responsive web design with the practicality of a separately mobile theme was preferable. Responsive (RWD) techniques were used to adapt to a reasonable tablet experience, but mobile devices receive a separate theme, with limited navigation, and the content of those pages is also minimized. The mobile experience is greatly simplified and models the native device interface (using JQuery Mobile). This approach provides an optimal user experience on all three device classes (desktop, table, and mobile).

Frequently Asked Questions on Website Design for Tablets and Mobile