Why Websites Need to be Revamped for Touch and Tablets
The launch of mobile Safari was huge, because it promised to bring a true desktop browsing experience to mobile devices. Products like Opera had tried in the past, and failed, making Apple's iPhone particularly welcome. But there's always been one problem with mobile Safari — bringing a desktop browsing experience to a mobile device is just plain stupid. The two platforms are nothing alike.

Craigslist is a website designed for desktop browsing. It's a wall of links, equally exciting and overwhelming at the same time. And for someone with large fingers, it's near impossible to navigate on a touch screen device. In what will probably be regarded as Steve Jobs' famous " Thoughts on Flash" last week, the Apple co-founder accused Adobe's flash of being "designed for PCs using mice, not for touch screens using fingers." That's a little unfair, however; the problem isn't flash, it's the internet, a browsing experience birthed in the 90's when touch-screens were barely a blip on the mobile horizon. If touch devices outpace desktops in the battle for our eyes, repackaging that traditional browsing experience won't be good enough. We're going to have to get a lot more finger friendly for the mobile web to succeed.

On the average computer, your keyboard can be used at any time, and your pointer does exactly what the name implies. It's only with user input that any click action actually occurs. But on touch screen devices, there's no pointing — only clicking. Hovering isn't possible, and actions that rely on it don't quite work. Navigation menus, for example, break. If there's one bright side to all this, it's that rollover advertisements don't work either.

 Those contextual menus? All based on hover. Lets see your iPad do that.
 Those contextual menus? All based on hover. Lets see your iPad do that.
However, there are further UI issues. Websites are designed for the precise interaction of a mouse, complete with tiny scrollbars, links and buttons. Fingers, on the other hand, are not precise, but large, unpredictable appendages that cover a much larger area. You're either required to zoom to an uncomfortable level just to ensure you've clicked the right place, or risk jumping to an unintended page. After all, there's a reason Apple packaged a new, touch-driven OS with their iPhone and iPad, instead of regular OS X — can we really expect the desktop web to function with the same ease and usability on a touch-driven device?

Clearly, there's some changes that need to be made. Text input, for example, is entirely contextual on a mobile device. Unless there's a web form present for inputting information, invoking that virtual keyboard can be difficult, if not near impossible. Zoho is a great example of a complex, rich-media web application that doesn't always behave as expected on touch-driven devices. Being unable to call that keyboard up on demand means some websites simply refuse to work.

The inability to hover also present a unique problem for UI designers. Navigation menus, many of which are based on hover-driven AJAX code, need to be re-written for click-friendly usage. Links need to be made larger, and less reliant on rolling menus, and searching a site should be a function of the browser itself, not a small text box in the corner of a page.

 Maybe Microsoft's on to something with their new, touch-driven UI?
 Maybe Microsoft's on to something with their new, touch-driven UI?
The most important changes for the touch-driven web should come in the form of content. We currently view the web in terms of pages, with "Next" and "Read more" links determining the flow of information. Even Tested is based on this paradigm, found within this very article. But touch-drive devices need not be bound by the same rules. We can use our fingers to pinch, zoom, swipe and swivel, all of which can be used to manipulate the content on a screen. Smaller text could be embedded within bigger elements, accessible through a Google Maps style of deep zooming. Or instead of the conventional, page-based layout, think of an open canvas, where content flows on demand. Already, some iPad applications are using this approach, extending information beyond the borders of the screen like a waterfall, accessible with just the swipe of a finger.

While idealistic, changes like these aren't all feasible. Even now, both users and designers are gaining a better idea of what works and what doesn't on touch-screen devices, but it's clear something needs to change. The desktop web of old is not a friendly place for human fingers, and if the mobile world is going to succeed, that's a fact that should be recognized. Devices like the iPad are one step down that path, forcing content producers to think differently about how their information should be displayed. It's a new set of rules, for a new set of devices, and it's our fingers that will determine where the future of the internet lies.  
 
Image via Flickr user Johan Larsson.
7 Comments
takua108 on May 14, 2010
*cough* Whiskey Media websites *cough* *hack*
Dynotaku on May 14, 2010
@takua108:  Hah hah my exact thought.
Legend on May 14, 2010
@takua108 said:
" *cough* Whiskey Media websites *cough* *hack* "
lol, indeed.
norman on May 14, 2010
@takua108: @Legend: @Dynotaku:  the point of the story was to be forward thinking, and examine the principles of web design that are suited for the desktop/mouse/keyboard paradigm to see what would apply to touch interfaces. think of it as a thought exercise as opposed to a practical call to arms! 
 
