Web pages for Mobile phone browsers

[Sticks]

Anyone with experience of designing web pages which will also render well on a mobile phone browser.

It would be nice to do it using separate CSS style sheets. How do I get the site to know it's a mobile and use the right style sheet or go to the right web page accordingly?

[dethfire]

I just put up a mobile skin for PF yesterday actually. What you do is check the user agent and switch the skin accordingly. Here are a list of most of the mobile user agents.

http://www.zytrax.com/tech/web/mobile_ids.html

I'd select the 5 most popular.

The skin should be narrow, low graphic and watered down.

[Sticks]

So there isn't something generic to all mobile phone browsers then?

I know facebook and twitter have managed to do this somehow

[dethfire]

So there isn't something generic to all mobile phone browsers then?

I know facebook and twitter have managed to do this somehow

Not that I know of and I've researched this a bit. I bet FB and Twitter just check for all 30 or so mobile user agent strings.

[Rhaedas]

If you're willing to design separate pages, then you can detect (for the most part) what is being used and redirect accordingly. Different style sheets may work, or you might have to condense information in a different page. Depends on the site really, and what info you're trying to show.

If you're familiar with PHP, or are willing to translate it into another server side script, http://detectmobilebrowsers.mobi/ has something that may work for you.

I found the biggest problem really is the Blackberries. They're everywhere, and they have the worse browser by default. Users can change to the Opera Mini, which displays 'normal' webpages pretty well without modifications, like the iPhone. But like in the regular PC world, how many people know enough to alter what comes already installed. In my brief delve into that world, I figured out it was a lot of extra work to attempt to make my page look the same in a Blackberry, and since they could read the information, it just wasn't as pretty, I figured it wasn't worth the struggle.

It's been described as version 2 of the 90's browser wars, where everyone's doing their own thing and there's no real standard.

[Sticks]

I am not familiar with PHP, will this be easy to put in?

[Sticks]

If you're familiar with PHP, or are willing to translate it into another server side script, http://detectmobilebrowsers.mobi/ has something that may work for you.

I have used the function generator to generate some code, do I just embed it into the page I want the mobile user redirected from, and if so where?

Note I have not yet studied or learned PHP.

[Rhaedas]

Right above the function generator is the usage guide, which gives you the function to include and how to call it, as well as the different parameters to control what happens with which mobile device. You'd first have to make sure you have PHP enabled on your host server, of course. You just upload the whole function, include it in the first page, and set the device parameters according to how you want it to respond.

PM me if you need more help.

The biggest problem I've found is testing...unless you happen to own all these different mobile phones, or know a lot of people that have them all, it's hard to be sure it'll display okay. That's why for me it was just easier to make sure that my layouts degrade gracefully, and at least they get the content, even if it isn't pretty.

[dethfire]

The biggest problem I've found is testing...unless you happen to own all these different mobile phones, or know a lot of people that have them all, it's hard to be sure it'll display okay. That's why for me it was just easier to make sure that my layouts degrade gracefully, and at least they get the content, even if it isn't pretty.

haha yeah, I had to pretty much call up all my friends and family who had different phones

[Nick Theodorakis]

In theory there is a CSS media type called "handheld" that was meant to do what you want, but in practice I don't know if any phone or mobile device actually pays attention to it. Like others mentioned, try to go for graceful degradation and flexible layout.

Nick

edit: here's a page with some tips. She mentioned the small-screen mode on Opera, and I can see it's there on my version of Opera, but I don't know if that actually emulates any device that is in use.

[HenrikOlsen]

If you start with

I am not familiar with . . ., will this be easy. . ..

The answer will be no.

It may be easier than several other ways of doing it, but it won't be easy.

[Sticks]

My attempts this evening did not work

In fact on my Samsung Mobile J700i putting the files in place made that page fall over on my mobile, so backed out all my changes.

I have emailed my code to the guy who hosts the site, to see if he has any ideas

[Nick Theodorakis]

How did it look before you started mucking around with it?

Nick

[Sticks]

All squeezed together and unable to activate any links outside the menu on the left