I want to develop a mobile version of a website, and I was wondering what was the best way to add it to a page. I know the classic way (media=handheld) but I’ve seen a lot of buzz about media queries lately, but if I understood it right they are not supported but every browser yet.
So my question is: what is the best way to do it, knowing that I need to support especially the iPhone and Blackberries?
Media queries are the way the go I believe. I don’t know much about them though. Here are my thoughts on mobile versions…
This is what I think. I think the “mobile version” is a fad that will die. I have a iPhone. I hate mobile versions. They are always striped down - dumbed down versions of the full site. Why do I want that??? Especially when my iPhone is perfectly capable of displaying the site faster and better than my XP? This is why I don’t bother.
What I do on my site is simply give alternate content for unsupported mobile things. No “download java/flash for better experience messages”. 99.99% of users ignore those links/messages anyway.
I went with media queries, after reading a couple of articles on the subject.
About what you wrote, I appreciate mobile versions of websites a lot instead. They are striped down versions of the original because the screen size doesn’t allow you to use the original version very easily, and so it’s preferable to have a faster and easier to browse version, even if it’s not always complete, as you say.
In any case, you always have the possibility to select the original version, even on a mobile device, so I don’t think it hurts to have the possibility to choose
And, by the way, I often prefer the mobile versions of websites, because they just keep the relevant information: no banners, no annoying flash stuff, just the important things.
That’s cool. Each his own. YouTube is a good example. There is some funtionality in the mobile version I need and the same for the full version. It’s obvious how to go from the full site to the mobile site. But if you need to go back to mobile thre is no link. You have to go clear cookies in the settings and then go back. Lots of sites have those inconsistencies. Just added stepps while browsing. I do 99% of my web browsing on my iPhone so maybe I’m different than the average.
What you say is true, but the problem is easily solved when the site has a subdomain just for the mobile version (for example m.sitename or mobile.sitename). If you want to go back to the mobile version you just type this url again
Eric, you make a good point. Those who want a mobile version have it available in case the “real” site overwhelms their phone, and those who are fine using the regular version won’t bother hunting for the mobile version. And you’re right, no one does the “download java/flash for better experience” bit.
Additionally, I, and most people I presume, become accustom to the way a site looks and feels. Mobile versions rairly look/feel anything like their full version. I personally feel like I’m missing something when I’m just looking and a bland screen with some text.
I’ve been building all my sites “for mobile” and then layering on “desktop” css using media queries.
Any user agent who doesn’t support media queries will at least get the basic layout of the page and everything functions.
User agents who do support media queries get some extra goodness. The exception here is IE: I just give IE less than 9 the desktop styles. This does suck for IE6 on mobile, but, tough.
I haven’t done it yet but I’m going to make use of the isMedia() function to keep JS away from those loading only the simple css.
The (well-built) mobile versions of sites are better than the desktop versions because
-they do everything you need without the bull
-no downloading 300MB of scripts and images that are just fluff
-cleaner interface means better usability
The above unfortunately isn’t true of all (or even most?) mobile versions of sites. I am of course talking about a Utopia. : )