found this information on A List Apart, an article about Responsive Web Design
by Ethan Marcotte.
Just what I was looking for, a way to direct using on a desktop to one view and users on a mobile device to another view.
@import url(“shetland.css”) screen and (max-device-width: 480px);
Can we move this to http://www.sitepoint.com/forums/forumdisplay.php?f=340
The largest list I could find had 280,000 response headers to check against (for mobile devices) and it was last updated in 2008 - though the site is down now. If you account for all new cellphones to be released to any worldwide market which allows for Internet access it will require at least another 17 devices every week. I wouldn’t want to stuff up my website with such intrusive sniffing scripts. It’s actually rather insulting to the end user to get mollycoddled like that. 
This is a good start with PHP. I know it works for BlackBerry, not sure about iPhone:
$device = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/(BlackBerry|iphone)/i', $device)){
echo '
<style type="text/css">
body{width:420px}
*{float:none;}
</style>';
}
I also use percentages for all widths. If I want a fixed width page, the only thing I use that is not percent is the outer most div with class=“wrapper”
everything inside automatically fits so it is easy to change the width of the page at any time if it is not fluid.
you know, I just remembered that a while back OSNews open sourced their Mobile detection setup… It’s big, the code is kinda convoluted and messy, but it’s probably the most complete list you’re going to find (even if it is now outdated)
http://www.osnews.com/story/19681/Open_Sourcing_OSNews_Mobile_Detection_Kit
Though the detection list is so large, it illustrates another reason I wouldn’t be bothering in the first place.
Browser sniffing - isn’t that supposed to be a big evil thing you’re never supposed to do?
Just add a form and 2 inputs (image type preferably) to the top left of your site, one for mobile and another for standard. The top left will be the first thing any visitors see, whatever browser they use.
Use forms instead of links as search engines will not follow them and see your mobile page as a duplicate of your standard page
So then, compromise, compromise and compromise. Back to using a 56k modem.
EDIT: you can set cookies using htaccess thus allowing mobile users the OPTION of choosing their version
Simply put: You notify them on the front page of the website that a mobile friendly version of the site exists. Don’t redirect them, don’t force them to use what they don’t need, don’t make them feel like idiots. If it’s displayed properly on the site, they are likely to remember the m.yoursite.com when they come to use a mobile device or if they discover your site on that device, they only have to encounter one heavy page before they can “click” and turn to a speedier version. It’s as deathshadow60 said… your website should not make ASSUMPTIONS about the users capacity or speed or availability of technologies.
You seem to have it backward, if you do it that way it means regular PC users will have the low speedy version before they can see the main website in all it’s glory and devices like the iPhone will have their decent standards support wasted on the basis that you simply wanted to shave a few KB of the initial load time. Give them the full experience and then OFFER them the reduced version if they want it, don’t water down your website and say (as a last thought), “by the way, we have a much better version of the site but as I don’t know what you’re using you get the dumbed down version”. You’re insulting your visitors.
Mobile browsers don’t appreciate the handheld media type properly, some use screen, some use handheld, some use screen + handheld, some use screen + css3, some use handheld + css3, some just use css3 (media queries)… get the picture? It’s not a set convention and it’s impossible to accurately cater for. As for browser redirects, sniffing is not effective, there’s hundreds of thousands of devices out there, you can’t get them all, and forcing people to use what you redirect them too is just plain poor practice. One of the main reasons why redirecting is such a silly idea is because you don’t actually know what their using, redirecting an iPad (with a decent size screen) for example because it’s a handheld device (or other readers out there) is proof enough that assumption based redirects only hurt the end user.
Targeting for mobile server-side through any form of user agent nonsense breaks eventually/repeatedly - in general ANY form of browser sniffing is such a horrible idea… See the dumbasses who force all Opera users to the mobile version of the site, the endless horde of mobile browsers that do NOT get detected properly, etc, etc…
In a lot of ways designing for mobile should be dealt with using the ‘back to basics’ approach; a return to what HTML was originally FOR!
When it was created HTML was meant as a DEVICE INDEPENDANT means of transmitting a document. NO assumptions were made or were SUPPOSED to be made about the capabilities of the client or even how it would present the data. In that capacity tags were meant to say what things were, NOT how they were going to appear.
CSS, specifically combined with the MEDIA attribute when linked externally returns us to those roots if you practice PROPER separation of presentation from content. IF you mark up your content semantically, use the semantically neutral SPAN and DIV tags as hooks for your presentation, and send your ‘full version’ of the site’s css as “screen, projection, tv” - it should graceful degrade down to mobile quite handily - For some things like adding centering to main menu when wrapped/unstyled I’d consider using a handheld.css - but if that doesn’t get used the page should still be functional off the single codebase.
The ENTIRE point being graceful degradation - when the device does not meet the requirements of the goofy extra crap you hung on the layout, your code should drop-through to the next compatibility and work just fine.
That’s the POINT of semantic markup and separation of presentation from content! You use those practices and stop worrying about ‘special versions for mobile’ or any of that other nonsense, you’ll be a lot more productive and your pages will work just fine.
After thinking about the points brought up, I am going to lean toward
Pages with the forced mobile with a View Full Page option.
(this would be personal because I would rather click view full page from streamlined mobile site then wait for full pages to load)
This doesn’t help the low bandwidth as much. I think I will add a low bandwidth link to the full page, still dislike the waiting idea but can’t fix everything.
Thanks for the input.
Michelle
How did you (or did you) provide a desktop version link for those on larger smartphones to view the original website?
^that’s one way to do it.
You’ve hit the common problem with using media=“handheld”… some mobiles ignore it, some combine it with the “screen” stylesheet, and some obey it. Making it almost useless.
However a browser like Opera Mini or Opera mobile are known as browsers who can deal with desktop css, and because users don’t like being shunted to some ugly mobile version when their browser is capable of more, vendors make those browsers ignore the mobile stylesheets.
This sucks because even if Opera et al can load desktop stylesheets, it doesn’t mean it benefits the user to have the most image-heavy or script-heavy version of the site.
Opera does support @media-query though : )
This is exactly what I did the other day.
Here are 2 sites that helped immensely.
Then you can use the tools from the google link to validate your page.
How about? Its time search engines looked at what people are using and offer both the regular site and the mobile site (if available) links for users. Then all users would have to do is click on the mobile link if they want
I’ll put forward another reason why having the back end decide which version of the site you get sucks big hairy balls:
Facebook has Konqueror somewhere written as a mobile browser. I don’t know where they get that from, but when I’m on my DESKTOP browser I get redirected to a crappy mobile page that doesn’t even work. It can log in, but then can’t show more than the menu. It does not show content for some reason.
They have no business trying to determine who’s a mobile and who isn’t if they’re that bad at it. As Alex mentioned, plenty of the so-called smart-phones like to try to display the desktop version and zoom around them. That doesn’t mean they’re actually any good at it or even fast enough to deal with all those bloated image files or the 15 different javascript files to drain your battery with.
More and more sites are mentioning their mobile version in the main menu, one of the first things one sees, paired with a mobile stylesheet for whichever mobiles actually use those. That should allow those with the dumber phones to at least easily see that there’s a mobile version, and they can choose to check it out or not.
As a link in the main site menu, this means google could grab it easily. Why doesn’t Google show mobile versions? It often isn’t given the mobile version by sites who read user agent headers… a bot isn’t a phone. The googles would never know.
Good suggestion. I’m sure Google could easily organize this. At least if you were putting up a mobile version of a site, you could inform Google somehow, via a submission, or perhaps place a meta tag in the header to alert the search engines.
You can set up your domain to redirect to a mobile version of your site if viewing with a mobile device :).
I’m sure google can help you there.
Perhaps it’s time to revisit splash pages (or whatever they’re called… meaning a list of viewing options. But that doesn’t make for a very nice home page.
You could also just type an m.domainname and see if there’s a mobile site. I guess that could become tedious, though, as most sites won’t have one. 
Hate to admit it but, I do mobile browsing a LOT. And most the places I am are NOT 3G. Unless a site is designed for 56K it is soooooo slow. As a designer I totally agree with you, as a mobile user? even if a site has an m.xxx.com a search doesn’t show you that option is available. And if the information is in the page the page has to load to show me its available. Guess the question becomes how do you show a mobile user a m.xxx.com is available without loading the site page?
Yes, I read that article the other day, and then the next day needed to specify some styles just for the iPhone. Timing could not have been better. I did need to experiment around a bit to get the @media rule working, though. The code given in the article didn’t quite work for me–not sure why. This worked nicely (which was offered in another thread on this forum):
@media only screen and (max-device-width: 480px) {
#footer {
styles here
}
}