Working together for standards The Web Standards Project

Since its release nearly two months ago, the iPhone has proven to be a rather disruptive device, not only in the mobile market, but on the web as well. With designers and developers scrambling to get a foothold in this new market, issues have surfaced and (in many cases) tempers have flared.

A few days ago, Scott Gilbertson declared “[t]he iPhone is Internet Explorer 4 all over again,” alluding to the walled-off nature of many web sites and apps being developed just for the iPhone (as they were back in the day with IE 4). Joe Hewitt was quick to reply, arguing that being like IE 4 is not such a bad thing, claiming that the devices drives innovation on the web, which is what’s needed.

So where does that leave us? Well, I’m not sure I’ve figured that out yet, but I wanted to put together some of my thoughts and see what you think as well.

The Good

The version of Safari packaged with the iPhone is, without a doubt, the best mobile browser I’ve seen to date. It renders normal web pages brilliantly and the pan and zoom functionality offers a pleasant alternative to the re-flow or squeeze-it-in display models of other mobile browsers.

The Bad

Two words: “standards support.” While mobile Safari performs brilliantly when it comes to CSS rendering, it does have a few problems.

1. It does not apply handheld stylesheets – I can understand the use of screen styles when handheld stylesheets aren’t available, but it would be easy to include a switch to turn off screen styles and load handheld styles if a handheld stylesheet is encountered.
2. Event handling – The iPhone introduces some new interaction models, but has not (according to the documentation or under user tests) given us a window into those actions (such as zoom, pan, etc.). Furthermore, as Joe points out, events like mouseover, mousemove, etc. are not supported. Sure, some of the traditional events have no meaning in the iPhone interface paradigm, but the virtual keyboard doesn’t even fire onkey* events and there’s no way to know if the user is scrolling.
3. iUI – I feel kinda bad placing iUI in the “bad” list, but the markup required to make it work leaves a lot to be desired. It is a great interface, but it enforces some pretty awful coding practices. I’m hopeful it will get a little more attention on the standards end and move into the “good” category.

The Ugly

Alright, so the big ugly to me comes down to one thing and one thing only: iPhone only apps/sites.

Since its release, designers and developers have been building interfaces to their sites and applications for the iPhone. Unfortunately, many have been doing so in a way that leaves the remainder of the mobile web with nothing. Personally, I’ve been kind of torn about mobile segmentation as I feel it goes against the “write once, deploy everywhere” ideal of web standards, but I understand the need for stripped-down interfaces on mobile devices (due to the currently high cost of mobile bandwidth in many places, etc.). But now we are witnessing a schism within the mobile world, dividing it into people with the iPhone and everyone else. This, I feel, is bad for the web and particularly bad for the mobile web.

For the record, I don’t buy the argument that web standards stifle creativity; in fact I believe quite the opposite: web standards enable creativity. It is my firm belief that we owe a great deal of the innovation on the web today to web standards (including XHR, which, as you recall is not a standard…yet). It was only when we had a solid foundation upon which to build that our creations could reach such lofty heights.

So what do we do?

While it is arguable that the iPhone is a lot more fun to design and build for than other mobile browsers (even the venerable Opera Mini), that does not mean it’s OK to hang a sign on the door of your web shop reading “No Blackberries.”

Now don’t get me wrong, I am not saying that you should not support (or even cater to) the iPhone. All I am saying is that you should not support the iPhone and snub all other mobile devices. If you want to build a mobile interface to your app, do it like Twitter and others have. Writing a POSH interface is dead easy and, even with the lack of solid CSS support on most devices, it is usable by pretty much anyone on the mobile web. So start there. Then use progressive enhancement to add new layers of interaction to your mobile site/app. It not only makes sense, but it’s The Right Thing To Do™.

Your Replies

#1 On August 22nd, 2007 3:04 pm Yahia replied:

put together some of my thoughts and see what you think as well.

It’s obvious. I have nothing else to say, I completely agree.

#2 On August 22nd, 2007 3:27 pm Robert replied:

While people might lock out non-iPhone users, it isn’t going to be “Internet Explorer all over again.” iPhones don’t come free with every computer. They will always be a niche market inside a niche market (that is, cellphones that are “smart phones” that are “touch screen only”). There won’t be major sites on the Internet that are “iPhone only.” MSN will never block all non-iPhone browsers, for example, like it once blocked non-IE browsers. iPhone sites are and will remain a niche.

