The release of the iPad mini validates an entire line of tablet sizes. Essentially, it’s another case of Apple coming along and leapfrogging another existing market. The Google Nexus 7, Kindle Fire, Nook Color, and Samsung Galaxy Note have fit this small tablet bill for a while. Now that Apple has thrown its hat into the ring it will sell millions and come to dominate (as usual) our existence as web developers. But the iPad already accounted for 98% of all tablet web traffic. So how does the iPad mini really change anything?
The Big Question
In developer circles, UX conferences, Forrester industry conference calls, and even on my own blog, I’ve heard people asking a consistent question. “What are you guys doing about iPad?” There are, of course, some who are bothering to make native experiences and that is certainly a valid answer… for one manufacturer at a time. Web developers and designers who have been asked this question have always had the option of just using the standard desktop view and it was usually good enough. After with playing the Nexus 7 and the iPad mini for 24 hours I can tell you first hand, the game has changed.
One Little Problem
Yes, these devices can certainly render a full web page and it’s easily readable but something very different occurs on the smaller devices. Links and other touch targets that might have been reasonably spaced and sized on larger tablets become almost unusable without resorting to pinch-and-zoom like the bad-old-days.
These smaller tablets are not going away and since Apple is doing it now, you can bet it’s going to grow as a market. Our paradigm, which must change, is that we tend to think of devices in terms of real estate. How large of canvas do we have to paint our experiences on? This entirely the wrong way to think of things. Instead, we need to ask ourselves about the interaction model and potential connection speeds. In both of those regards, both full sized and single-handed tablets share dubious connection quality and a TOUCH based interface. Touch targets need to be well spaced out and large enough to tap for even the most clumsy, sausage-like fingers or the experience is going to suck. These mini tablets make this even more critical.
Already, responsive web design (RWD) is considered the Holy Grail of the developer community. But even if you’re going down the responsive road, you need to be testing on these mini tablets to be sure your touch targets are not too small or too close together. This means that you’re not going to be able to fit as much on the screen. This is actually a good thing because you will be further forced to think of things with a “mobile first” approach. The beauty of this is that you become focused on touch and efficiency first and foremost. Then when you get to larger sizes, you can start adding all the extraneous crap that business always seem to want.
Another viable solution is to use mobile-first frameworks like jQuery Mobile to design for the phones and then use media-queries to make your mobile site well sized for all manner of touch based sizes. The great thing about this approach is that the framework was designed with touch and bandwidth in mind from the start and comes complete with it’s own theme framework. It takes all the work out touch based web development and makes your sites feel more like apps.
Either way, the days of designing a traditional website that is based off precise cursor control, massive real estate, and consistently powerful connections are numbered. Two years from now when virtually everyone is on an LTE connection that rivals their home connections, we’re still going to be in homes, grocery stores, arenas, and places of work that repel signal like a Spartan phalanx. Even if, by then, solid connections are somehow ubiquitous (I’m laughing inside at the idea) we still have the issue of touch based interfaces that run a range of sizes and require us to plan accordingly. It's a touch based world. Welcome.
Now go, adapt, and be brilliant