How the iPad (and Tablets) Are Driving New Web Design Trends

It’s been nearly a year since Apple’s tablet device, the iPad, was released to crowds of adoring gadget-lovers. Steve Jobs took a much-appreciated visit to San Francisco recently to unveil the second generation of this device amidst a boatload of Android tablets including Motorola’s Xoom and Samsung’s Galaxy Tab. These devices are getting into the hands of millions of users and are fast becoming devices with big browsing potential.

The Age of Devices Cometh

In a previous article here on Webdesigntuts+, we discussed the topic of the “new fold” and how the wave of new devices (from mobile phones to tablets to HDTV’s) have torn a hole in the notion of a single screen environment that web designers can plan for.

On the desktop/laptop side of the computer industry (aka, PCs), monitors began getting significantly larger a few years back… and web design began reflecting this back in 2009-2010 with big, landscape designs, wide format images, and rich textured backgrounds. We can call this movement the “scaling up” of web design for the big screen.

Note: For the purposes of this article, we’re going to refer to all desktops computers that have dedicated monitors (you know, those big behemoths that sit on people desks) as PCs. Yes, even Apple branded desktop computers will be called “PCs” for the duration of this article. It’s ok, you can breathe now.

Since early 2010 though, the diversity of screens also began a scaling down process. Device makers began to throw a bevy of new screen resolutions into the mix, most of them smaller. As we saw with trending when monitors got big, we also see a similar trend for these new smaller devices; As such, web design has changed significantly in that, new screen sizes with new input methods are radically becoming major players in the driving forces behind web design trends.

In this article we’ll take a look at some major changes web designers have had to make in order to gain tablet compatibility and how you can do the same. We’ll also take a look at some great examples of these “tablet” friendly sites.

Stating the Obvious: Mouse ≠ Finger

Let’s get one of the obvious user experience points out of the way: When navigating on a touchscreen, one must use a finger. When navigating on a computer, one can have the precision of a mouse.

The main difference in designing a usable experience for either platform is proportion. Navigation on a tablet needs to be easier and bigger than on a PC… meaning designers must reach that “middle ground” (being large enough to easily navigate on a tablet, but not too big that it looks silly on a computer) or have a separate tablet-dedicated site that uses a different stylesheet (and even a different layout) altogether.

Fluidity and Width

Most PC users have one of a handful of common resolutions on monitors from around 15” – 24”. Some have much larger screeens, but very few have smaller. The iPad, in sharp contrast, has a 9.7” screen at a resolution of 1024×768 and most Android tablets come in at 7”.

However, 1024px resolutions are not extremely uncommon for tablets or PCs. The real difference that we need to note is the “any way is the right way” attitude of tablets with built-in accelerometers. The iPad handles this change fairly nicely by scaling down fixed-width designs to fit the 768px width, or, naturally, readjust fluid-width ones to match the new dimensions.

Still, the average web designer has a unique problem of not being able to predict the environment that someone is going to view their site through.

The question is: what’s the solution to this problem? Adaptive design methods are the primary solution as developers employ adaptive CSS to only show if a device is of a certain brand, browser or resolution.

CNN’s website works great in both landscape and portrait iPad orientations.

The problem is, there isn’t just one additional resolution added into the mix… There’s a plethora of them. Adaptive CSS/JavaScript methods work nice for a few devices, but it is a cumbersome method that I doubt most developers would want to employ. I mean, would you want to design your website twenty times prior to launch for all the different devices available? I know I wouldn’t.

As such, fluid layouts will most probably become more common too, as they automatically adapt to new resolutions that are presented to them without the cumbersome need for multiple stylesheets.

The Vanishing Fold

As we said before, built-in accelerometers mean a tablet’s display has no definite resolution. Thanks to it changing resolution with little effort and the new, inertial scrolling mechanisms, there is no definite fold.

What is the fold? The fold is basically the cut-off point between what the user can see and what he can’t prior to scrolling. This was a term brought from the idea of folded newspaper and has been used in web design as a definition of visibility. Users pass judgmenet on what they can see and how fast they percept it.

However, the problem is that there is too many browsers to consider. The chart below was used in Shaun Cronin’s article on the fold to show the wide range of resolutions that are used to visit WebDesignTuts+. As you can see, there are more browsers there than possible to consider in a normal workflow, and mobile devices have contributed to the number.

“The resolution stats for Webdesigntuts+ reveals a much wider spectrum of resolutions than any single fold-line could ever account for.”

The problem lies in that the fold is adaptive on each device as the device rotates. It’s a very similar story to the above one on fluid and width.

Declining Web Technologies

You’ve probably heard: Apple doesn’t like Flash. None of Apple’s iOS-powered devices have Adobe’s Flash built in, nor possible to install. This means that parts of the web are just plain incompatible with an iPad.

It has to be said that the mainstream use of Flash websites is uncommon nowadays, but website elements do still use the standard. A lot of video on semi-popular websites, for example, is not available on the iPad. However, more popular video sites such as YouTube are slowly integrating HTML5. This is Apple’s preferred solution to Adobe Flash. The fifth revision of HTML brings a selection of new elements which can be offered as alternatives to core uses of Flash such as video and audio distribution. And thanks to implementation from sites like YouTube and CNET, it’s clear that this transition is happening.

CNET redesigned their streaming site to handle iPad-compatible HTML5 video.

Most people may shake this off as not necessary. But after it’s been just one year in public hands, the iPad has already garnered a large browsing market share so it’s becoming almost more important than considering IE 6 users.

Standards Compliance

“It’s almost as if sizing doesn’t matter on tablets.”