The few sites that are iPhone only will never be big, life-altering applications BECAUSE only the iPhone can use them. They damn themselves to never being bigger than the number of iPhone users that can find them.

In other words, the iPhone becoming anywhere near the problem that IE was is very far from a worry in my mind. While it ideologically sucks that people do iPhone only sites, they are only hurting themselves and their chance, if any, at a business model.

#3 On August 22nd, 2007 3:49 pm Michael Long replied:

Unfortunately, your advice is also the least-common-denominator approach, much akin to the time when all of that cool new-fangled CSS stuff appeared… and which no one could use because the majority of the browsers out there only understood tables.

It also ignores the fact that the iPhone is not just a single device but the precursor to a new TYPE of device. And one whose mode of interaction tends to require a different application interface from that of the standard mobile devices currently on the market.

Font sizes, control sizes, link size and spacing, lack of hovers and mouse-overs, all contribute to the difference. A design style that works well on a typical mobile “smart” phone (tightly-space list of links) may fail miserably on the iPhone when the input selection device is a fingertip that can’t differentiate one link from another.

In either case, I think it’s a bit early to be advocating a single design paradigm, especially when most of the people out there are still using the equivalent of IE4/NS4.

More thoughts on design here:

http://www.cfinternals.org/blog/2007/06/is-your-site-de.html

#4 On August 22nd, 2007 4:03 pm WaSP Member agustafson replied:

@Robert: I completely agree.

@Michael Long: You say “Font sizes, control sizes, link size and spacing, lack of hovers and mouse-overs, all contribute to the difference. A design style that works well on a typical mobile “smart” phone (tightly-space list of links) may fail miserably on the iPhone when the input selection device is a fingertip that can’t differentiate one link from another.” My current smart phone is a Treo 650, which has a touch screen. I benefit from large buttons too. I do agree on the font-size thing, but I believe mobile could benefit from larger fonts in general, so I am not against sizing them up; those screens are really hard to read.

#5 On August 22nd, 2007 4:19 pm JMG replied:

> It does not apply handheld stylesheets

The PSP has the same problem. I wonder if all handled devices behave that way…

#6 On August 22nd, 2007 4:33 pm David Storey replied:

I agree with most of this. The current trend of doing iPhone instead of mobile optimisation is short sighted at best. MobileSafari isn’t even the browser with the most user share (that would be Opera Mini). Opera Mini and Mobile would also benefit from a lot of the optimisation that just Safari is getting. It also means developers are taking advantage of Safari only bugs or features (such as using -webkit- CSS without the none prepended version).

It is very disappointing to us that Safari doesn’t support handheld media. MediaQueries can be used, but that can be a bit hackish using the screen media type and it cuts out browsers that support handheld but not MediaQueries, unless both are specified. I really hope they reconsider and add handheld in a later release (they can copy how Mini does it). It would make things much easier.

One thing I’d mention is that Safari isn’t unique in it’s zoom approach. Opera debuted similar technology on the Wii before iPhone was announced (we demoed it at our London event for those that was there) and shipped it in Opera Mini 4 beta before iPhone was released. Safari is a good product, but I don’t think it has anything revolutionary or unique, that other browsers like Opera Mini don’t also have and can’t make use of if they got the same site. The pinch motion instead of normal touch screen is about the only thing.

As things are at the moment, I have to go around trying to convince developers to give Mini/Mobile he same functionality as they are giving iPhone, instead of very basic mobile stripped down versions or nothing at all over the regular site.

I think there is the potential it could be as bad or worse than the IE4 situation. At least IE4 was the market leader and most users could use it, unlike iPhone. The one good point is Safari is much closer at follwoing the standards (-webkit- and lack of handheld withstanding) than IE4 was back then.

#7 On August 22nd, 2007 6:26 pm Mark replied:

