How the iPad Is Transforming Web Design

In Uncategorized on October 10, 2010 at 3:13 am

The iPad has only been on the market for six months, but already it has had an impact on the way content is created and consumed. Already we’re seeing more and more people at airports, coffee shops and on the train using their iPads to read books, browse the web and watch video.

We’re also seeing web designers transform their websites and web apps to look more like iPad apps. In the last few months, several high-profile websites have adjusted their designs to look and feel more like the iPad. We’re dubbing this, the “iPadification of the web.”

We think this is a trend that will only continue to gain momentum as the iPad continues to sell and subsequent tablets like the Samsung Galaxy Tab and the BlackBerry PlayBook hit the market.

Check out three areas where this is happening already.

1. Mail and Calendar

When Apple redesigned its webmail interface back in May, it was clear that the way apps were designed for the iPad was going to have a big impact on how Apple addressed its own web apps in the future.

MobileMe Mail is nearly identical to the Mail app built into the iPad, visually speaking.

The Mail app for the iPad

The new webmail interface

Likewise, the MobileMe Calendar beta, introduced back in July, is a near pixel-for-pixel recreation of Calendar for iPad.

The Calendar app on the iPad

These changes are interesting because of the high levels of consistency that now exist amongst the iOS and web app experience. It also makes us wonder how long it will be before the Mac OS X versions of these applications will be styled to match.

2. New Twitter

There are lots of interesting elements in the new Twitter redesign. In addition to adding in-line links and media support, the new design is very clearly associated with the iPad app the company released a few weeks before the new site.

As Mashable’s Jenn Van Grove commented in her assessment of the new design, the iPad-like nature of the new website makes it much easier to treat the website like a standalone client.

The multi-column layout and the way that inline media is displayed is very similar both on the native iPad app and on the new website. The big difference is that more columns can be displayed on the iPad app and their sizes adjusted by using your finger to slide back and forth.

The new homepage

This is an interesting point because it shows that even when regular websites are designed to look more like iPad applications, the way users are interacting with content — via touch or using a mouse or trackpad — is an important thing to keep in mind.

3. The New York Times Editorial Page

Last week, The New York Times rolled out a new version of its opinion section. The original design (which has sense been modified) was laid out in an extraordinarily iPad-friendly sort of way.

Opinion section of the Times Editor's Choice iPad app

Even in the updated iteration (see below), the page is laid out much like an iPad app. Columns are clean and easier to select using a finger and stories are organized into a grid, which also makes it easier for touch users to access the page.

The new Times opinion section layout

Of all the aspects of, the look and feel of the opinion section is closest to the clean and minimalist experience offered by the Times’ Editor’s Choice iPad app.

Have you noticed any other sites taking part in iPadification? If so, share your observations in the comments below.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: