As usual, Apple’s newest creation has produced opinions. The rhetoric of those for and against it is predictably strong and, occasionally, ridiculous. I don’t care to add my voice to the din. My attention is more fixated on the fact that if the iPad is successful, we’ll have to say goodbye to a whole host of assumptions as we say “hello” to a new era of touch computing. What does this mean for web designers?
Goodbye Mouse, Hello Hands
How much of your site depends on mouse hover states? Hopefully none, if you’re committed to accessibility. But, chances are there are parts that labour under the assumption that everyone is—and always will be—using a mouse. If touch computing replaces the mouse + keyboard paradigm that’s dominant today, there’s going to be a lot of scurrying to retrofit websites to be usable by folks getting their hands on your site. I know that I’m not going to make anything rely on mouse hover states from here on out.
But that’s merely a technical hurdle. There’s a fundamental difference between an interaction with your screen mediated by a mouse and reaching out and touching something. Your website will no longer have clicks; it will have users touching, pinching, swiping, rotating. In short, the touch experience is flush with potential for a richer, more textured interaction paradigm in our websites. Touch might be as large a paradigm shift beyond today’s web as the web has been over print.
Goodbye Landscape, Hello Portrait
Computer monitors have always had a landscape orientation. This has only become more prominent in recent years as we moved from ubiquitous 4:3 ratios to various widescreen formats. In short, we’ve had ample width and short heights. (Thus the religious wars over “the fold.”)
But here we have a 3:4 orientation. Portrait. Does portrait encourage vertical scanning instead of horizontal? What does it mean to relax about how high on the page our central content is? How many assumptions about how the web works do we have that are based on the landscape orientation?
You might wish to inform me that the screen can just as easily be used in landscape, but my money’s on people using it in portrait more often than not. But even that ability to choose has big implications for our assumptions about designing for the web.
Goodbye Flash, Hello Web Standards
Virtual ink is being spilled with abandon over the iPad and Flash support. Flash gained traction because web standards were deficient in 2 core areas: video and animation. HTML5 has the video element, and animation via canvas, SVG, CSS animations, and plain ol’ JavaScript can do 98% of the things that Flash is currently used for.
More importantly, web standards can do 100% of the desirable things that Flash can do. Those technologies aren’t yet supported by every browser, but they are supported by Safari, and that’s all that matters here. And are you really going to miss those punch a monkey banner ads?
The two things preventing Flash’s demise are 1) momentum and 2) authoring tools. The former is shifting thanks to the iPhone and iPad, and the latter is bound to change.
Goodbye Fringe, Hello Mainstream
Browsing on the iPhone can be frustrating when the content you’re looking for is all Flash. Other times the site has simply been overly optimized for the desktop and/or Internet Explorer. Some may blame the device, but as the iPhone continues to grow and the iPad emerges, it’ll be business suicide to have a poor experience in the mobile sector. Let’s face it — users with enough money to spend on an iPhone and/or an iPad are exactly the types of people that most businesses want to appeal to.
In short, web designers who understand how to design good web experiences for these platforms will only become more sought after. And this just might allow me to justify an iPad as a business expense.
12 Comments
Good thoughts.
It will be very interesting to see how web designers will meet the challenge of bridging the gap between the mouse/keyboard human interface and the touch-screen.
If touch-screen really is the future of computing, it won’t happen overnight.
I disagree with your assertion regarding Flash. While, I agree that Flash advertising is annoying, I believe Flash (and Flex components) have their uses in certain situations. First, gaming with Flash is still a pretty big deal. Second, online video is almost all flash based. Sure, the HTML 5 tag is great, but do you really want be serving video in multiple formats and have to have a Flash fallback in cases like Internet Explorer?
The fact is, everything you can do with HTML5 you can do with Flash and everything you can do with Flash can work on all platforms except the Apple mobile devices. So, you have to do double development work to support Apple or have to do triple development work to get HTML5 working in IE. I think it is a political decision on Apple’s part. I’m not particularly unhappy, but I believe that dismissing the fact that no flash exists out of hand is wrong.
Great post, otherwise 🙂
@Nick Thanks for chiming in, even if it’s to disagree with me. 🙂
I almost left out the Flash stuff due to its highly polarized nature, but it is a significant aspect one way or another. I do of course have an opinion on the matter which is that I’d rather have web standards than Flash. Apple’s self-interest here just happens to reflect my opinion.
As for video, H.264 supports the
video
element on Safari (desktop & mobile) & Chrome, as well as Flash wherever it runs. That’s basically 100% market penetration right there with one format. A second format for Firefox–Ogg Theora–gets you 100% of browsers that support thevideo
element as well. Two formats isn’t that massive a deal, and you can drop Ogg if it is. With a little capability sniffing and 1 or 2 formats, you’re sitting pretty for video. Mark Pilgrim’s Video on the Web remains the definitive work on the topic.Now, when you say “everything you can do with Flash can work on all platforms except the Apple mobile devices,” you betray your Windows usage. 🙂 Flash is absolutely horrible once you leave the Windows world. Nothing turns on my MacBook Pro’s fans quicker than watching a Flash video. Flash’s “cross-platform” support really means “we support Windows and sorta-kinda work elsewhere.” And I hear it’s even worse on Linux.
I think that Adobe should invest their efforts into HTML5-based rich media authoring tools. Flash’s financial upside for Adobe has always been in the authoring tools. Why not allow Flash to export to canvas and/or SVG? (Where the capabilities line up, of course.) They’re already aiming to export iPhone (and iPad, I guess) apps in CS5, so they’re not ideologically married to the Flash runtime. Doing so would give Flash CS5 some real bite as a write-once, run-everywhere authoring tool.
Matt, great post.
I’ve been thinking about interaction for a while now. Specifically how we should start capitalizing on motions like the swipe. Content areas like gallery/DL sliders that almost ever site has now-a-days ( e.g., this one, gigaom, sproutventure ) could benefit from a swipe vs. click a small number or bullet. Not only does it help the user with big fingers but it’s more intuitive.
That’s where I believe a new revolution will happen for the web–intuitive interaction. Maybe Web 4.0 or 5.0, either way at some point there will need to be a focus on getting Web 3.0 to work more intuitively based on medium.
re: Flash. I’d really like to see flash on the iPad, only because Avery could use it for her kids websites, if it’s not there’s no real surprise and it would probably help us in the long run ( as web application developers 😉 ). Regardless of what I’d like, Apple locking out flash is a little reminiscent of MS trying to make its own web “standards” with IE.
@Dan Totally right on “slider” areas — swiping is the natural UI metaphor for those. My question is: how do we indicate to touch users that it’s a swipe-able area? Not to mention learning how to implement that functionality 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 difference because what they’re doing is locking out non-standards rather than creating their own proprietary things. Their motivations are of course far from altruistic–Flash is bad for their bottom line on mobile platforms–but it’s still a move that’s good for web standards.
I’m sorry, but I have to disagree on a couple of things…
1) There’s no reason to say goodbye to landscape mode since most touch devices (and not only) have built-in accelerometers that makes it easier to use them in both portrait and landscape mode. Actually, in the Apple’s promotional videos, I saw the iPad being used in landscape mode for browsing the web or reading the email, so if they promote it that way…
2) Also, I have to disagree with you regarding Flash. First of all, Flash works miserable on Macs because they lack support for hardware acceleration… I’m not sure if that’s a hardware or drivers problem, but it’s Apple’s fault either way, since they build their computers and write their own drivers.
Second, Flash/Flex and Silverlight 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 without Flash.
Third, Flash Lite has been available on mobile devices for many, many years. Even more, the Nokia N900 running Maemo 5 has full support for Flash Player 9 and full support for Flash Player 10 has already been announced for Palm’s webOS, Android and other mobile platforms for the begining of this year.
I’m sorry to give it to you, but Apple has closed its devices to Flash just because they want to promote their own plugin — QuickTime — not because they care for web standards.
And something more: Flash Professional, Illustrator and Dreamweaver can work with the HTML5 canvas tag! So, you see? Adobe is not that evil as you might think!
And here’s an interesting article from some guy hired by Adobe to work on some open standards web animation tool.
@Ionuţ No need to be sorry for disagreeing. Having opinions is welcome, I certainly do!
As for your first point, I did say “You might wish to inform me that the screen can just as easily be used in landscape, but my money’s on people using it in portrait more often than not.” It doesn’t matter what the promo videos show, what matters is how people choose to use it, and even that they have the choice. I’m betting on portrait, but it’s just a guess until the device is out in the wild.
As for your thoughts on Flash, you’re welcome to them. I’m aware of all the rebuttals you’ve made, and don’t much care. The main point I’m making is that Flash use is declining and web standards are increasing, which I think is great. I’m not saying that Flash will vanish—this isn’t an all-or-nothing proposition. And of course Adobe will make authoring tools that support canvas (and SVG and CSS animations, I’m sure)—they’ve always made money from authoring tools, not the Flash runtime itself.
This is get us started 🙂 …
iPhone Swipe
Great post. But I think the swipe is not really the revolution of leaping from mouse to touch; the pinch is…
Hear me out. Think about it — one of the more mundane aspects of the web at the moment is that it’s point, click, wait for next page-worth of content to load. What if, when you arrive at a home page and see an item you’re interested in learning more about, you simply pinch and expand — effectively “expanding” that topic out to see more about it (similarly to pinching and opening two fingers to zoom in on a photo — which is essentially the metaphor for wanting to drill deeper into other content, such as a NYT headline or a link embedded in an article or comment). And then you pinch back to move back up the hierarchy, and return to the page you started on.
The content of said link would either have already been loaded when the page is first hit, or is dynamically loaded when the pinch gesture is sensed — I’m not enough of a programmer to understand if or how this is possible; but I would think it would have to be something similar to the way the data for a photo is handled when zoomed in by the same gesture.
@Stephen I wouldn’t say the swipe will lead a revolution, I don’t think the pinch and zoom will either. I’d believe something unimaginable ( right now, to us ) will revolutionize the space.
You example is good, but it’s essentially the same as a click and modal box appearing.
@Stephen, I think you raise a good point (and that’s some good UX brainstorming), but I agree with Dan that pinch/zoom isn’t where the revolution necessarily is. The revolution is in the sum, not the parts. Debating between pinch/zoom and swipe already shows the big thing here: there are now a multitude of ways to interact with content, rather than only a mouse.
There’s pinch, swipe, rotate, and a whole host of multi-touch (and multi-hand) gestures that are only starting to be invented. My imagination runs wild: smashing two objects (each grabbed with a a different hand) together; using two hands to do combo pinch/zooms and pans to pan around Google Earth while controlling the entire 3D viewscape. A mouse only allows you to control one plane at a time.
I think that the key thing here is to note the types of interactions that are being built into the native apps. The iWork apps especially are doing some new things with mult-hand multi-touch. After seeing what types of interaction take hold, we can hopefully begin to use some of them in touch-enabled websites.
This post is featured on 40 iPad tools, tips for designer
6 Trackbacks