My Sidekick II does not render handheld stylesheets either. When sites tout their mobile-friendly UI, that automatically loads when you visit (Google Reader, http://www.mbta.com), I find myself emailing them and asking them to, please, divulge the URL so I can choose to visit it on my phone.

#8 On August 22nd, 2007 10:35 pm minimal design replied:

I don’t necessarily disagree with what you’re saying. Actually I agree with most of it. But I myself wondered about the handheld CSS issue… although you definitely hold an iPhone in your hand, the W3C reads “small screen, monochrome, limited bandwidth” which is pretty far from what an iPhone is… Well, I suppose that’s Apple thinking…

One aspect of the issue you’re not addressing in your article is that a lot of those “iPhone only” websites are actually (hopefully temporary) palliatives for the lack of 3rd party native application support. Some of those apps are only online because that’s the only way they can get on the iPhone right now. I think your argumentation will hold more true once Apple opens the iPhone to 3rd party developers. For now I can understand why someone who wants to write an iPhone app doesn’t bother making it compatible for the rest of the world.

It’s definitely not an ideal situation… that’s for sure.

#9 On August 23rd, 2007 11:11 am John Arthur replied:

> It does not apply handheld stylesheets

The PSP has the same problem. I wonder if all handled devices behave that way…

The Wii doesn’t support “@media tv”. Which strikes me as odd, as I would have figured Opera would have gone the route of “appropriate tech for appropriate situation”. This seems like it’s more “look at how you can browse on your TV just like on your compy!”.

Is there a reason all of these devices deny what they are? The technology is there, and I wouldn’t think it’d be that hard to support (though I wouldn’t know). It means more work for me, but I like playing around, so I’m down with that.

Though I do need to ask, is this a topic worth our time pulling out the pitchforks and torches, or do we just go on to other, bigger, badder problems?

#10 On August 23rd, 2007 12:57 pm Fyrd replied:

@John Arthur

IIRC, while the beta version of the Wii browser didn’t support “@media tv”, the final version actually does.

Found it mentioned on David’s blog.

#11 On August 24th, 2007 9:33 am John Arthur replied:

Crap. *Hangs head in shame.*

Fair enough. Many salutes to Opera. It would be nice to know why they weren’t supported right away, but I certainly hold no grudge on that account (it was a beta). Just curious.

I suppose, moreover, I’m curious as to what kind of effort it would take to support the different media types. From what (little) I know, there aren’t too many unique style tags to each type, with the exception of print. Am I off base, or would it actually be as simple as recognizing “screen” vs. “tv”, and parsing accordingly?

Thanks for the tip. Now I’d best go and work up a Wii version of my site.

#12 On August 24th, 2007 12:57 pm Rainy Day Webrarian » Mobile phone browser wars? replied:

[...] The Web Standards Project, The good, the bad, and the ugly – iPhone edition, Aaron Gustafson http://www.webstandards.org/2007/08/22/the-good-the-bad-and-the-ugly-iphone-edition/ Bookmark to: [...]

#13 On August 25th, 2007 4:47 pm David Storey replied:

John: TV media wasn’t supported right away because of a few reasons. It wasn’t exactly the most public project with-in Opera for obvious reasons, so there wasn’t much hands on time before the first beta launch. All decisions also had to go through Nintendo (handheld was originally supported for single column mode for instance). Once I got more hands on use with the project I could push the developers to add TV stylesheet support. We also saw there was a lot of interest in developing for the Wii so it was a very worth while thing and the right thing to do. I think that without the Wii being so successful, there’d not be much interest in developing tv stylesheets. Now we can leverage the Wii to push TV optimised interfaces, or the 10 foot UI, using web standards.

The engineering effort in adding different media support is extremely trivial (bar print as you mention). It is more of a management/marketing issue. It is more or less just a switch between modes to give the correct stylesheet. For handheld one might want to do some intelligent things to stop bad stylesheets breaking rendering (horizontal scrolling for instance). We added TV media to the Wii about a week after I requested it.

#14 On August 27th, 2007 12:14 pm John Arthur replied:

Thank you, David. Like I said, it wasn’t a big deal, but I appreciate you satiating my curiosity.

It’s also nice to know I wasn’t way off base on the engineering side.

As for the iPhone and the problem it represents, I want to reiterate what minimal design said. The iPhone’s display is fantastically sharp, and far better than any low-end handheld will be for a couple more years. What happens if it starts to recognize handheld styles, and people design their handheld styles to the iPhone’s capabilities. Now you’d have a bunch of sites “properly” styled, but still not optimizing for the majority of the handheld market.

Apple made a video outlining tips & tricks for designing for the iPhone (I don’t have the link on me), and in it they discuss specifying resolution and stylesheets for certain resolutions (via CSS3). This presents a viable option to allow for uber-simplified “handheld” styles, as well as something that could easily be handled by more sophisticated devices, such as the iPhone. Should this perhaps be endorsed over using “handheld” for the iPhone (and its ilk)?

Tear it apart, I want to know the flaws in my thinking. Thanks.

#15 On August 27th, 2007 5:30 pm Support all mobiles? Start implementing standards and I will. | Doctyper replied:

[...] Prelude. [...]

#16 On August 28th, 2007 9:43 am youssef spencer replied:

what do you mean that the iphone isnt good and all that crap do you even have it ?

#17 On August 30th, 2007 4:11 am passivhaus replied:

iPhone is still not availiable in germany! So I have to wait to buy one …
I want to test my applications!
:-(

#18 On August 30th, 2007 9:23 am John Perkins replied:

youssef spencer:
“what do you mean that the iphone isnt good and all that crap do you even have it ?”

It is widely regarded as a splendid idea to read an article before you comment on it, as opposed to after. Which, if you truly believe it says the iPhone isn’t good, you probably haven’t.

Feel free to return with your insightful comments once you have grasped what the article is actually about.

Thank you, and have a nice day.

#19 On September 3rd, 2007 12:11 am Event Horizon of D-Dz.Net » Blog Archive » Embrace replied:

[...] I was in discussion with a friend during the after-soccer-let’s-eat-drink-talk-and-look-at-chics session that I am anticipating more iPhone-like devices to be surging in the market in the next five years or so; which in turn could redefine Internet usage by consumers. I opined that it would be a clever decision to also develop websites to be “mobile-device friendly”. We could start off with the freely available Opera Mini as a testbed for web contents and presentational medium and not tarry too much with iPhone’s Safari yet. [...]

#20 On September 3rd, 2007 6:51 pm Rene Glembotzky replied:

Indeed, Safari is one of the best mobile browsers -not only on iphone- but unfortunately the eventhandling brings it back to a boring standard like all other mobile browsers i’ve tested…

#21 On September 14th, 2007 7:57 am chris replied:

I also bought the IPhone and like the Safari browser.

“While mobile Safari performs brilliantly when it comes to CSS rendering, it does have a few problems.”

That’s the problem – and I don’t know why they didn’t fixed it. By testing the phone you normally see the problem. Maybe a bugfix will be available soon :)

#22 On September 15th, 2007 1:56 pm Sherlock Asimov replied:

all those sites with iPhone portals are not designed using any proprietary technology, but instead are built on top of web standards with some of the elements assigned with unique attribute for supporting Google Maps, contacts info…

the CSS property that starts with -webkit- are just there for time being to provide support of some CSS3 properties. Designer can simply add corresponding CSS3 properties, and everything will work in other browsers that supports those properties. So the design is not locked in.

So how could this be cooked up as IE4 all over again. This is not even remotely close to that kind of history deliberately created by Microsoft.

#23 On September 16th, 2007 5:05 am Web Standards replied:

Any news on accessibility features from OS in the iPhone?

#24 On September 16th, 2007 10:05 pm NBA replied:

Thanks for the tip. Now I’d best go and work up a Wii version of my site.

#25 On October 27th, 2007 2:45 am Paveo replied:

Thanks for this useful post, very lucky, I’ve got a iPhone for testing.

#26 On November 4th, 2007 10:04 pm Dave replied:

I mthink alot of designers should r4alize that there ae more blackberry users than iPhone users but the problem is the blackberry users don’t check out sites to much. I think RIm will be pushing the design of the blackberry even more in the future so by combining iPhone concerns and blackberry issues you have a huge user base.

#27 On November 12th, 2007 8:54 pm Swetlana Maßat replied:

I went down to the iPhone launch today, down on Regent Street in London. Would there be a queue snaking round the block? Would there be thousands of people clamouring to get in? Um, no. Check out the video of the guy in the front of the queue, as of midday today. And for added fun, click over the jump and check out the guy who was at the front of the queue at the New York launch

Return to top

Post a Reply

Comments are closed.