Would like example of how to code for handheld devices (css?)

[ScottKCooper]

Isn't it possible to have your index page detect the type of browser, and if handheld, swap out the stylesheet for the site? Any examples of that conditional statement, and maybe the different stylesheets - or at least the ones that really make the difference - like stacking a normal three column site into a one column site with the main image being different (150px)?

[TeeJay]

This block works for the iPhone, you will then need to set your page sizes accordingly.
(Sorry, haven't got any stylesheets) I find I have to completely change layout/content for devices such as this.

var agent=navigator.userAgent.toLowerCase();
var is_iphone = (agent.indexOf('iphone')!=-1);
if (is_iphone) { window.location ="http://www.your_web_site/iphone/" }


TJ

[ClickHappy]

What TeeJay posted will redirect to another folder or subdomain of your site that has an iphone friendly layout based on the user_agent or browser type that the visitor is using.

Here's an article on how to use javascript to switch stylesheets (selectable by the visitor):
http://www.alistapart.com/articles/alternate/

Included in the article is a .js file you can download and put on your site, and then they suggest adding links to your page to allow the visitor to change the style.

You can automate it by combining the two methods, so TeeJay's example becomes:

var agent=navigator.userAgent.toLowerCase();
var is_iphone = (agent.indexOf('iphone')!=-1);
if (is_iphone) { setActiveStyleSheet('iphone_stylesheet'); }


Swap [ and ] for < and > respectively in the script tags.

ETA:
If you're using a server technology like ASP.NET or PHP, you can programatically get the user_agent variable and then dynamically write the correct stylesheet code on the page, taking the requirement for javascript out of the picture for the client, and is my preferred approach. Your server side technology will determine the code to use, but it's basically the same logic as the javascript above.

[ScottKCooper]

Thanks - I found some of what I was thinking of on the same site:
http://www.alistapart.com/articles/pocket/
I think the idea is to make a one column layout - and then if your type is screen, add floats to some items to take up more horizontal real estate. Time to play with some code.

[tracknut]

You have at least two options to chose from. Either you decide that 1) you can make one web site, and switch CSS files for mobile versus desktop computers, or 2) you have two completely separate sites (or one like mobile.domain.com) being a subdomain of the other. In either case, you need the code to determine what the user's browsing with, typically done with the user agent, and pop the person to the right version of the site or CSS file.

If you need some user agent code in PHP, I can send you what I'm doing, which is the second of the options.

Dave

[Todd Lambert]

I don't really get the whole mobile stylesheet thing anymore. There used to be a day and a need for it, but nowadays, phone browsers are capable of showing sites pretty much the same as a desktop computer.

[shrugs]

I guess, unless you just want to make something specifically for mobile users... that's cool. 8-)

[TeeJay]

I don't really get the whole mobile stylesheet thing anymore. There used to be a day and a need for it, but nowadays, phone browsers are capable of showing sites pretty much the same as a desktop computer.

[shrugs]

I guess, unless you just want to make something specifically for mobile users... that's cool. 8-)

Whilst your first statement is very true, its still difficult to navigate round a full-size graphical screen on an iPhone. (Yes I accept that there are many more mobile devices)

I much prefer to size images/icons/text to suit the iPhones format than to expect mobile visitors to have to zoom in and scroll. It can get very tedious when browsing that way for very long.

TJ

[Faolan]

I think these sites are what you're looking for:

http://ready.mobi/launch.jsp?locale=en_EN
http://mobiforge.com/

[ScottKCooper]

thanks for the information!

[Todd Lambert]

TeeJay, good point... that is true, it can be tedious. However, I don't normally think most users will just browse around on their mobile. They're usually looking for things like contact info, a map, location, phone number, etc.. In which case, with modern phones and mobile browsers, I wouldn't worry too much about it, like I said.

If you know a good size of your audience is going to spend a considerable time actually browsing your site, then yes, it would definitely be be beneficial.

So, I guess it would come down to your sites demographics.