Out with the :hover, in with the Tap
In his latest post, Derek Powazek talks about designing for the iPad and contrasts it to his fifteen years of doing web design and even more years of experience with print design. A key point he touched upon was the hover state, which is something I love as well and think is not utilized as well as it could be on the Web—even now, in 2010.
Fortunately, we quickly grew tired of the incessant stalker objects and ditched them in favor of something a bit more practical. This is where the mouseOver and :hover features come in: they were the natural evolution of little stalker objects, providing us with a (better) means to create an emotional bond between reader and site.
But as far as web design is concerned, that’s also pretty much where it stopped. We enriched our sites with instant feedback loops (AJAX) and made wholly rich applications, but the next best thing past hover, drag and drop, has only seen moderate use and implementations on the web so far. Few sites employ the technique heavily, and even with those it’s a complementary feature, not a main interaction point (though that’s probably for good reasons).
Then suddenly, Apple popularized touch-screen interfaces. Gone is the mouse, gone is the hover, and—most importantly—gone is the abstraction layer between us and the interface. Bigger than drag and drop is the fact that these (multi) touch-screen interfaces give us an even stronger emotional connection because we’re directly controlling the interface. You’re not “scrolling through your music”, you’re touching your music collection. Flick up. Flick down. Tap. Pinch, zoom, drag… never before have digital interfaces been so natural. So what does that mean for the web?
As I alluded to earlier, I feel that hover states aren’t fully utilized on the Web of today. They aren’t just functional, and they aren’t just for show: they allow us to add emotional impact to our designs which represent value that goes above and beyond both form and function. It’s why so many people have said such wonderfully kind things about the Elsewhere tabs on my site—their first experience with them, in a modern browser that is, was one of joy and surprise. The tabs are fun. They delight. The hover states have only marginal functional purpose: to indicate which one you’re hovering over, helping you identify where you’d go next if you clicked the link. Similarly, they have marginal form purpose: they pop some color into an otherwise mostly monochromatic design. But their emotional purpose? That’s where it’s at, and that’s what I designed them for. To add something you’d remember, delivering an emotional connection to my site worth mentioning.
Some would say that such design choices are a poor substitute for good content—and I would actually agree. But they can also be supplemental, and that’s how I intend them to be. My primary goal is still to try and produce great content on my site, but beyond the content, beyond the words that may have as big as an emotional impact on a reader as the tabs, I wanted to offer something simple but delightful. And it is this thing I speak of when I say that hover states are under-utilized on the web. These little touches in the user interface, and the way we interact with them, can add more emotional value than a beautiful visual design.
Going full circle, this leaves just one question unanswered: how does the iPad fit into this? Well, I’m currently working on something where I plan to use click and hover for mouse-based interfaces, but switch to tap (and pull/drag/swipe) interactions for touch-based devices. I hope more web designers will explore these things, adding small bytes of delight (sorry) to their interfaces—regardless of whether the user is on an iPad, smartphone or desktop.
Review: Introducing HTML5
HTML5 is creating more and more a name for itself in our industry, but while it excites those on the cutting edge of web technology, many are left feeling uncertain about it. Its ongoing development has been victim of politics, fragmentation and more, leaving few to have a good grasp of its current status. However, a lot of the technologies that make up HTML5 (and more) have become mature, even implemented across all the latest browsers—but did you know that? If you’ve kept an arms length to everything going on with HTML5, now is the time to dive into its waters and explore.
Fortunately, you don’t have to do it all by yourself: just get Introducing HTML5, written by Bruce Lawson (Opera) and Remy Sharp (Left Logic).
Exactly as its name implies, Introducing HTML5 is an introduction to all the new semantics and application-oriented technologies that make up the HTML5 spec. You don’t have to be a web development expert to read this, but you’ll come out closer to one when you’ve finished. All you need is a good grasp of web standards-based techniques, e.g. semantic markup; separation of structure, presentation and behavior; and accessibility. Bruce and Remy will teach you everything you need to know to bring your skill set to the next level.
Starting out light, Introducing HTML5 first teaches you the most important new HTML5 elements and their semantic purposes, which is especially helpful if, like me, you kept an eye on these since the early stages of HTML5, but got confused as their meanings were changed or redefined.
Throughout the book, Bruce and Remy do a great job at not just introducing the new technologies, but informing you exactly of what does and doesn’t work in which browsers. Even the latest releases of browsers have some glaring bugs here and there, but where fixes are available, they are presented, and where not, workarounds explained. As a result, Introducing HTML5 is a tremendously practical book, going well beyond a surface-level introduction and straight-up teaching you how to wield these new technologies today.
One thing I am personally very happy about is how the book teaches you how to implement things in an accessible way (via ARIA or otherwise), making sure that visitors to your sites aren’t left out. HTML5 is exciting, but our excitement shouldn’t come at the cost of accessibility—and following Bruce and Remy’s advice, it won’t.
The compact but dense information in Introducing HTML5 means that in just an afternoon or two, you’ll find yourself brimming with new knowledge, excitement and ideas for making your websites or web applications richer, more exciting and more powerful. All in all, a highly recommended read.
And if you don’t mind kickbacks, buy it now on Amazon US or Amazon UK.
Apple’s Totally-But-Not-Really Botched Press Conference
Last Friday, Apple gracefully told the gathered press to go suck it. A quick recap of what happened in the month since the iPhone 4 went on sale:
First, the online media started going on the fritz, mindlessly propagating stories about the iPhone 4 having some supposed “major defect” in its hardware design which, unlike any phone before it, featured the antennas as part of the bezel, and the very frame of the phone itself. One aspect of this design involved a small strip which, when bridged with a finger or palm, would attenuate the received signal so visibly it was dubbed the “death grip.” Whilst I could re-enact a visible (but marginal) signal loss on my iPhone 4 when gripping it that way, my overall experience with the phone’s signal quality was better than I was used to with my iPhone 3GS.
Apple, for their part, didn’t do a great job in responding to the initial bit of backlash, with a reported e-mail from Steve Jobs to a customer saying “just don’t hold it that way.” This and a few other things did not please the already-frustrated customers that were affected, which, it should be noted, was not an insignificant number, but nothing even remotely near the press-suggested “majority of customers.” I myself had no issues, but I was nonetheless disappointed in how Apple were treating the problem.
Then the Consumer Reports review of the iPhone 4 came out, putting it smack dab at the top of their list of smartphones, but saying they couldn’t recommend it ”due to the antenna issue.” At that point, Apple announced a press conference, to be held at the end of last week. Finally something of an acknowledgement of the problem being real. With baited breath the press waited and listened, only to have Jobs tell them they should have done their jobs better. “All smartphones have this problem,” he hammered down their throats. “Again, if you look at hard data, only a tiny percentage of customers is reporting the problem,” he reiterated.
If you ask me, Jobs was as much frustrated with the poor quality of reporting on this issue for the full four weeks since launch, as he was with the antenna problem itself. His remarks at the D8 Conference about how “we need editorial oversight now more than ever” also spring to mind.
And it’s hard to blame him, when even Dan “Fake Steve” Lyons writes a patently incorrect observation:
Part 1: There is no problem. Part 2: Even though there is no problem, we’re going to give everyone a free case, which should insulate the antenna and prevent the interference that we just told you isn’t actually occurring. But if you’re still not happy, you can give back the phone for a full refund. Jobs’s snotty tone made it clear that he was pretty fed up with all the whining about a problem that he says doesn’t exist.
Hey Dan, how about you watch the whole press conference, but this time pay attention? Nowhere in the 28 minutes does Jobs claim the problem “doesn’t exist,” he only points out (at aggravatingly great length) that the problem isn’t unique to the iPhone 4.
Judging the responses on Twitter from people actually suffering from problems with their iPhone 4—and even those who don’t—the impression I get is that customers are pleased with the offer of a free case of their choosing, and a full refund if that still does not fix the problem in a satisfactory way. Who aren’t happy with Apple right now?
Because they got scolded. They got put down by Jobs like a bunch of middle schoolers that got too unruly whilst the teacher was away for a moment. They were schooled by Jobs, and they took it personal. Understandable, because hardly all of them jumped the “death grip” bandwagon without doing proper reporting, but it’s hard to express much sympathy for me—I don’t recall any of them interjecting a voice of reason or sense anywhere. The one I have seen is from the day of Apple’s press conference, a piece by Eric Zeman on Samsung’s announcement of the Galaxy S Android phone.
Leave it up to a tech blog to get some feedback regarding proper real-world usage. The outcome? It’s much better when the signal is decent or greater, and troubling when the signal is anything below decent. Furthermore, the (free) case will fix the antenna attenuation issue entirely, leaving only the proximity sensor problem that needs urgent fixing.
So anyway, what was so botched about Apple’s press conference? I have no idea, to be honest. It struck me as very standard-fare Apple practices on every level: Step 1: deflate the severity of the issue that the press is hyping up to be much bigger than it is. Step 2: offer customers a solution that should please all but the nastiest of naysayers. Step 3: produce marketing pages to further showcase Apple’s dedication to the product(s) in question.
Not so, says Shel Holtz, who argues that Apple did everything wrong about this crisis management:
- Treat perceptions as fact—Jobs insists there’s really no problem
- Acknowledge mistakes—Jobs insists Apple has made no mistake
- Tailor messages to address the aggrieved or angry party—The message to the aggrieved parties: “There’s really nothing wrong with your phones that isn’t wrong with all phones”
- Note the other side’s concerns; don’t be dismissive—“Dismissive” characterizes Jobs’ remarks
- Make no public confrontations—Jobs took on every other cell phone manufacturer
Well, aside of being wrong on his first two claims (Jobs insisted neither of those things), Holtz clearly wants Apple to play by a set of rules that Apple didn’t come up with on their own. And that was his fundamental mistake: his attempt at compartmentalizing Apple as just a company like so many others.
For more than a decade now, companies making products similar to Apple’s have tried to compete, and for just as long they have failed to really do so. These competitors have all bitten the dust left by Apple’s wake, trying to mimic Apple’s approach while at the same time playing things by the book. Here’s a clue to them: don’t do that. Apple plays by its own book, and if you wish to compete, you need to invent your own book as well. Google is somewhat starting to get that, but so far their book contains few recipes for taste.
Throughout that past decade, journalists and bloggers have complained that Apple doesn’t do this right or that right, or that they should’ve done this instead, or that, or whatever. Meanwhile, none of them have accomplished what Apple has accomplished under Jobs: revived themselves from near-bankruptcy, returned to profitability, entered and subsequently dominated established markets, and even create entirely new markets—and all the while making ever-increasing profits.
Now, don’t misunderstand me: there are plenty of things to criticize Apple for, but claiming they’re doing things wrong is laughable at best. For three years in a row, Apple is the most admired company in the world. Its core products usually top the customer satisfaction ratings in their respective categories, often with a big lead over the #2 product. It’s gone from being “beleaguered” to being the #2 company in the United States in terms of market capitalization. They’ve made mistakes along the way, true enough, but if you think they rush a product to market without a solid strategy you’re only putting ignorance on display.
Here’s the thing: what would happen if Apple admitted to a “mistake”? The press would make an even bigger hoopla out of it, and no doubt a costly legal suit would follow—resulting in the exact same outcome Apple have already given us: free bumpers or a full refund for your phone if the bumper is not enough. There is no way in hell that a full product recall would happen, simply because there is no hugely-widespread issue. A recall would be extremely costly, deprive people of the phone that by far most of them love and use each day, and the only people satisfied by it would be the press that gets to smugly write on their blogs “I told you so.” And I cannot stress this next point enough, so I'm writing it in bold on a separate line:
Customers’ needs would not be served by Apple admitting to a mistake.
Some people, including Holtz, claim that Apple does not really love its customers, but they’re asking Apple to do something that wouldn’t actually benefit those customers. They’re asking Apple to do something only so that they themselves can feel a sense of superiority for a change, rather than acknowledging that Apple is frustratingly often right about things.
By not admitting to a mistake, Apple has: kept a huge expense at bay; kept themselves able to solve their customers’ problems at minimal cost; and upheld the idea (in consumer mindshare, at least) that iPhone 4 is the best smartphone on the market today.
So please, how did they handle this crisis poorly again?
I suspect the crisis will fizzle out over the course of the next few weeks, once people start getting their free bumpers or refunds. Not everyone will be satisfied with this “fix”, but provided Apple in the meantime fixes the proximity sensor issue, reports of continued dropped calls will dwindle and the media (Gizmodo excluded) will move on to more interesting stories. I guess time will tell if I’m right on this or not.
The other angry crowd
I want to return to an earlier point briefly, as there is another group of people that hasn’t been happy with the outcome of Apple’s press conference: competing smartphone manufacturers.
Most notable are RIM—Research In Motion, makers of the Blackberry—and Nokia, who both issued press releases responding to Apple’s event. RIM’s co-CEOs seemed particularly vexed, pulling as many punches as possible without appearing petulant or juvenile. Let’s take a look at why they are so angry, and by that I don’t mean a look at the press conference and what Apple had to say about the Blackberry. No, let’s look at why they really are angry.
It all started back in 2007. Up ‘till early 2007, RIM had focused their efforts on business customers so heavily that until the iPhone introduced the concept of smartphones to the masses at large, many average consumers didn’t even know they existed. RIM was all too grateful when Apple introduced the iPhone in 2007, opening up RIM’s potential market to general consumers and not just business/power users. It worked, too, because RIM sold a hell of a lot more Blackberry devices shortly following the iPhone’s announcement than they did before that. People craved the power of mobile computing, Apple showed them it was possible, and even competing phones benefitted from that.
Fast-forward four years, it’s actually only the second time Jobs speaks ill of RIM’s products yet this time they’re furious. What has changed in those four years? Apple taking over, is what.
Sure enough, RIM still has a larger market share (at least) in the U.S., but mind– and media–share is now almost entirely reserved for Apple’s iPhone and Google’s Android platform, with the latter having far less mindshare outside of the U.S. than it enjoys inside it. RIM, for their part, have been relegated back to the place from whence they came: business customers. Except unlike pre-2007 days, there are now consumer phones heavily encroaching on this territory, threatening RIM’s core business.
How RIM reacted to Jobs’ accusations isn’t surprising: their attempts at breaking into the more consumer-friendly touchscreen market on their own have all largely been abysmal: their two touchscreen phones, the Storm and the Storm2, have failed to impress. No doubt this has frustrated them. The fact that Apple makes more money with iPhone than the entire rest of the smartphone industry combined makes with all their phones is just plain humiliating, and not just to RIM.
Nokia is similarly outplayed in the handset industry, and whilst they and RIM have decades more experience designing phones and antennas, they are failing to build products people want to buy nearly as much as they want an iPhone. Apple, to their credit, is innovating and taking some risks with it—like the external frame-based antenna on the iPhone 4. The risk seems to be a perfectly calculated risk about signal issues, taken in favor of all the many benefits this new hardware design offered. And I think it’s a risk that will pay off for Apple in the long run.
Imagine for a second that Apple figures out a way to resolve the signal attenuation problem for the next hardware release which, presumably, looks virtually or completely identical to the iPhone 4 of today. Imagine that they do this in the next year or less. Where will that leave RIM and Nokia and all the others? With already-inferior phones that people just aren’t quite excited by, with no innovation track record to show for past 2007, and their one remaining argument against the iPhone dissipated (with the AT&T-argument remaining for U.S. consumers).
Nokia and RIM can act high and mighty all they want about antenna design, but they’re sitting pretty still while Apple pushes mobile technology forward. What I wonder is, how long before their shareholders stop accepting that?
Will It Blend: PhotoCSShop?
John Nack sort-of raises the question that's been going through people's minds more and more of late: is CSS the new Photoshop? It sounds like a ludicrous idea but becomes less so the more we see things like an iPhone in CSS3, iOS icons in CSS3, or even a flash light.
What these impressive lab experiments prove, however, is that CSS3 reduces the need to have just about one element for every pixel in a designed bitmap graphic when doing them in CSS, and can quite effectively accomplish a lot of graphical feats. That's great, and we should definitely leverage that power. But Photoshop, it does not make.
These experiments do nothing to indicate that CSS3 has made it easier for us to build nice, graphical-looking interfaces for the Web, but between HTML5 and CSS3, we actually have hit that point in time where it is possible to design a lot of great stuff right inside the browser. As such, the question turns to tools, which brings us back to John Nack's post.
John suggests that Adobe "freak out a little, but in a constructive way" and I think, on that front, he's spot on. His post then serves as a call for comments, ideas and suggestions on what he/Adobe can do to extend Photoshop with functionality that would steer it towards becoming "Photoshop in the browser", e.g. allowing web designers to use Photoshop and get immediate HTML and CSS output as a result.
Personally, I'm not a fan of that idea. From Adobe's point of view, they'll have to go down this rabbit hole sooner or later so I don't blame John for suggesting this, and in fact I highly commend him for openly discussing with the community what their thoughts on this are. Great idea. But the last thing I want is Photoshop CS6 having even more features, rendering its initial load time to unbearable levels on my Macs. Nor do I think it wise for its codebase to be extended any further until they can make it crash a bit less often.
An acceptable—to me—option would be if Photoshop went two separate ways: Photoshop, the main edition (for photo editing), and Photoshop for Web Designers, which, let's face it, needs a better name. "But Faruk, that's Fireworks!" I hear you say. Except it's not, because a huge number of web designers (myself included) still prefer designing sites and pixels in Photoshop rather than Fireworks. No, this product would be a harmonious blend of Photoshop, Fireworks, Illustrator and Dreamweaver, designed for the sole purpose of catering to the web designer who knows his/her HTML and CSS.
As nice as that may sound, it produces several new dilemmas for Adobe, not least of which an even greater compounding of their total product lineup. Then there's their corporate desire to integrate everything with everything else (or at least Bridge), the "group" placement of this product (should it go in Design Premium or Web Premium?), and so forth. All surmountable, I'm sure, but the question is: how well?
Already, Adobe's products don't have a great reputation. They may still be the best tools of their kind for the work many of us do, but aside of Lightroom I can't think of a single Adobe app that doesn't get hated on when I see people talk about them on Twitter. The complaints are sound, too: the apps have terribly inconsistent UI, they crash a lot, they're bloated and expensive, their features-to-usefulness ratio is probably on the wrong end of the 80/20 rule, and they've ignored for years now the multitudes of requests to forego tacking on additional features and refining & stabilizing the products instead.
Compare these kinds of issues to the average software product that Apple makes. It's a world of difference! But unless it becomes absolutely necessary, I don't see Apple getting into the image editing / design application market. A shame, because if there's anything Apple have done well for our industry, it is instilling a strong understanding of the value of simplicity and quality in products over feature-sets. They are by far not the only ones who inspire with that, I should note, but they also are by far the most prominent and successful ones. And even Apple sometimes messes up on the small details—or even the big ones—so we have to cut Adobe some slack here, too.
The reason I'm personally not interested much in what Adobe ends up pursuing here—if anything—is that Adobe's stronghold on the creative design tools market is of no benefit to anyone but Adobe. Their customers don't benefit at all, they just keep paying higher and higher prices for faster and faster crashes. Competitors obviously don't benefit, though they're at least making some strides towards becoming viable alternatives. End users obviously don't benefit. Adobe truly is the only one who does.
What excites me about the idea of designing in the browser, something I've discussed with Andy Clarke for years now, is that it gives us the opportunity for a fresh start. No more thinking in terms of "how Photoshop does it." A clean slate. A blank canvas. On it, we can design a new type of interface, one that isn't just designed to build websites with, but one that is a website (or web app) itself. That's the kind of idea that gets me excited about designing in the browser, about directly manipulating CSS instead of Layer Styles, about having a (nearly)-finished HTML & CSS structure ready for me as soon as I'm done designing.
Suffice to say, no such tools exist just yet, and from what I've seen so far, nothing even remotely like it is being built, either. It was (part of) my startup idea that I've had this past year to build, but unless I come across a talented development team interested in joining efforts on this, it'll have to wait. Perhaps someone else will build such an app in the meantime, but even if so, I'll be very curious to see if it delivers on the vision I have for a future where we don't have to leave the browser in order to design a pretty darn great website.
Until then, you'll find me behind my Mac, cursing at Photoshop when it crashes but pushing my pixels with it nonetheless. It's come a long way since I first started using it in 1998, you know. It's also the only real option, still.