it's a chicken and egg scenario where we have to wait for tablets to really establish themselves as a primary computing device before web developers can justify the cost of innovation and adaptation. redesigning the web for touch isn't as easy as creating a mobile version of a website. you're not stripping away elements to meet screen size--you have to rethink the browsing experience as a whole.
RUSBoris on May 14, 2010
@norman: Norman, can't you guys at least replace the Flash videos with HTML5 or have a choice between the two? I've been thinking of selling my MBP and getting an iPad but I visit this site and GiantBomb a lot 
takua108 on May 14, 2010
@norman: Haha, yeah, you're right, I was just messing around, as I've tried to use Whiskey sites on my iPod touch and they didn't work optimally in the past. To be fair, there are a select few sites that work well on Mobile Safari (iPod touch/iPhone) well anyways. Great article, though :D
will on May 17, 2010
@RUSBoris: It's kind of a big problem, due to the vast quantity of video on the other sites. We all use the same backend, so if we flip HTML5 support, everyone else has to too, and while all of our videos are available in an iPhone resolution h.264, there are hundreds of hours of footage on GB and the other sites that aren't. So basically, we need to recompress hundreds or even thousands of hours of footage before we can flip the switch. It will happen, but it's taking a while.
  • Type the words above including the space. Get new words?
Errors will go here
Post Reply
Processing....
Popular News
How To Rip DVDs to Play on Any Device—For Free!

Our ultimate DVD copying guide shows you how to use Handbrake to rip discs for playback on your laptop, Xbox, PS3, iPhone, Zune, netbook, iPad, PSP, iPod, and pretty much anything else

Video: How To Build the Best $1500 Gaming PC, Step-by-Step

Do you like saving money? What about playing PC games? Have you ever considered building your own PC? We show you exactly what you need to know to build an awesome $1500 gaming PC.

How To Build an Awesome $500 Windows Home Server

We pick the best parts to build a lean media backup and streaming machine.

Apple iPad Wi-Fi Review

Apple's device isn't magical, but it is going to make the tablet a real category--for better or for worse

Nexus One vs HTC Desire vs HTC Incredible: What's the Difference?

HTC is releasing more Android phones all the time, but is there a difference?

How To Steal Mac OS's Best Features for Windows

Windows 7's Aero is a fine UI, but there are just a few things it's missing. Here's how to steal some of Mac OS's features.

How To Rip a Blu-Ray Movie with Just One Click

The MakeMKV utility decrypts and rips a Blu-Ray disc with just one click, preserving the original video quality of the source file.

How To Stream All of Your Video Files to iPhone and iPad

Get your DVD rips off your computer and play them on a mobile device, without having to convert them beforehand.

Apple Fall Event 2010 Discussion Thread: iPods and AppleTV

Discuss Apple's Fall Event announcements here!

What Are You Playing This Weekend?

The weekend's upon us, and like any good nerds, we're spending the last days of summer holed up in our houses playing board and video games. What are you playing this weekend?

iPod Nano 6G vs 5G: Everything You Need to Know

The iPod nano is ready to go running. Are you?

Your Shiny New Xbox 360 Controller is Already Outdated

Transforming d-pad makes it more than just a cosmetic update.

Everything You Should Know about Apple's New iPod Touch

All views expressed in this deck are the sole property of the internet rumor machine.

Why the Obama Administration's Stance on Piracy Sidesteps Complicated Issues

Addressing an audience of workers in the music industry, Commerce Secretary Gary Locke reaffirmed the Obama administration's commitment to cracking down on media piracy on the Internet.

Living with Technology: Two Mice for One Desktop PC

What would drive a man to use two mice for one computer?

Android Market Roundup: 5 Apps to Put a Smile on Your Phone

It's the weekly Android Market Roundup.

Apple Fall Event 2010 Discussion Thread: iPods and AppleTV

Discuss Apple's Fall Event announcements here!

What Are You Playing This Weekend?

The weekend's upon us, and like any good nerds, we're spending the last days of summer holed up in our houses playing board and video games. What are you playing this weekend?

Your Shiny New Xbox 360 Controller is Already Outdated

Transforming d-pad makes it more than just a cosmetic update.

Never Give Up: Microsoft May Be Working on One More Zune

Just in time for Apple's new iPod Touch announcement, a rumor is brewing indicating that Microsoft is going to give the Zune another go.

Why the Obama Administration's Stance on Piracy Sidesteps Complicated Issues

Addressing an audience of workers in the music industry, Commerce Secretary Gary Locke reaffirmed the Obama administration's commitment to cracking down on media piracy on the Internet.

The New AppleTV: $99, No Apps, All About Streaming

The original AppleTV was a device with an identity crisis. The latest update aims to fix that, and a whole lot more.

Living with Technology: Two Mice for One Desktop PC

What would drive a man to use two mice for one computer?

Everything You Should Know about Apple's New iPod Touch

All views expressed in this deck are the sole property of the internet rumor machine.