A Single Article
Read it, comment, and share it with your friendsThe sad, sad state of the mobile web
In the early days of the web, there was a fierce browser war between Microsoft and Netscape which was a direct result of each browser maker choosing to implement proprietary technology in their respective browser. Many websites worked for either one browser or the other, almost never both. People fought for years to convince these companies to support open standards in their browsers, so that proprietary technology would no longer be a hindrance in the development of the web and people would be able to access any website, regardless of which browser they chose to use. It was a long fight that took many years and saw a lot of turmoil in the web world, and to be honest, it still isn’t quite over.
I was very fortunate to get involved with the web after most of this battle was already over, but it sickens me that many people involved with the web still haven’t learned their lesson. I know they haven’t learned because they are recreating many of the problems from the 90’s with what is now the mobile web. Let me give you one example which arrived in my inbox yesterday:
(mt) Media Temple is proud to introduce the world’s first iPhone web hosting control panel. — Buy a domain, reboot your server, add emails, pay your bill, get support and more - all from your iPhone, only at (mt).
This might seem cool at first, but let’s think about what this is saying here… a web company has developed a website that is intended for 1 browser (Safari mobile) on 1 hardware device (iPhone). If you really think about it, this is worse than the IE4 vs. NN4 days of last decade… then it was a matter of being software-dependent. Now we have websites that are both software- and hardware-dependent.
Does anyone see where this is going? There are hundreds, if not thousands, of internet-enabled mobile devices on the market right now, and that includes PDAs and hand-held consoles like the Nintendo DS and Sony PSP. They all have different combinations of screen sizes and browsers, and it would be ludicrous to think that any company would be capable of designing a separate portal to their website for each and every device. Plus, it isn’t even necessary to do so. The good folks at the W3C had the foresight to offer device-profiles for CSS, so that any developer can write one CSS file that caters their site to all hand-held devices. If you’ve never heard of such a thing, my previous article on hand-held CSS might enlighten you.
Now here’s the thing… there is a great mobile browser available from Opera that supports hand-held CSS as well as other web technologies very well. It’s called Opera Mini and it’s available for any mobile phone… well, excluding the iPhone. While Opera Mini supports handheld CSS, Safari mobile does not. For some reason, the minds at Apple decided that supporting hand-held CSS would “hurt” the web experience for iPhone users.
If using One Web principles, the issues comes (sic) with trying to optimise the CSS for mobile. The W3C spec has a solution for this; the handheld media type. The principle being that computers use Screen media, when printing Print is used, Handheld for mobile phones, PDA and small handheld media devices/tablets and so on. This sounds rosy, except Apple and Nokia in their wisdom have decided not to support Handheld. That may be fine if they didn’t want authors to optimise the layout for iPhone/S60 Phones, but Apple clearly do in their developer documentation (click on Optimise for Page Readability and scroll down). They state that ‘iPhone ignores the print and handheld media queries because these types do not supply high-end content.’ Where they get this idea from I’ve no idea. It is obvious they don’t need to support print (Opera Mobile and Mini don’t either) because you are not likely to hook your mobile up to a printer and print the document, but print media has nothing to do with high or low end content. It is the same for Handheld, and it should be used for doing exactly what the (sic) suggest; specifying a stylesheet for mobiles. — David Storey, iPhone and developing for mobile
What Apple proposes to iPhone “developers” is that they make a CSS file specifically for the iPhone and serve it with a media query that looks something like this:
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
What does this look like to you? I could replace this with:
<link media="only screen and (min-device-width: 1024px)" href="IE4.css" type="text/css" rel="stylesheet" />
And this is why I sincerely believe that the same problems of the browser wars from last decade are being re-lived all over again on the mobile web.
Disclaimer: I don’t want anyone to think that I wrote this article because I dislike Apple; this was prompted only because Media Temple came up with an iPhone specific application, which many other companies and developers have already done. This is more of a rant against device-specific websites in general, and I wrote this to encourage you, the reader, to put pressure on companies like Apple (and Nokia) to support a device-agnostic mobile web.
Disclaimer 2 (added 3:43 PM EST): I understand that sometimes it is necessary to build webpages that are specifically intended for multiple devices; I am not arguing against that. I just have a problem with webpages being designed specifically for one device.
Update 8-12-07: This is a screenshot of the (mt) iPhone control panel on the Opera Mini simulator:
This is what any mobile device that is not an iPhone would see. Kind of like the days when sites would kick out users on a browser other than IE!
Get a Trackback link
3 Trackbacks/Pingbacks
Other blogs referencing this article30 Comments
Responses to my articleEric Meyer noticed something similar recently, with a this site is for iPhone users only message. I think it is ridiculous to aim at one browser only too, but those media queries look quite useful! With any luck, the Safari browser provided with the iPhone shouldn’t need a separate stylesheet anyway.
Thanks for that link Phil, it’s great.
This isn’t a web site developed for one device. This is an alternative version of an existing web site that is accessible to many devices.
Question: What are you unable to do at Media Temple from your desktop computer that you can do on the iPhone? I’ve never used MT, so I can’t say for sure, but my impression is that this answer is nothing. So if all the same functionality is available on all devices, what is your complaint, exactly?
Why do these discussions always come down to the technicalities of CSS support, browser behaviour and “One Web”?
In theory, the “mobile web” and “web” are pretty much the same. If they’re not quite in practice, they will be soon. Technology has a knack of evolving to make these sort of arguments redundant.
But, there’s still a perfectly good reason why you would build a different site for a mobile device vs a PC…
…USER WANT TO DO DIFFERENT THINGS WHEN THEY ARE MOBILE!
(They’re in a totally different context, and form follows function)
One day we’ll stop talking about bloody media queries and start designing services for the mobile context that people are actually excited about.
Jeff: There’s no “mobile control panel” that is accessible to any other cellphone or mobile device, because the width of this site is 480px, and the average cell phone has a width of 160px, which the average PDA is somewhere around 280px. A real accessible mobile site is fluid so it can scale to the wide range of mobile screens out there, but (mt) has NO such thing.
James: I’m not quite clear on where you are coming from. Do you agree with iPhone-specific mobile sites, or would you like mobile sites to support all mobile devices?
Christian: Isn’t the regular control panel built with web standards, and therefore would work on most mobile devices?
I personally definitely agree with James that mobile context is very important. At the same time, iPhone context can be different than Moto RAZR context. As long as all you content is available to all devices, I see no thing wrong with creating custom versions of your site that enhance the experience for specific, popular devices.
I am under the impression that MT’s regular control panel is built with web standards, and therefore should be accessible on most any device. If that’s incorrect, then I apologize. Like I said, I’m not an MT user. But if that is correct, then I personally have no objection to what MT is doing.
It’s a fact of life that you have to write a different site for today’s typical mobile browser. Simply because most of them have limitations that mean average web sites are likely to look poor.
No doubt those limitations will clear.
But that doesn’t mean that the need for a mobile-focussed site suddenly disappears. Because mobile users (even those of iPhones) do generally want to do different things.
Been to united.com on your iPhone? Works perfectly doesn’t it? But were you really looking to read about their new flat bed or credit card promotion?
No. Probably not. You were mobile. So chances are you were looking for ticket availability and departing flight status. http://united.mobi (for example) would have cut you to the chase.
That’s why you need different sites. Not because of what the browser is doing, but because of what the user is doing.
Again, fact of life: experienced mobile web developer build sites that are endlessly tuned to the quirks and behaviours of hundreds of handsets. Another one is just another one.
Jeff: Please see the screenshot I just posted. I hope that clears things up.
James: Sooner or later, mobile developers are going to get sick and tired of designing different websites for mobile devices and start wishing for some sort of standards to be agreed upon by mobile device manufacturers and browser makers, just like the screen developers did 10 years ago.
Remember, right now it’s one device that goes against the norm of mobile standards and requires special attention, but as long as developers support it, it’s only a matter of time before other devices start coming along that present the same problems. History repeats itself.
I bet Opera Mini could render the page just as well as the iPhone’s Safari, if it were allowed to, and is probably more widely used. What were Media Temple thinking?
Unless of course, as Jeff says, if the main control panel is standards compliant, then anyone should be able to use it, regardless of browser or platform. In that respect it makes me wonder why they decided that iPhone users do need a separate site.
My final thought on this is whether it is just a piece of advertising fluff. Who actually wants or needs to tend to their (mt) account on the move? Isn’t it easier to do all of that stuff on a computer, not on a mobile, be it the iPhone or any other? Context is important too, and in this case I am wondering who will be the first person to decide on buying a new domain name whilst out somewhere and fire up the iPhone for instant gratification?
They decided to do it, I’m sure, for mindshare. It brought them a lot of attention, which in turn brings them customers. This helps them appear to be on the bleeding edge, and people like that.
Sometimes I think standardistas forget that there are business decisions to be made in real companies. Not everything is always done exclusively for the betterment of the web — and that’s okay.
Phil, Jeff, you are both wrong. They decided to do it because it’s totally necessary. If your server has problems and you need to restart it, and you just so happen to be away from your computer, (mt) mobile control panel allows you to do it from your phone. Well, your iPhone. If you have some other phone, you can wait a couple more months until they come up with a version that is standards-compliant (or at least accessible to mobile devices).
Christian, you still haven’t answered my initial inquiry: is the regular control panel built with standards and accessible to (non-iPhone) mobile devices?
Jeff: Answer: totally no.
See the update I posted on the original article.It’s completely unusable in Opera Mini.Thanks, Christian. I was actually wondering about the regular control panel, not the mobile/iPhone version. Can you get the the non-mobile version with Opera Mini?
Jeff: that’s what I was talking about. The non-mobile CP is a total mess in Opera Mini.
Oh, okay. The screenshot in the update is of the iPhone one, so I guess I was confused. Certainly (mt)’s control panel should be accessible on mobile devices of all types. Simply building it with web standards would achieve that.
From the message they’ve posted, it sounds like they’re well on their way to that goal. I think it’s a bit unfair to pick on a company that says, “we know there’s a problem here, we’re working on it, stay tuned,” when there are a bazillion companies out there not even trying. (mt) is forging new ground by trying to make a mobile control panel. They did it for the iPhone first, and say other device support is coming soon. They’ve only got so many resources and so much time. I think we should cut them a little slack. What other hosting company is even trying to address the mobile context?
Standardistas should turn their focus away from the companies that are 80% of the way there and towards the ones that haven’t even started.
Jeff: I still don’t think you are reading this article carefully. As I already stated, the target here is not (mt). It’s Apple. I know that doesn’t jive with all the Apple fanboys out there, but what Apple did with Safari Mobile is a step back for web standards in the mobile world. Not a step forward, not a step in a different direction, but a real step back. To repeat myself:
“I wrote this to encourage you, the reader, to put pressure on companies like Apple (and Nokia) to support a device-agnostic mobile web.”
Not a device-agnostic web, not websites that support both screens and mobiles devices, but a device-agnostic mobile web.
You’re right. If your target was Apple, and not (mt), I definitely read it wrong. You said it was a “rant against device-specific websites”, and your example of a device-specific website was (mt)’s control panel. If, instead, it’s a rant against desktop-style browsers on mobile devices, that wasn’t clear to me.
But now that it is clear, I’m still confused. How does Safari promote a device-dependent mobile web? WebKit is open source — any phone maker in the world is able to use it. Nokia does. There’s nothing remotely proprietary about it. And, it supports web standards as well as any browser (desktop or mobile) on the market today. How can this possibly be a bad thing? The last time an open source, standards-supporting browser came onto the market (Firefox), web standards advocates everywhere jumped for joy. Now, they don’t? I don’t get it.
I guess your concern is that Safari on the iPhone doesn’t respect handheld stylesheets? As an iPhone user, I’m glad it doesn’t. Apple’s right — it would hurt the user experience. Handheld stylesheets are mostly a joke — and here’s why:
What constitutes “handheld?” I hold my mobile phone in my hands. I hold my PSP in my hands. I hold my iPhone in my hands. I hold my MacBook in my hands. And yet, every one of these devices have very different capabilities and contexts with regards to browsing the web. Which ones qualify as “handheld,” and which ones don’t? And why?
Media-specific stylesheets remove choice from the user. Why should it be up the site developer to decide for me whether or not I get the mobile version of the desktop version? I think that should be my choice. Only I can adequately assess my context and make an informed decision.
The idea of handheld stylesheets assume that the only things that should change when moving between the mobile context and the desktop context are presentational in nature. This couldn’t be farther from the truth. In order for a mobile site to be truly useful, it must consider the mobile context and re-evaluate everything from the content displayed to the hierarchy of content, to the way content is written, to the structure of the markup, to pagination rules, to…you get the idea. It’s an entirely different site, and a simple stylesheet switch simply can’t do it justice.
The final reason that handheld stylesheets are mostly a joke is that many devices simply don’t support them well, if at all.
The proper solution, in my mind, is to create two or more sites, each aimed at a specific user context, and put each site at different URLs, with reciprocal links from each one to the other(s), allowing the user to make an informed decision of their own, rather than forcing one site or the other upon them.
I’m sorry I misunderstood your original piece, Christian. This is a good discussion, and an important one. Web standards are important, but so is innovation. We cannot punish companies for pushing forward and innovating, especially when the W3C moves so damned slow.
My problem is two-fold. First, let me mention you are criticizing the concept for the implementation. Handheld stylesheets are a joke because a lot of poor ones have been written by developers who figured, “let’s just make something that works and get it over with.” That’s like saying that screen stylesheets are crap because there are no good ones out there… and people could have said that ten years ago.
Also, a lack of support for handheld stylesheets does not make them bad. That’s the “pave the cowpaths” argument and if you feel that way you should read this piece: Pave the Cowpaths.
Now, for my problem: First, Safari mobile does not support handheld stylesheets AT ALL. If you wrote a handheld stylesheet aimed at delivering high-quality content to browsers like Opera Mini and Safari Mobile, Safari will ignore that and insist on using the screen-stylesheet, which is probably not a good experience for the iPhone.
Second, media queries provide no more choice for the user than what you mentioned with media stylesheets. It would be nice if the Safari mobile prompted a user with “there is no iPhone specific stylesheet available, you can choose between the handheld or the screen stylesheet,” but it does not. It does not support handheld at all, which means that the user has 0 choice. Firefox, on the other hand, does allow users to choose. There’s the difference, and that’s why I definitely did not jump for joy.
By the way, I’m going to venture a guess that handheld means you can hold it with one hand. Otherwise it would be handsheld. Obviously it’s a poor name, but we can’t waste time scrutinizing names. It’s for small devices. I guess an important question is, is 480px small? 1024px seems the standard nowadays for screens, so I’m going to say yes.
Now, you mentioned a solution: make one site for screen, and another site for handheld. I want to make it clear that it is one solution and not the only solution. It is the right solution for some sites, Google maps probably being a good example. It’s a horrible solution for text-focused sites like blogs, of which there are far many more than anything else. For a blog like mine here, and for my app at feedmeplz.com, media-specific stylesheets are a perfect solution, whether it be screen, handheld, or print. It’s a lot less work, usually cheaper (no need to purchase a .mobi domain), and it doesn’t require duplicating content.
That’s true, but the concept apart from the implementation is fantasy land. The concept may be fine, but if the implementation sucks, it’s sort of useless.
Again, it doesn’t make the idea bad, but it makes them less than practical to use in the real world.
That’s debatable, because it’s personal preference. As an iPhone user, I can confidently say that on most sites I’d prefer to get the screen stylesheets and not the handheld ones. But, that’s just me, and the next person may feel differently. More reason that the user should be given a choice.
No, they don’t. And I don’t like media queries, either. I never defended them.
I don’t think I’d care for that. Since 99% of websites won’t have either an iPhone or handheld stylesheet, I don’t really really want to be promoted about this on every site I visit. But, something along those lines might work, if it were a bit smarter than that. Either way, there’s no standard for this sort of thing, so you can’t really blame Apple for not doing it the way you personally would like. It’s not as if they eschewed some standard — they simply made a decision where there are no rules, and you happen to disagree with it.
Does it? I thought you could only choose style by media type with the web developer toolbar. I could be wrong, though — I don’t use Firefox.
Seems like a reasonable guess. That would eliminate the PSP and Nintendo DS, since they are two-handed devices. Interesting.
Measuring “size” in terms of pixels would be a mistake. The iPhone’s display is largely resolution-independent.
Why? I worked at a newspaper before my current job. Few things are more text-focused than that. But, when we surveyed mobile users, we found they wanted very different things than our desktop users. For example, our desktop users wanted full stories and large photo galleries. Our mobile users wanted brief headlines and sports scores. We definitely couldn’t give them what they wanted just by using media stylesheets.
I never said anything about duplicating content! Certainly your mobile and desktop sites should be served out of the same database, so that there is One True Sourceâ„¢ for all of your content. Anything less would be uncivilized.
Choosing not to support them at all, however, is a very heavy-handed solution, and what I consider an example of a big company ignoring standards altogether. I’m not saying one must follow standards like law, but at least consider them.
Safari mobile is the first browser to promote them. It’s the only way to serve CSS to the iPhone.
I blame Apple for everything they do that I don’t personally like. What else would I blame them for?
View - Page Style. It’s a nice feature.
No, because you can hold them with one hand, and in the case of the DS, you always do. The other hand has the stylus.
The iPhones display, at the widest, is 480px wide, and this media query enforces that:
only screen and (max-device-width: 480px)Yes, but small-time, one-(wo)man-Joe doesn’t have the same resources your newspaper did. (S)he needs a solution that is as simple as possible, like a way to make his/her blog fit multiple devices with the least amount of work necessary.
That’s not what I meant. I meant republishing my content at another domain, only to put it in one column with a fluid-width. That’s overkill, and it’s duplicated content to a search engine.
Point in short: I would rather use a handheld stylesheet for my blog than serve the content at another location.
I think we’re just going to have to agree to disagree on this one, christian. I’m not going to convince you that handheld srylesheets aren’t the bedtvway to do a mobile site, and you’re not going to convince me that mobile safari is a bad thing. Bit that’s okay. Nothing wrong with a little disagreement.
I don’t think either of us were arguing those points, but sure. And you spell funny for being Jeff Croft. And you have a different IP. Are you Jeff Croft?
I’m on my iPhone now, which explains both the spelling and the IP. But yes, it’s really me.
And just to confirm, I’m back at home, and I’m here to say that was really me on my iPhone. I’m a bit embarrassed at the spelling, though! Didn’t notice it when I was typing, I guess! I do appericate your concern about the validity of my comment, though. Most people wouldn’t have cared.
Seriously, though — we don’t really agree, and that’s fine. It’s been a good discussion. Thanks for indulging me.
mobile developers are […] wishing for some sort of standards to be agreed upon by mobile device manufacturers and browser makers […]
Christain: that’s happened already. This is my point. There’s some legacy diversity, sure, but I’m looking forward.
The iPhone is one opf very many mobile phones that supports (X)HTML, CSS, AJAX etc. Or do you still think the mobile web is ‘WAP’, circa 2001?
My point is that, technology aside, developers will create mobile web sites that are distinct from tixed web sites - because the users want different things.
It isn’t because of different browser support in the UK that Amazon runs both amazon.co.uk and amazon.com - it’s because us Brits want different products, different currency, and different spelling.
We’re in a different context - just like a mobile user - and this deserves particular design and thought. Form follows function, and mobile function is just, well, different.
Jeff: I had a suspicion you were on your iPhone.
James: Not at all what I was talking about. I get context and I don’t need people to keep explaining it to me like I’m a kid =P What I was talking about is the day when designers have to start accounting for this:
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" /><link media="only screen and (max-device-width: 460px)" href="ZunePhone.css" type="text/css" rel="stylesheet" /><link media="only screen and (max-device-width: 340px)" href="s80.css" type="text/css" rel="stylesheet" /><link media="only screen and (max-device-width: 540px)" href="env2.css" type="text/css" rel="stylesheet" /><link media="only screen and (max-device-width: 300px)" href="iPhoneMini.css" type="text/css" rel="stylesheet" />Does everyone not think we are heading down that path?
I don’t think we’re heading down that path. Apple may be suggesting we do, but are any web developers buying into it? I’ve not seen any evidence of it. What websites outside of Apple are actually using this media query method? I don’t know of any. Microsoft suggested we use their proprietary CSS for years, and it never caught on. This will go the same way. Web developers are too smart for that.
If you look at this as a web page, or general web app, then yes. However, there may be different angle: this is iPhone app, and for now iPhone apps happen to be hosted on the web, as web pages.
There are numerous desktop apps which will check the availability of the new version over the web, download some archive, extract it, install the new version. Nobody has the problem with that, and nobody complains that those zips can only be used by this particular application. HTML, CSS and JS happens to be the .zip of iPhone apps.
Of course, this particular example is a poor choice, because it indeed might be implemented in some device unaware manner. And yeah, then it will suck on all of them, instead of shining on (iPh)one.
Like it or not, I think we will see this kind of differentiation: general web content, which should be accessible by any device that understands web, general web apps, which my require some specific features fro UA (XMLHTTPRequest support, JS support, etc.), and device specific web apps.
Web is not only webpages any more, it is apps hosting media.
And I have no problem with that.
I don’t like the idea that something should be dumbed down just too make it accessibel/usable by some dumb device. There are cases this my be required, but there are cases when this makes little sense or no sense at all.
Now PCs and Macs both have Intel processors, but I don’t complain if I cannot run Windows app on my iMac
just like that. Why should I complain some iPhone app does not work on Opera Mini? Because they both understand HTML and CSS?
Just like “web is not print” web is not only webpages anymore.
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.