On the iPad and Web Design

As usual, Apple’s newest cre­ation has pro­duced opin­ions. The rhetoric of those for and against it is pre­dictably strong and, occa­sion­ally, ridicu­lous. I don’t care to add my voice to the din. My atten­tion is more fix­ated on the fact that if the iPad is suc­cess­ful, we’ll have to say good­bye to a whole host of assump­tions as we say “hello” to a new era of touch com­put­ing. What does this mean for web designers?

Good­bye Mouse, Hello Hands

How much of your site depends on mouse hover states? Hope­fully none, if you’re com­mit­ted to acces­si­bil­ity. But, chances are there are parts that labour under the assump­tion that every­one is—and always will be—using a mouse. If touch com­put­ing replaces the mouse + key­board par­a­digm that’s dom­i­nant today, there’s going to be a lot of scur­ry­ing to retro­fit web­sites to be usable by folks get­ting their hands on your site. I know that I’m not going to make any­thing rely on mouse hover states from here on out.

But that’s merely a tech­ni­cal hur­dle. There’s a fun­da­men­tal dif­fer­ence between an inter­ac­tion with your screen medi­ated by a mouse and reach­ing out and touch­ing some­thing. Your web­site will no longer have clicks; it will have users touch­ing, pinch­ing, swip­ing, rotat­ing. In short, the touch expe­ri­ence is flush with poten­tial for a richer, more tex­tured inter­ac­tion par­a­digm in our web­sites. Touch might be as large a par­a­digm shift beyond today’s web as the web has been over print.

Good­bye Land­scape, Hello Portrait

Gruber viewing Daring Fireball in the iPadCom­puter mon­i­tors have always had a land­scape ori­en­ta­tion. This has only become more promi­nent in recent years as we moved from ubiq­ui­tous 4:3 ratios to var­i­ous widescreen for­mats. In short, we’ve had ample width and short heights. (Thus the reli­gious wars over “the fold.”)

But here we have a 3:4 ori­en­ta­tion. Por­trait. Does por­trait encour­age ver­ti­cal scan­ning instead of hor­i­zon­tal? What does it mean to relax about how high on the page our cen­tral con­tent is? How many assump­tions about how the web works do we have that are based on the land­scape orientation?

You might wish to inform me that the screen can just as eas­ily be used in land­scape, but my money’s on peo­ple using it in por­trait more often than not. But even that abil­ity to choose has big impli­ca­tions for our assump­tions about design­ing for the web.

Good­bye Flash, Hello Web Standards

Vir­tual ink is being spilled with aban­don over the iPad and Flash sup­port. Flash gained trac­tion because web stan­dards were defi­cient in 2 core areas: video and ani­ma­tion. HTML5 has the video ele­ment, and ani­ma­tion via can­vas, SVG, CSS ani­ma­tions, and plain ol’ JavaScript can do 98% of the things that Flash is cur­rently used for.

More impor­tantly, web stan­dards can do 100% of the desir­able things that Flash can do. Those tech­nolo­gies aren’t yet sup­ported by every browser, but they are sup­ported by Safari, and that’s all that mat­ters here. And are you really going to miss those punch a mon­key ban­ner ads?

The two things pre­vent­ing Flash’s demise are 1) momen­tum and 2) author­ing tools. The for­mer is shift­ing thanks to the iPhone and iPad, and the lat­ter is bound to change.

Good­bye Fringe, Hello Mainstream

Brows­ing on the iPhone can be frus­trat­ing when the con­tent you’re look­ing for is all Flash. Other times the site has sim­ply been overly opti­mized for the desk­top and/or Inter­net Explorer. Some may blame the device, but as the iPhone con­tin­ues to grow and the iPad emerges, it’ll be busi­ness sui­cide to have a poor expe­ri­ence in the mobile sec­tor. Let’s face it — users with enough money to spend on an iPhone and/or an iPad are exactly the types of peo­ple that most busi­nesses want to appeal to.

