On the iPad and Web Design

As usu­al, 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­al­ly, ridicu­lous. I don’t care to add my voice to the din. My atten­tion is more fix­at­ed 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 “hel­lo” to a new era of touch com­put­ing. What does this mean for web designers?

Goodbye Mouse, Hello Hands

How much of your site depends on mouse hov­er states? Hope­ful­ly none, if you’re com­mit­ted to acces­si­bil­i­ty. 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 hov­er states from here on out.

But that’s mere­ly 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­at­ed 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 rich­er, 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.

Goodbye Landscape, Hello Portrait

Gruber viewing Daring Fireball in the iPadCom­put­er 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­i­ly be used in land­scape, but my mon­ey’s on peo­ple using it in por­trait more often than not. But even that abil­i­ty to choose has big impli­ca­tions for our assump­tions about design­ing for the web.

Goodbye Flash, Hello Web Standards

Vir­tu­al 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­rent­ly used for.

More impor­tant­ly, web stan­dards can do 100% of the desir­able things that Flash can do. Those tech­nolo­gies aren’t yet sup­port­ed by every brows­er, but they are sup­port­ed by Safari, and that’s all that mat­ters here. And are you real­ly 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.

Goodbye 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. Oth­er times the site has sim­ply been over­ly opti­mized for the desk­top and/or Inter­net Explor­er. 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 mon­ey to spend on an iPhone and/or an iPad are exact­ly the types of peo­ple that most busi­ness­es 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­ti­fy 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 real­ly 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 pret­ty big deal. Sec­ond, online video is almost all flash based. Sure, the HTML 5 tag is great, but do you real­ly want be serv­ing video in mul­ti­ple for­mats and have to have a Flash fall­back in cas­es 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­lar­ly unhap­py, 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 high­ly polar­ized nature, but it is a sig­nif­i­cant aspect one way or anoth­er. 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-inter­est 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­ev­er it runs. That’s basi­cal­ly 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­i­ty sniff­ing and 1 or 2 for­mats, you’re sit­ting pret­ty for video. Mark Pil­grim’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 absolute­ly hor­ri­ble once you leave the Win­dows world. Noth­ing turns on my Mac­Book Pro’s fans quick­er than watch­ing a Flash video. Flash’s “cross-plat­form” sup­port real­ly means “we sup­port Win­dows and sor­ta-kin­da work else­where.” And I hear it’s even worse on Linux. 

    I think that Adobe should invest their efforts into HTM­L5-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­cal­ly mar­ried to the Flash run­time. Doing so would give Flash CS5 some real bite as a write-once, run-every­where 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­cal­ly 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­itive­ly based on medium.

    re: Flash. I’d real­ly 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 Total­ly right on “slid­er” areas — swip­ing is the nat­ur­al 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­i­ty at a JS lev­el — 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-stan­dards 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 sor­ry, 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­i­er to use them in both por­trait and land­scape mode. Actu­al­ly, in the Apple’s pro­mo­tion­al 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 could­n’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 Mae­mo 5 has full sup­port for Flash Play­er 9 and full sup­port for Flash Play­er 10 has already been announced for Palm’s webOS, Android and oth­er mobile plat­forms for the begin­ing of this year.

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

    And some­thing more: Flash Pro­fes­sion­al, 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 sor­ry for dis­agree­ing. Hav­ing opin­ions is wel­come, I cer­tain­ly do!

    As for your first point, I did say “You might wish to inform me that the screen can just as eas­i­ly be used in land­scape, but my money’s on peo­ple using it in por­trait more often than not.” It does­n’t mat­ter what the pro­mo 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-noth­ing 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 mon­ey 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 real­ly 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­est­ed in learn­ing more about, you sim­ply pinch and expand — effec­tive­ly “expand­ing” that top­ic out to see more about it (sim­i­lar­ly to pinch­ing and open­ing two fin­gers to zoom in on a pho­to — which is essen­tial­ly the metaphor for want­i­ng to drill deep­er into oth­er 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 start­ed on.

    The con­tent of said link would either have already been loaded when the page is first hit, or is dynam­i­cal­ly 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 pho­to is han­dled when zoomed in by the same gesture.

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

    @Stephen I would­n’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­tial­ly 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­i­ly 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 mul­ti-touch (and mul­ti-hand) ges­tures that are only start­ing to be invent­ed. My imag­i­na­tion runs wild: smash­ing two objects (each grabbed with a a dif­fer­ent hand) togeth­er; using two hands to do com­bo 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­cial­ly are doing some new things with mult-hand mul­ti-touch. After see­ing what types of inter­ac­tion take hold, we can hope­ful­ly 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