iPad runs the webkit-powered Safari browser, in a mobile form. As we discussed in the previous section, Safari for iPad is very HTML5 compliant but drops in a few areas. Typography is one thing as although the iPad supports SVG rendering, it doesn’t support other text rendering services that used Adobe’s Flash or even Cufon.

Popular pseudo classes cannot be used to create effects such as hovering over links due to the lack of cursor.

iPad does, however, break down barriers between user and content as zooming in and out is a lot easier. It’s almost as if sizing doesn’t matter on tablets.

Apple’s iPad 2 website features an interactive demo of it’s new Smart Cover. Swiping on a tablet or click-and-dragging on a PC will move the cover across the iPad.

The Decline of the Web (as we know it)

Say Goodbye to Web Apps: Let’s move away from the specific example of the iPad for a moment. Instead, let’s look at the bigger picture. There’s hundreds of thousands of apps on the App Store with over 65,000 of them being iPad-specific. A similarly growing number of apps are available on the Android market (many of which are copy-cat apps from the iApp versions). While it is obvious that there isn’t going to be a decline of websites, there very well might be a decline of web-based apps in exchange for apps that reside solely on a device.

What does this mean? It means that web-app that you once used by browsing to a particular website is probably going to either disappear or become redundant – in it’s place will be an actual app on your device. Your browser will cease to be the main way you access the information.

Say Goodbye to Mouse-Centric UI: There’s probably going to be a shift from upright precision browsing to laid-back, casual types. All those web apps that require the precision of a cursor are being replaced by native counterparts that run a lot smoother on a tablet. But for smaller brands, there’s a bigger chance they’ll just redesign their web app to fit the dimensions of a tablet better.

Tablets are introducing a whole new category of device for web designers to consider. Some are only catching up with the rise in smartphone browsing and now they’ve got five or six new resolutions to consider. The browsers of these devices are certainly something to consider for and my prediction is that, in a year or two, sites won’t have an iPad version but instead we’ll see universal sites as we do apps.

Say Hello to App-Centric UI: I’m not going to say that the finger is going to be the new driving factor in all web design because, well, mouses (mice?) aren’t going anywhere anytime soon. Sure, in a generation or two we might all be controlling websites with our fingers, eyeballs, and even brainwaves… but until then, the mouse/cursor is going to remain the primary tool that most people interact with websites.

What I will say instead is that websites are going to start taking more and more of their design influence from App design – this means bigger buttons, bigger typography, meaningful use of gradients and textures, and less complicated layouts. Without further delay, let’s look at the main elements of effective tablet designs:

4 Tips to Make Tablet Designs Rock

Most of the main points we’re going to dish out here can be summarized in one brilliant statement:

If web design is Lego, iPad design must be Duplo
– Oliver Reichenstein

If you’ve ever played with Legos (and what web designer hasn’t?!), this message is sure to hit home. Designing for tablets is kinda like designing grid paper for little kids who use those jumbo sized pencils to draw pictures – which is to say that you want to keep thing simple and BIG.

Pleasing Typography

Small type (and I mean the itty bitty type that we used to love using back in 2005) just isn’t readable on a tablet. Sure, you can zoom in… but if you line-length is too long the text is still pretty darn hard to read unless you’re going to scroll each line of text.

Likewise, big text can be a turn-off on tablets too. Text that is too big forces users to scroll more often than they otherwise might need to. The answer is text that’s “just right” as Goldilocks might put it. This doesn’t just mean finding the perfect font-size though; It means finding the perfect combination of font-face, size, line-height, and line length.

I’m sure we’ll be able to break this down into a full article in the future – but for now your guide should be to create a typography scheme that’s easy on the eye and fun to read.

Usable Buttons

This goes without saying, but those little 16px by 16px icons won’t cut it on a tablet when the average finger can easily click on a space of about 20px. Just like type though, this doesn’t mean that buttons need to be ginormous to be usable. Good buttons should be easy to press with a finger, but shouldn’t make PC surfers feel like they are using a Playskool mouse either.

Meaningful Textures and Gradients

There was a period in the mid 2000′s where designers started using textures just because they could. That’s all fine and well, but it doesn’t really rack up a high score when it comes to usability.

So what are meaningful textures and gradients? To put it simply – they are visual effects that emphasize and support the usability of a site. For instance, a button might have a subtle gradient over it to make it look “pressable”. A background texture might feel like dark carbon fiber to make the foreground pop out more. This is another case where we could write a full article on just this one topic, but use common sense. If a texture or gradient doesn’t offer any meaningful value, you can probably get rid of it.

Less Complicated Better Layouts

I’ll be careful with this one because “less complicated” layouts don’t mean less columns, less variety, or less interesting grids. That said, if you’ve ever tried to use the WordPress backend system on an iPad, you’ll know exactly what I’m talking about. Complicated layouts require a user to constantly zoom in on particular pieces of information to be able to read it (much less use it).

Better layouts means a more thoughtful approach to your site design. If your site doesn’t have a thumbnail for each blog post, don’t bother trying to force an image driven layout… and conversely, if your site uses a lot of images, use a layout that compliments that side of your content rather than trying to always fit 40-word excerpt next to each image.

Less complicated layouts means getting rid of the unnecessary meta data that has come to clutter up our sites nowadays… instead of listing the date, tags, categories, social media icons, author, and whateverothercrap you can think of, just make more space for what’s actually important: your core content!

Examples of iPad-Ready Sites

Now we know what makes a site optimized for tablets, let’s take a look at a handful of sites that have already done this. The sites below each work great on an iPad whether it’s their use in portrait or landscape, or their use of HTML5 elements.

Nike

Apple

iTunes Movie Trailers

BBC iPlayer

Netflix

Note that the Netflix site i’m referring to is their actual web app. Due to not being a Netflix customer and being outside the US, I have no screenshot.

SPIN

GMail