Death of the hover state
Written By ryanarrowsmith on Jul. 10, 2007.
24 Comments
Report Note
+ Clip This
I wrote about this on my blog as well, but I was interested to see what the Rulers thought.
With the iPhone hitting 700,000 units sold in the first week and being expected to clear 5 million worldwide in the first year, I noticed something funny.
There's no hover state.
No hovering on links, div elements, etc. There are sites that rely heavily on the hover state in their navigation and design. I'd think these sites would really suffer when being viewed on a mobile phone. And, if the iPhone does hit 5 million in the next 12 months, that will be a huge market share of people browsing via mobile phone.
My question for the designers: does this impact you? Do you think this will change the way designer's use the CSS hover state to animate or highlight?

RightOn
Written Jul. 10, 2007 / Report /
Well my thing would be, is the user base for the iPhone big enough for this to actually be an issue...
I think it would be annoying to iPhone users but if they made up less than 1% of your visitors would it really be an issue?
peroty
Written Jul. 10, 2007 / Report /
It's still a phone. Even with a million or 5 million. It's still a phone and still a tiny share of the overall market.
If it can't rock hover states then I'm not going to lose sleep over it.
I think it's silly that it can't, though in all my nav and link hovering adds something to the experience, it's not vital, so I'm not losing sleep over it.
Ozone42
Written Jul. 10, 2007 / Report /
Using the hover state as something important in navigation is a really bad idea. Sure, I'm all for using it if available for extra emphasis or eye candy, but as something integral to knowing how to get around the site? Really bad idea.
JPhill
Written Jul. 10, 2007 / Report /
I think this will have no affect on the hover state. Maybe so when the majority starts designing for the iphone alone, but this will have no bearing on whether designers should use the hover state on regular sites.
ryanarrowsmith
Written Jul. 10, 2007 / Report /
Playing devil's advocate here...how people use Flock? Shira? Opera? Designer's constantly cater to niche markets. How is this different?
RightOn
Written Jul. 10, 2007 / Report /
I see no problem catering to a niche market... it's just that not ALL websites need to.
I see that if you're catering to the iPhone market that you would need to know all the quirks and design around them...
If you could care less if anyone with an iPhone ever graced your server then don't worry about hovers.
ryanarrowsmith
Written Jul. 10, 2007 / Report /
Worry dammit! I say worry! ;)
RightOn
Written Jul. 10, 2007 / Report /
LOL
thame
Written Jul. 10, 2007 / Report /
Neither does Pocket IE for that matter. Touch devices are inherently incapable of "hovering" so it does kinda make sense.
One option would be for the browser to show a website's :hover effect on :active or :focus (basically a tap on the screen) but that could be weird.
Eleni
Written Jul. 10, 2007 / Report /
It is all according to what market you are trying to capture. If you are trying to capture the mobile market you should make sure you site doesn't use ajax, flash, or java since not all phones support these technologies. You may even want to provide a text only version that can be viewed effectively by all devices.
karmatosed
Written Jul. 10, 2007 / Report /
I agree it's market based and also that you should never use hover states for crucial parts of any 'standard' site. Normal use would be for effect (not function), explanation of links or something along a more graphical / enhancement nature.
elliothere
Written Jul. 11, 2007 / Report /
Like peroty said, it's still a phone. Had Safari 3 come out without :hover, then there would've been cause to worry...But it's a phone, and unless you're designing something specifically meant for mobile users, it's probably not a huge deal.
Might be something to consider if your site is completely unusable without it, though. Otherwise there's always the option of making iPhone-only versions.
ryanarrowsmith
Written Jul. 11, 2007 / Report /
I agree, it is a mobile phone. But it's a mobile phone that's pulling the full XHTML version of your site, not just a mobile version like other smart phones.
Whether you're trying to cater to the mobile market or not, in the future mobile devices are going to become more and more common as primary browsing devices. I'm just wondering, as we look at the game now, if this is going to have an impact over the next few years as other carriers come out with their response to the iPhone.
Rockstarchitect
Written Jul. 11, 2007 / Report /
Come on, you gotta be kidding.
Is this just an excuse to mention the iPhone in a blog for the sake of traffic?
What's next, predicting the death of the mouse and trackpad at the hands of the Wi controller?
feh.
RightOn
Written Jul. 11, 2007 / Report /
I highly doubt it was a "hit grabber" rockstar... It IS a good question.
There very well could be a wave of portable devices that deliver the FULL internet like the iPhone does... only time will tell.
If there is some mass exodus to mobility and they all seem to leave out "hover" states it COULD make an impact. It just happens to be a niche for now.
Rockstarchitect
Written Jul. 11, 2007 / Report /
There already are a wave of portable devices that deliver the FULL internet. They're called laptops.
ryanarrowsmith
Written Jul. 11, 2007 / Report /
@Rockstar: I can assure you that this post hasn't directed any traffic to my site, so simmah down nah. :)
Comparing the laptop to a portable phone is like saying you have a home phone, why have a mobile? They do the same thing right?
The fact of the matter is people, and the industry, are moving towards fully web capable mobile phones. At some point, the design community will have to decide if they factor that into how they deliver content.
RightOn
Written Jul. 11, 2007 / Report /
Do you have even the FOGGIEST idea of what you're talking about rockstar?
A cell phone that delivers the ACTUAL internet the way the iPhone does is a relatively NEW concept. Yes we have laptops but I don't recall being able to cram my iBook into my pocket...
WOW... 0_o
AidanW
Written Jul. 11, 2007 / Report /
It's certainly not going to effect anyone but iPhone users and we never know - they could update this at any time! I'm sure the iPhone browser will be updated from time to time.
Rockstarchitect
Written Jul. 12, 2007 / Report /
You didn't write cell phone, professor. You wrote portable device.
It's not a new concept. It's a new implementation of an old concept that was rarely executed well.
There are shelves full of portable devices that run *nix, WinCE, WinMobile, and proprietary OS' that have offered the "full internet". Many of them did and do fit in your pocket. Many of them had or have telephony included or optional.
Of course, by "full internet" what you apparently mean is the full WEB, which of course is completely different. Furthermore, it's not delivering the "full web" if it's not delivering flash and everything else, now is it.
Safari on iPhone does not support:
* Javascript execution longer than 5 seconds
* Downloaded non-streaming resources larger than 10MB
* window.showModalDialog()
* Mouse-over events
* Hover styles
* Tool tips
* Java applets
* Flash
* Plug-in installation
* Custom x.509 certificates
The S60 Browser, the Opera Browser, and others can compete quite nicely with Safari for iPhone. The S60 even supports AJAX and the Flash Lite plugin for displaying flash on pages.
So yeah, I know exactly what I'm talking about. No fog here.
I'm an Apple shareholder, too.
So feel free to buy as many iPhones as you can get your hands on.
I'll thank you later.
Beyond that, the shift is towards full desktop/mobile parity, not partial or crippled support. You'll get your hover state back. Maybe not on the iPhone, but elsewhere. In fact, the Nokia phones with the S60 browser support it already.
The really interesting question is what the lack of Flash support combined with Googletube's adoption of H.264 will mean in the long run. This is a good read: The iPhone Threat...
ryanarrowsmith
Written Jul. 13, 2007 / Report /
Oh, Rockstar! :) I think you're missing the whole point on this post and focusing way too much on the phone itself. I'm not praising or uplifting the iPhone, I'm looking at the numbers.
You're exactly right -- there are shelves full of mobile devices that do the same thing. The difference is those shelves are still full, while the iPhone is selling out everywhere. I never indicated the iPhone was the first device that brought these issues to light, I'm just saying, with the sheer numbers being sold, this is becoming a more common issue.
I focused this post on the iPhone impacting the design field because of the huge quantity entering the market at once. 700,000 in the first week, estimated 5,000,000 in the first year. Show me another one of the devices you're referencing that have taken off so fully.
But this doesn't only impact the iPhone and iPhone users. Over the next 12 months, we're going to see other carrier's responses to the iPhone. The whole industry will be countering and trying to up the ante. One of those features will be the "full web". And, like the iPhone, I'm sure their first generation products will be crippled by flash, java and ajax incompatibilities. But does that invalidate my point?
As web standards evolved, designer's began coding valid XHTML/CSS, even though, at the time, most browsers didn't fully support what they were doing. They realized the full potential of web standard with the advent of the modern browser. Should we start coding and designing with mobile compatability in mind now, even though it's not a major issue? Or should we wait until a larger percentage of users begin experiencing trouble accessing our content?
In today's environment, mobile devices may be a small market share of the total hits on a webpage, but my point is that that's changing. I used the iPhone to illustrate my point simply because of the rapid influx of new user's it's added, but Apple isn't the only provider changing the game. So, I still pose the question, how does the increased web activity change the design game long term? And the next question: how do you really gauge the percentage of mobile traffic your site is getting? The iPhone hits show under normal Safari hits for my stat tracking. I'm not sure how other mobile hits show.
9rules is a great example. Mike recently noted that he's working on an iPhone version of 9rules. Do you think he's doing it because he has nothing else on his plate? No, I highly doubt that.
And I think it's great you're an Apple share holder. You get a gold star, if that makes you feel better. :)
JMorris
Written Jul. 22, 2007 / Report /
This is a very valid point and it brings to mind a more critical question that does effect the entire market.
Are designers designing for only a handful of browsers, or are they going the extra mile to ensure cross-browser compatibility? Is the content usable to desktop browsers, mobile devices, screen readers, etc... IMHO, this isn't an issue of catering to a niche, it's an issue of usability.
I fully agree that the hover state, and any other pseudo element and dynamic effects (Ajax) should be eye candy. The fundamental functionality of a site should be universal, regardless of browser.
Now, am I guilty of catering to a specific niche? You bet. However, looking at my server logs as of late, I'm seeing more and more mobile browsers like the PSP. This has forced me to think more about usability and directly affects my site development plans for the future.
Thanks for the post Ryan. It's good food for thought. Yummy! :-)
clicknathan
Written Jul. 22, 2007 / Report /
Ummm....there is a hover state, at least on my iPhone. And it's an essential part of the experience.
When you click on a link, the entire link gets a blue highlight. Otherwise you wouldn't be able to tell if your chubby little fingers are hitting "Inbox" or "Starred" in the Gmail menu, etc.
Considering the amount of phones sold already, the wildly popular success of the iPod (though I admit, there's nothing guaranteeing the iPhone will follow that trend, and perhaps even reasons to think it won't) over the past few years, and the likelihood that the US market will finally catch on and we'll be seeing a lot more devices coming from Sprint, Verizon, et al that are similar to this, I think it's pretty safe to say that designing sites that work on iPhone is essential. That said, I have yet to come across a site I visit regularly that doesn't work.
And quite honestly, not having support for Flash is a good thing in my mind. Typically, sites that use Flash are either using it only for visual elements, which while it's a bummer at times, I didn't need to see the old Gizmodo logo load every time...or they're just giant bloated sites that ruin the internet experience, such as eliminating the ability to bookmark certain sections because the Flash designer made it all one big movie clip or something.
And JMorris, you're right, even though it's unreasonable to double a project's hours simply so it looks perfect in Opera, Safari, and all of the other browsers that are very minimal in marketshare (though I think Safari is really picking up these days), a site should at least work in all browsers. Of course, aside from IE, I consider that if a browser isn't standards compliant then you don't need to worry about it. If IE wasn't such a beast due to its automatic use by most people due to their lack of realization that there's an alternative, I wouldn't bother with it either.
arthus
Written Aug. 23, 2007 / Report /
I think you are being ridiculous. The :hover state is a relatively unimportant part of a web browsing experience, and the lack thereof should not inhibit you from using any sites.
Furthermore, I see no possible way for Apple to have put a hover state into the iPhone. Honestly, what would you suggest? Some magical hover state nonsense when you have your finger hovering over the screen: technically infeasible. The very nature of a touch screen means you never hover anywhere: you just click.