Thnx for this good overview. Personally I think mobile browsing is our most recent incarnation of the web standards nightmare. And like it or not, my clients are not going to pay for (learning!) a bunch of new devices every year. IMHO we need to degrade our sites for mobile platforms up to a level where it at least works in 95% of the times. And we also need to think of what we show. Not showing large visual headers or animations is only part of the deal. Our mobile version of the web site has a completely different theme and shows different information on its frontpage (e.g. contact information is crucial, sideblocks should not be shown). It’s not the perfect fit for every individual device but at least it works. And its affordable…
Copy & paste the code below to embed this comment.
Bambi1
a cloud approach to handset access seems like a good idea.
does anyone have some comparison between those two services.
I’ve noticed that PM is much cheaper
Also I saw a similar service from Vodafone (http://developer.vodafone.com) which is actually free to use (you just need to register). is this the same?
Thanks
Wow, this post is more like a book, so I admit I did not read it in it’s entirety. The posts on this site are way too long overall.
But it does not matter because I did not agree with the premise.
Here’s the deal, mobile browsers are going to continue to get more and more like FULL PC/OSx browsers. So doing all this work to make your site display correctly in various mobile browser versions is a waste of time.
Further, the landscape is much simpler than portrayed here. You basically have Safari on the iPhones and the Browser in Android. If you are capable of displaying on those two you have enough of the market, and should spend your time on more important things.
Hopefully this “most recent incarnation of the web standards nightmare” will dissolve in future developments like the IE nightmare is in the process of dissolving and like the Netscape 4.x dissolved 10 years ago …
@ppk Thanks for the inspiration! You triggered an update of my (high-level) overview in “slidesha.re/gVTzDj”:http://slidesha.re/gVTzDj …
Copy & paste the code below to embed this comment.
SZRimaging
I would say the SDKs for both Android and Blackberry are very good and very thorough. I have yet to test something on the SDK and have it fail when testing it on a handset running the same software.
Another thing I have done in the past is to go to AT&T and Verizon stores and play with the display models of each type of phone. Not the quickest way to test, but it helps.
Also, I would think that you, of all people, would have mentioned the webkit link on newer devices, and the use of CSS3. Although fragmentation of the Android OS makes some things work a little odd, 99% of what I write for iOS works exactly the same on BB6 and Android 2.3. Thus, I really develop for one, and tweak a little if need be.
In the US, if your site is related to pleasure and not business, I am not sure there is a reason to build for any other devices. I work for a resort company and our hits from anything else is slim to none. Nokia isn’t a factor at all, and the only wild card is the Windows Phone 7. And although WP7 uses an IE7 based browser, it has been given features beyond IE8, so it could be very competitive. Not to mention the UI of the entire operating system is just so much nicer….
And to the fellow asking about jQTouch, I have used it on two sites now, and although flashy, isn’t anything more than that. It’s core is still jQuery, so if you don’t want the transitions, you would be better building a normal site and using jQuery. And to be honest, it isn’t optimized for building a good site. I had to do lots of band-aids to make it somewhat work like a website.
Copy & paste the code below to embed this comment.
michaelmd
There are still A LOT of devices out there in real world use that StatCounter cannot detect because their browsers do not support javascript.
The only source of stats for mobile browsers is server logs. Anything that relies on javascript will miss out on a lot of devices. (and remember that you are probably not going to see much traffic from users using devices on which your website is not usable!)
Looking at my own server logs I still see a lot of those older and more basic mobile browsers – after all how often does the average person buy a new phone?
Copy & paste the code below to embed this comment.
James White
Terrific article! Very enlightening.
Like most others who have commented, I too am a bit appalled that one would need to go out and buy devices just for testing. I say this as a student as well: we are all so ambitious yet all so poor! When I go out and freelance this year, how could I ever expect to make a profit?
I think maybe we need to take a better stand on this issue. If you want a full browsing experience, go desktop. I think that the hardware companies should be ashamed that they are pushing out so many platforms. We cant keep up. And you know it’s one thing if my site works or not. It’s a whole other if we are talking about quirks. Quirks be damned!
And honestly: chances are eighty percent of content is best accessed not on a train, subway, hair salon…
This has been a hot topic with me recently. I also think that designing multiple versions of a website for various mobile phones is ridiculous. Most clients won’t pay to have their site reconstructed to support multiple mobile browsers anyway. Personally, I can’t stand surfing the internet on something smaller than my hand. I think a device the size of the iPad is much easier on the eyes and more comfortable to hold/type.
Mobile Design is a new and fast-emerging platform where designers can showcase their infinite creativity. I think Full Sail University is offering an experimental course on this one.
I tried multi-phone emulator applications a few years ago and they’re not very good. But what you could use is the IDEs for developing applications for these platforms. They come with a simulator/emulator with a browser installed. Most of them are free apart from maybe Windows Phone 7, though the iPhone one requires a Mac.
Mobile browsing is just a ~4% of all the market… right?
So I don’t think is critical for all website to have a full support of mobile… It will still make more sens to support IE6. Of course it depend of your audience.
Any way mobile browser become better with a better support of the standard. Except “:hover”….
I just don’t get why client are ready to paid to support iPad (0.2% of the market) it’s just a bad investment.
Copy & paste the code below to embed this comment.
CliffPruitt
The best thing I can say here is that mobilcomplexity will most certainly raise your expense as a developer or designer and that absolutely should raise the cost to your client. Let your client decide how much testing they want to fund. If you don’t have a device in your toolkit, charge your client 100% of the cost of the device (without ongoing contract) and give them the option of waiving/reducing that fee to use an emulator for testing (when available). Be honest about the tradeoffs. When you do have the device (or use an emulator), charge a modest mobile testing fee and stash the cash for a future hardware upgrade when needed.
Allowing your client to be the decision maker both educates them on the real world expense and complexity of making their site mobile friendly, and ensures that you aren’t unnecessarily bearing the additional financial burden.
As a web developer, smartphones are now realities, more forward daki think every developer when developing an application that not only will it run on desktop browser but also for smartphones.
YUI 3.2 is also an excellent option as a library for use on both desktop and mobile browser platforms acting as a robust abstraction layer between your own code and the browser. With progressive enhancement built into the core library it helps to get into that mindset of development.
http://developer.yahoo.com/yui/3/
Video: Satyen Desai — ‘A Phone, a Tablet and a Laptop Walk into a Bar…’—YUI’s Approach to Mobile Web Development
This is a great overview!
However, in terms of future prospects it’s rather vague.
Inability browse the net the way they are used to from their home computers and view their favorite sites makes people consider other options. Netbook is one of rarely mentioned smartphone rivals. Though it’s usually compared with a laptop, it has a lot in common with smartphones. It’s small, portable, and cheep. Most importantly, it’s perfect for browsing the net, checking your mail, and staying in touch with your friends.
Few people will buy a bunch of brand new devices at a sky high price just to test several sites.
And while the problem of standardization remains unsolved, netbooks and iPads are becoming more and more popular.
I have just recently moved into production for mobile sites and one of the first things I was tasked with was drafting a device classification and supported device strategy.
This article covers a lot of the challenges I discovered through my research, and covers them well. This is a fantastic starting point for those who are moving into the fast changing world of mobile web.
The article implies that Apple wrote WebKit from scratch, and everyone else copied it. Not true. WebKit was a hostile fork from the open source KHTML project, part of the KDE project. The engine, KHTML, is Free Software under the LGPL.
Apple took the KTHML code, forked it, made a lot of (admittedly good) improvements, and then did not contribute their changes back upstream, or at least not in any useful way. Various other parties then started their own branches off of WebKit (which, being LGPL, Apple could not close) and building their own browser variants, sometimes contributing features back upstream and sometimes not. That’s why there’s so much variation between WebKit derivatives, which is a serious problem and will become a bigger problem in the future.
That’s not to say WebKit isn’t a good engine (it is), or that Apple didn’t do good work with it (they did). But to imply that Apple invented WebKit and everyone else just copied-and-broke it as the article does is simply wrong.
Here you can get much information about iPhone accessories, such as iPhone protective case, protective film, charger, cable, etc. All of which is not only the descriptions or images of a device, but also there are lots of interesting topics that are closely contact with our lives! In addition, you will also read the latest and current news from Apple as quickly as possible. www.iPhonestil.com
(Source: http://wiki.answers.com/Q/What_is_iphonestil#ixzz1OlfC1JvP )
There are various infinity smart phones available in the market. Through which we can develop websites and also use for entertainment purpose. I having this software on my android phones.
I am not so sure if the separate mobile view will be a success storry. Browsers like Mobile Safari are already good in showing normal websites as you see them on computer, actually even better then IE’s before 9. I think mobile view and computer view will be the same in future.
Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
Although I can’t really say I agree with going out and buying a fistful of devices in order to successfully optimize your site for mobile. Where do you even begin once you have your armory in hand? How do you manage all the little quirks in each OS/Browser and beyond that each version therein? Why neglect legacy devices?
Copy & paste the code below to embed this comment.
ralat
I wonder how this works for the iPhone 4, which has a 960 × 640 resolution. You could use the only-rule with width:960px, but that means that all screens with a lower width will use this stylesheet. What is the best way to handle this?
Thank you for this great, detailed overview. I agree it can be daunting and you need to stay up to date as it changes a lot. Thanks for including tables, they’re very useful.
44 Reader Comments
Back to the ArticleEric Sol
Thnx for this good overview. Personally I think mobile browsing is our most recent incarnation of the web standards nightmare. And like it or not, my clients are not going to pay for (learning!) a bunch of new devices every year.
IMHO we need to degrade our sites for mobile platforms up to a level where it at least works in 95% of the times. And we also need to think of what we show. Not showing large visual headers or animations is only part of the deal. Our mobile version of the web site has a completely different theme and shows different information on its frontpage (e.g. contact information is crucial, sideblocks should not be shown). It’s not the perfect fit for every individual device but at least it works. And its affordable…
Bambi1
a cloud approach to handset access seems like a good idea.
does anyone have some comparison between those two services.
I’ve noticed that PM is much cheaper
Also I saw a similar service from Vodafone (http://developer.vodafone.com) which is actually free to use (you just need to register). is this the same?
Thanks
Relocation to Atlanta
Wow, this post is more like a book, so I admit I did not read it in it’s entirety. The posts on this site are way too long overall.
But it does not matter because I did not agree with the premise.
Here’s the deal, mobile browsers are going to continue to get more and more like FULL PC/OSx browsers. So doing all this work to make your site display correctly in various mobile browser versions is a waste of time.
Further, the landscape is much simpler than portrayed here. You basically have Safari on the iPhones and the Browser in Android. If you are capable of displaying on those two you have enough of the market, and should spend your time on more important things.
haraldf
Hopefully this “most recent incarnation of the web standards nightmare” will dissolve in future developments like the IE nightmare is in the process of dissolving and like the Netscape 4.x dissolved 10 years ago …
@ppk Thanks for the inspiration! You triggered an update of my (high-level) overview in “slidesha.re/gVTzDj”:http://slidesha.re/gVTzDj …
SZRimaging
I would say the SDKs for both Android and Blackberry are very good and very thorough. I have yet to test something on the SDK and have it fail when testing it on a handset running the same software.
Another thing I have done in the past is to go to AT&T and Verizon stores and play with the display models of each type of phone. Not the quickest way to test, but it helps.
Also, I would think that you, of all people, would have mentioned the webkit link on newer devices, and the use of CSS3. Although fragmentation of the Android OS makes some things work a little odd, 99% of what I write for iOS works exactly the same on BB6 and Android 2.3. Thus, I really develop for one, and tweak a little if need be.
In the US, if your site is related to pleasure and not business, I am not sure there is a reason to build for any other devices. I work for a resort company and our hits from anything else is slim to none. Nokia isn’t a factor at all, and the only wild card is the Windows Phone 7. And although WP7 uses an IE7 based browser, it has been given features beyond IE8, so it could be very competitive. Not to mention the UI of the entire operating system is just so much nicer….
And to the fellow asking about jQTouch, I have used it on two sites now, and although flashy, isn’t anything more than that. It’s core is still jQuery, so if you don’t want the transitions, you would be better building a normal site and using jQuery. And to be honest, it isn’t optimized for building a good site. I had to do lots of band-aids to make it somewhat work like a website.
michaelmd
There are still A LOT of devices out there in real world use that StatCounter cannot detect because their browsers do not support javascript.
The only source of stats for mobile browsers is server logs. Anything that relies on javascript will miss out on a lot of devices. (and remember that you are probably not going to see much traffic from users using devices on which your website is not usable!)
Looking at my own server logs I still see a lot of those older and more basic mobile browsers – after all how often does the average person buy a new phone?
James White
Terrific article! Very enlightening.
Like most others who have commented, I too am a bit appalled that one would need to go out and buy devices just for testing. I say this as a student as well: we are all so ambitious yet all so poor! When I go out and freelance this year, how could I ever expect to make a profit?
I think maybe we need to take a better stand on this issue. If you want a full browsing experience, go desktop. I think that the hardware companies should be ashamed that they are pushing out so many platforms. We cant keep up. And you know it’s one thing if my site works or not. It’s a whole other if we are talking about quirks. Quirks be damned!
And honestly: chances are eighty percent of content is best accessed not on a train, subway, hair salon…
As we say in college: consume responsibly!
adamant
This has been a hot topic with me recently. I also think that designing multiple versions of a website for various mobile phones is ridiculous. Most clients won’t pay to have their site reconstructed to support multiple mobile browsers anyway. Personally, I can’t stand surfing the internet on something smaller than my hand. I think a device the size of the iPad is much easier on the eyes and more comfortable to hold/type.
SorenCreativeDesign
Mobile Design is a new and fast-emerging platform where designers can showcase their infinite creativity. I think Full Sail University is offering an experimental course on this one.
markh
I tried multi-phone emulator applications a few years ago and they’re not very good. But what you could use is the IDEs for developing applications for these platforms. They come with a simulator/emulator with a browser installed. Most of them are free apart from maybe Windows Phone 7, though the iPhone one requires a Mac.
gagarine
Mobile browsing is just a ~4% of all the market… right?
So I don’t think is critical for all website to have a full support of mobile… It will still make more sens to support IE6. Of course it depend of your audience.
Any way mobile browser become better with a better support of the standard. Except “:hover”….
I just don’t get why client are ready to paid to support iPad (0.2% of the market) it’s just a bad investment.
CliffPruitt
The best thing I can say here is that mobilcomplexity will most certainly raise your expense as a developer or designer and that absolutely should raise the cost to your client. Let your client decide how much testing they want to fund. If you don’t have a device in your toolkit, charge your client 100% of the cost of the device (without ongoing contract) and give them the option of waiving/reducing that fee to use an emulator for testing (when available). Be honest about the tradeoffs. When you do have the device (or use an emulator), charge a modest mobile testing fee and stash the cash for a future hardware upgrade when needed.
Allowing your client to be the decision maker both educates them on the real world expense and complexity of making their site mobile friendly, and ensures that you aren’t unnecessarily bearing the additional financial burden.
desenvolvedor web
As a web developer, smartphones are now realities, more forward daki think every developer when developing an application that not only will it run on desktop browser but also for smartphones.
alienspaces
YUI 3.2 is also an excellent option as a library for use on both desktop and mobile browser platforms acting as a robust abstraction layer between your own code and the browser. With progressive enhancement built into the core library it helps to get into that mindset of development.
http://developer.yahoo.com/yui/3/
Video: Satyen Desai — ‘A Phone, a Tablet and a Laptop Walk into a Bar…’—YUI’s Approach to Mobile Web Development
http://developer.yahoo.com/yui/theater/video.php?v=yuiconf2010-desai
movingcompany18
This is a great overview!
However, in terms of future prospects it’s rather vague.
Inability browse the net the way they are used to from their home computers and view their favorite sites makes people consider other options. Netbook is one of rarely mentioned smartphone rivals. Though it’s usually compared with a laptop, it has a lot in common with smartphones. It’s small, portable, and cheep. Most importantly, it’s perfect for browsing the net, checking your mail, and staying in touch with your friends.
Few people will buy a bunch of brand new devices at a sky high price just to test several sites.
And while the problem of standardization remains unsolved, netbooks and iPads are becoming more and more popular.
semainwaring
I have just recently moved into production for mobile sites and one of the first things I was tasked with was drafting a device classification and supported device strategy.
This article covers a lot of the challenges I discovered through my research, and covers them well. This is a fantastic starting point for those who are moving into the fast changing world of mobile web.
Crell
The article implies that Apple wrote WebKit from scratch, and everyone else copied it. Not true. WebKit was a hostile fork from the open source KHTML project, part of the KDE project. The engine, KHTML, is Free Software under the LGPL.
Apple took the KTHML code, forked it, made a lot of (admittedly good) improvements, and then did not contribute their changes back upstream, or at least not in any useful way. Various other parties then started their own branches off of WebKit (which, being LGPL, Apple could not close) and building their own browser variants, sometimes contributing features back upstream and sometimes not. That’s why there’s so much variation between WebKit derivatives, which is a serious problem and will become a bigger problem in the future.
That’s not to say WebKit isn’t a good engine (it is), or that Apple didn’t do good work with it (they did). But to imply that Apple invented WebKit and everyone else just copied-and-broke it as the article does is simply wrong.
ellen-weber
Here you can get much information about iPhone accessories, such as iPhone protective case, protective film, charger, cable, etc. All of which is not only the descriptions or images of a device, but also there are lots of interesting topics that are closely contact with our lives! In addition, you will also read the latest and current news from Apple as quickly as possible. www.iPhonestil.com
(Source: http://wiki.answers.com/Q/What_is_iphonestil#ixzz1OlfC1JvP )
pailebaker
There are various infinity smart phones available in the market. Through which we can develop websites and also use for entertainment purpose. I having this software on my android phones.
Booster
I am not so sure if the separate mobile view will be a success storry. Browsers like Mobile Safari are already good in showing normal websites as you see them on computer, actually even better then IE’s before 9. I think mobile view and computer view will be the same in future.
Nokia 5230
Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
Although I can’t really say I agree with going out and buying a fistful of devices in order to successfully optimize your site for mobile. Where do you even begin once you have your armory in hand? How do you manage all the little quirks in each OS/Browser and beyond that each version therein? Why neglect legacy devices?
ralat
I wonder how this works for the iPhone 4, which has a 960 × 640 resolution. You could use the only-rule with width:960px, but that means that all screens with a lower width will use this stylesheet. What is the best way to handle this?
ralat
Sorry, replied to the wrong article!
railwaymen
Thank you for this great, detailed overview. I agree it can be daunting and you need to stay up to date as it changes a lot. Thanks for including tables, they’re very useful.