In short, web design­ers who under­stand how to design good web expe­ri­ences for these plat­forms will only become more sought after. And this just might allow me to jus­tify an iPad as a busi­ness expense.

12 Comments

  1. Jac
    Posted January 29, 2010 at 10:14 pm | Permalink

    Good thoughts.

    It will be very inter­est­ing to see how web design­ers will meet the chal­lenge of bridg­ing the gap between the mouse/keyboard human inter­face and the touch-screen.

    If touch-screen really is the future of com­put­ing, it won’t hap­pen overnight.

  2. Posted January 29, 2010 at 10:28 pm | Permalink

    I dis­agree with your asser­tion regard­ing Flash. While, I agree that Flash adver­tis­ing is annoy­ing, I believe Flash (and Flex com­po­nents) have their uses in cer­tain sit­u­a­tions. First, gam­ing with Flash is still a pretty big deal. Sec­ond, online video is almost all flash based. Sure, the HTML 5 tag is great, but do you really want be serv­ing video in mul­ti­ple for­mats and have to have a Flash fall­back in cases like Inter­net Explorer?

    The fact is, every­thing you can do with HTML5 you can do with Flash and every­thing you can do with Flash can work on all plat­forms except the Apple mobile devices. So, you have to do dou­ble devel­op­ment work to sup­port Apple or have to do triple devel­op­ment work to get HTML5 work­ing in IE. I think it is a polit­i­cal deci­sion on Apple’s part. I’m not par­tic­u­larly unhappy, but I believe that dis­miss­ing the fact that no flash exists out of hand is wrong.

    Great post, otherwise :)

  3. Matt
    Posted January 30, 2010 at 12:02 am | Permalink

    @Nick Thanks for chim­ing in, even if it’s to dis­agree with me. :)

    I almost left out the Flash stuff due to its highly polar­ized nature, but it is a sig­nif­i­cant aspect one way or another. I do of course have an opin­ion on the mat­ter which is that I’d rather have web stan­dards than Flash. Apple’s self-interest here just hap­pens to reflect my opinion.

    As for video, H.264 sup­ports the video ele­ment on Safari (desk­top & mobile) & Chrome, as well as Flash wher­ever it runs. That’s basi­cally 100% mar­ket pen­e­tra­tion right there with one for­mat. A sec­ond for­mat for Firefox–Ogg Theora–gets you 100% of browsers that sup­port the video ele­ment as well. Two for­mats isn’t that mas­sive a deal, and you can drop Ogg if it is. With a lit­tle capa­bil­ity sniff­ing and 1 or 2 for­mats, you’re sit­ting pretty for video. Mark Pilgrim’s Video on the Web remains the defin­i­tive work on the topic.

    Now, when you say “every­thing you can do with Flash can work on all plat­forms except the Apple mobile devices,” you betray your Win­dows usage. :) Flash is absolutely hor­ri­ble once you leave the Win­dows world. Noth­ing turns on my Mac­Book Pro’s fans quicker than watch­ing a Flash video. Flash’s “cross-platform” sup­port really means “we sup­port Win­dows and sorta-kinda work else­where.” And I hear it’s even worse on Linux.

    I think that Adobe should invest their efforts into HTML5-based rich media author­ing tools. Flash’s finan­cial upside for Adobe has always been in the author­ing tools. Why not allow Flash to export to can­vas and/or SVG? (Where the capa­bil­i­ties line up, of course.) They’re already aim­ing to export iPhone (and iPad, I guess) apps in CS5, so they’re not ide­o­log­i­cally mar­ried to the Flash run­time. Doing so would give Flash CS5 some real bite as a write-once, run-everywhere author­ing tool.

  4. Posted January 30, 2010 at 5:42 pm | Permalink

    Matt, great post.

    I’ve been think­ing about inter­ac­tion for a while now. Specif­i­cally how we should start cap­i­tal­iz­ing on motions like the swipe. Con­tent areas like gallery/DL slid­ers that almost ever site has now-a-days ( e.g., this one, gigaom, sproutven­ture ) could ben­e­fit from a swipe vs. click a small num­ber or bul­let. Not only does it help the user with big fin­gers but it’s more intuitive.

    That’s where I believe a new rev­o­lu­tion will hap­pen for the web–intuitive inter­ac­tion. Maybe Web 4.0 or 5.0, either way at some point there will need to be a focus on get­ting Web 3.0 to work more intu­itively based on medium.

    re: Flash. I’d really like to see flash on the iPad, only because Avery could use it for her kids web­sites, if it’s not there’s no real sur­prise and it would prob­a­bly help us in the long run ( as web appli­ca­tion devel­op­ers 😉 ). Regard­less of what I’d like, Apple lock­ing out flash is a lit­tle rem­i­nis­cent of MS try­ing to make its own web “stan­dards” with IE.

  5. Matt
    Posted January 31, 2010 at 12:43 am | Permalink

    @Dan Totally right on “slider” areas — swip­ing is the nat­ural UI metaphor for those. My ques­tion is: how do we indi­cate to touch users that it’s a swipe-able area? Not to men­tion learn­ing how to imple­ment that func­tion­al­ity at a JS level — fun times ahead!

    Apple’s moves re: Flash are sort of MS-esque, but at the same time there’s a huge dif­fer­ence because what they’re doing is lock­ing out non-standards rather than cre­at­ing their own pro­pri­etary things. Their moti­va­tions are of course far from altruistic–Flash is bad for their bot­tom line on mobile platforms–but it’s still a move that’s good for web standards.

  6. Ionuţ Botizan
    Posted January 31, 2010 at 7:09 am | Permalink

    I’m sorry, but I have to dis­agree on a cou­ple of things…

    1) There’s no rea­son to say good­bye to land­scape mode since most touch devices (and not only) have built-in accelerom­e­ters that makes it eas­ier to use them in both por­trait and land­scape mode. Actu­ally, in the Apple’s pro­mo­tional videos, I saw the iPad being used in land­scape mode for brows­ing the web or read­ing the email, so if they pro­mote it that way…

    2) Also, I have to dis­agree with you regard­ing Flash. First of all, Flash works mis­er­able on Macs because they lack sup­port for hard­ware accel­er­a­tion… I’m not sure if that’s a hard­ware or dri­vers prob­lem, but it’s Apple’s fault either way, since they build their com­put­ers and write their own drivers.

    Sec­ond, Flash/Flex and Sil­verlight have their own niche on the web and won’t be gone for many years to come. That niche is called “webapps”. Apps such as the Aviary suite couldn’t have been done with­out Flash.

    Third, Flash Lite has been avail­able on mobile devices for many, many years. Even more, the Nokia N900 run­ning Maemo 5 has full sup­port for Flash Player 9 and full sup­port for Flash Player 10 has already been announced for Palm’s webOS, Android and other mobile plat­forms for the begin­ing of this year.

    I’m sorry to give it to you, but Apple has closed its devices to Flash just because they want to pro­mote their own plu­gin — Quick­Time — not because they care for web standards.

    And some­thing more: Flash Pro­fes­sional, Illus­tra­tor and Dreamweaver can work with the HTML5 can­vas tag! So, you see? Adobe is not that evil as you might think!

    And here’s an inter­est­ing arti­cle from some guy hired by Adobe to work on some open stan­dards web ani­ma­tion tool.

  7. Matt
    Posted January 31, 2010 at 4:21 pm | Permalink

    @Ionuţ No need to be sorry for dis­agree­ing. Hav­ing opin­ions is wel­come, I cer­tainly do!

    As for your first point, I did say “You might wish to inform me that the screen can just as eas­ily be used in land­scape, but my money’s on peo­ple using it in por­trait more often than not.” It doesn’t mat­ter what the promo videos show, what mat­ters is how peo­ple choose to use it, and even that they have the choice. I’m bet­ting on por­trait, but it’s just a guess until the device is out in the wild.

    As for your thoughts on Flash, you’re wel­come to them. I’m aware of all the rebut­tals you’ve made, and don’t much care. The main point I’m mak­ing is that Flash use is declin­ing and web stan­dards are increas­ing, which I think is great. I’m not say­ing that Flash will vanish—this isn’t an all-or-nothing propo­si­tion. And of course Adobe will make author­ing tools that sup­port can­vas (and SVG and CSS ani­ma­tions, I’m sure)—they’ve always made money from author­ing tools, not the Flash run­time itself.

  8. Posted February 1, 2010 at 1:34 am | Permalink

    This is get us started :)

    iPhone Swipe

  9. Posted February 2, 2010 at 11:50 pm | Permalink

    Great post. But I think the swipe is not really the rev­o­lu­tion of leap­ing from mouse to touch; the pinch is…

    Hear me out. Think about it — one of the more mun­dane aspects of the web at the moment is that it’s point, click, wait for next page-worth of con­tent to load. What if, when you arrive at a home page and see an item you’re inter­ested in learn­ing more about, you sim­ply pinch and expand — effec­tively “expand­ing” that topic out to see more about it (sim­i­larly to pinch­ing and open­ing two fin­gers to zoom in on a photo — which is essen­tially the metaphor for want­ing to drill deeper into other con­tent, such as a NYT head­line or a link embed­ded in an arti­cle or com­ment). And then you pinch back to move back up the hier­ar­chy, and return to the page you started on.

    The con­tent of said link would either have already been loaded when the page is first hit, or is dynam­i­cally loaded when the pinch ges­ture is sensed — I’m not enough of a pro­gram­mer to under­stand if or how this is pos­si­ble; but I would think it would have to be some­thing sim­i­lar to the way the data for a photo is han­dled when zoomed in by the same gesture.

  10. Posted February 3, 2010 at 3:28 am | Permalink

    @Stephen I wouldn’t say the swipe will lead a rev­o­lu­tion, I don’t think the pinch and zoom will either. I’d believe some­thing unimag­in­able ( right now, to us ) will rev­o­lu­tion­ize the space.

    You exam­ple is good, but it’s essen­tially the same as a click and modal box appearing.

  11. Matt
    Posted February 3, 2010 at 11:10 am | Permalink

    @Stephen, I think you raise a good point (and that’s some good UX brain­storm­ing), but I agree with Dan that pinch/zoom isn’t where the rev­o­lu­tion nec­es­sar­ily is. The rev­o­lu­tion is in the sum, not the parts. Debat­ing between pinch/zoom and swipe already shows the big thing here: there are now a mul­ti­tude of ways to inter­act with con­tent, rather than only a mouse.

    There’s pinch, swipe, rotate, and a whole host of multi-touch (and multi-hand) ges­tures that are only start­ing to be invented. My imag­i­na­tion runs wild: smash­ing two objects (each grabbed with a a dif­fer­ent hand) together; using two hands to do combo pinch/zooms and pans to pan around Google Earth while con­trol­ling the entire 3D views­cape. A mouse only allows you to con­trol one plane at a time.

    I think that the key thing here is to note the types of inter­ac­tions that are being built into the native apps. The iWork apps espe­cially are doing some new things with mult-hand multi-touch. After see­ing what types of inter­ac­tion take hold, we can hope­fully begin to use some of them in touch-enabled websites.

  12. Posted June 1, 2010 at 4:33 pm | Permalink

    This post is fea­tured on 40 iPad tools, tips for designer

6 Trackbacks

  1. By Designing Web sites for iPad | Notes on February 8, 2010 at 5:36 pm
  2. By Hello New Design World on March 10, 2010 at 6:19 pm
  3. By Web Design for the iPad: Part 2 | Phoenix Studios Blog on November 13, 2010 at 10:40 am