How to make a website hand-held/mobile compatible?

[edprush]

I am having someone design a website for me and he would like to have a subdomain for the mobile website.

Is that the best way to accomplish my goal of making a website mobile compatible?

 

[Gunslinger08]

Easiest way to handle it would be to implement something similar to "printer friendly" functionality. In your code for each page (hopefully you have common code on all pages in your site that resides in a single location), check if the user is mobile (very easy in .NET.. look up how to do it in your language of choice) and if so, change the stylesheet on the page to a more mobile friendly version (hide images, simple styling, etc.).

 

[troytime]

depends on the site really...but use common sense
make it small, text only (or at least text mostly), functional

test it test it test it

also, get the .mobi domain rather than using a subdomain.

 

[Looney]

Try asking this at howardforums

 

[edprush]

Originally posted by: troytime
depends on the site really...but use common sense
make it small, text only (or at least text mostly), functional

test it test it test it

also, get the .mobi domain rather than using a subdomain.

May I ask why you feel a .mobi domain is better than a subdomain?

 

[Argo]

Do you mean render the site in WML or use HTML that looks good on small devices? If it's the later, then experience+testing should do it for you.

 

[George P Burdell]

Originally posted by: Argo
Do you mean render the site in WML or use HTML that looks good on small devices? If it's the later, then experience+testing should do it for you.

These are the main two options open to you. I'm more in favor of the latter. All you need to do is present cleaner HTML for a narrow width screen.

You can look at a few of my phone bookmarks to see what's going on:
http://news.bbc.co.uk/nolpda/i...s/hi/default.stm?ifs=1
http://mobile.nytimes.com
http://gasbuddytogo.com
http://www.google.com/ig/mobile
http://www.grandcentral.com/mobile
http://mymilemarker.com/m/
http://m.facebook.com
http://m.youtube.com

 

[edprush]

Originally posted by: George P Burdell

Originally posted by: Argo
Do you mean render the site in WML or use HTML that looks good on small devices? If it's the later, then experience+testing should do it for you.

These are the main two options open to you. I'm more in favor of the latter. All you need to do is present cleaner HTML for a narrow width screen.

You can look at a few of my phone bookmarks to see what's going on:

http://m.youtube.com

The person designing my mobile-compatible site wants to design a seperate site for mobile users. Is that feasible?



Thanks for the links.

What is everyone's opinion regarding the .mobi extension? I noticed that none of George P Burdell's mobile links use the .mobi extension. Do most mobile sites just use a subdomain or subdirectory instad of .mobi? Which do you prefer?

 

[troytime]

if everyone used .mobi, it'd make the overall mobile web rock
standards are good!

look at the variations out there now
mobile.msn.com
google.com/m (or google.com/xhtml)
wap.yahoo.com
fatwallet.mobi

anyone creating a mobile version has their own preference for the subdomain or path, but the only way the user will know that preference is either through advertisement or auto redirect of mobile browsers - both of which are not foolproof

if they were all .mobi, think of the ease of finding mobile sites!
think of the improvements that google could make!
if you're at mobile google, and you search for something, it could give preference to mobile sites

 

[George P Burdell]

Three things to consider when choosing a URL for your mobile website:
1. How short is the whole URL?
Even with a QWERTY keyboard, I type slower on my phone than on a computer. This is worse for people who have a regular numeric keyboard with 3 letters per number. I prefer m.domain.com over domain.com/mobile

2. Does the TLD end in .com?
One of the reasons that many websites choose a .com TLD is that many mobile phone auto-complete with a .com by default. So the user types m.domain, hits enter/down arrow/go and the .com is added on.

3. Does your main domain recognize mobile devices and automatically redirect them?
It is convenient if your main website can detect a mobile device and redirect to a mobile version. All a user has to do is type in domain.com and be redirected to the correct website, like domain.com/mobile. With the .com autocomplete feature added in, you can see how convenient this is.

If you make it easier for me to access your website on my cellphone, I will be more likely to revisit and less likely to be annoyed.

Also, these arguments ignore the fact that users can add websites to their cellphone favorites/bookmarks.

I don't approve of the .mobi TLD for mobile sites, in the same way that I don't approve of the .xxx TLD for adult websites. There are better issues that ICANN/whoever can devote their time to.

Originally posted by: edprush
The person designing my mobile-compatible site wants to design a seperate site for mobile users. Is that feasible?

Ideally, you can run things off a single website. If you have clean HTML and use CSS for all your design, you can have two stylesheets: one for regular users and one for mobile users. The mobile browser will either use the mobile stylesheet or ignore the stylesheet completely, which may not be bad at all (depending on the situation).

In practice, you will need to remove a lot of the HTML from a regular site to serve it to a cellphone. Take this forum for example: while it does render on a cellphone IE browser, the layout is messed up and a lot of features (like ratings, buttons, sidebar) aren't needed on a mobile version of a website.

So your developer will end up making a separate site (either on a separate domain, on a subdomain (like m.domain.com) or under a subdirectory (domain.com/m)) but this won't be a lot of work, since he'll be serving a dumbed down version of the original website.

 

[edprush]

Originally posted by: George P Burdell
3. Does your main domain recognize mobile devices and automatically redirect them?
It is convenient if your main website can detect a mobile device and redirect to a mobile version. All a user has to do is type in domain.com and be redirected to the correct website, like domain.com/mobile. With the .com autocomplete feature added in, you can see how convenient this is.

How is that accomplished? I've read about browser sniffers. Is that what you are referring to?

I like m.domain.com as the URL for my mobile site. Do you think it is becoming more 'universal' to use m.domain.com? Or are more mobile users likely to try domain.com/m or mobile.domain.com/m or domain.com/mobile ?

 

[George P Burdell]

Originally posted by: edprush

Originally posted by: George P Burdell
3. Does your main domain recognize mobile devices and automatically redirect them?
It is convenient if your main website can detect a mobile device and redirect to a mobile version. All a user has to do is type in domain.com and be redirected to the correct website, like domain.com/mobile. With the .com autocomplete feature added in, you can see how convenient this is.

How is that accomplished? I've read about browser sniffers. Is that what you are referring to?

Every browser send out information while requesting a page. For example, this is what my computer sends out when I click on the programming forum:

http://forums.anandtech.com/categories.aspx?catid=70

GET /categories.aspx?catid=70 HTTP/1.1
Host: forums.anandtech.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6


My cellphone, on the other hand, transmits:
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IE Mobile 6.12) T-Mobile Dash



This is one of the ways a mobile device can be detected.

I like m.domain.com as the URL for my mobile site. Do you think it is becoming more 'universal' to use m.domain.com? Or are more mobile users likely to try domain.com/m or mobile.domain.com/m or domain.com/mobile ?

You can have all requests to domain.com/m or domain.com/mobile redirected to m.domain.com. This is done on the server itself and requires no programming.

 

[edprush]

Originally posted by: George P Burdell

Every browser send out information while requesting a page. For example, this is what my computer sends out when I click on the programming forum:

http://forums.anandtech.com/categories.aspx?catid=70

GET /categories.aspx?catid=70 HTTP/1.1
Host: forums.anandtech.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6


My cellphone, on the other hand, transmits:
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IE Mobile 6.12) T-Mobile Dash



This is one of the ways a mobile device can be detected.

What type of programming/coding does my website need to be able to 'recognize' that it is being accessed by a mobile device?

 

[troytime]

Originally posted by: edprush

Originally posted by: George P Burdell

Every browser send out information while requesting a page. For example, this is what my computer sends out when I click on the programming forum:

http://forums.anandtech.com/categories.aspx?catid=70

GET /categories.aspx?catid=70 HTTP/1.1
Host: forums.anandtech.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6


My cellphone, on the other hand, transmits:
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IE Mobile 6.12) T-Mobile Dash



This is one of the ways a mobile device can be detected.

What type of programming/coding does my website need to be able to 'recognize' that it is being accessed by a mobile device?

php, asp, cold fusion, ruby, anything that you can interpret the user agent and http_accept data and use it to redirect to your mobile url.
the detection rules will need to be updated occassionaly

 

[edprush]

Originally posted by: troytime




php, asp, cold fusion, ruby, anything that you can interpret the user agent and http_accept data and use it to redirect to your mobile url.
the detection rules will need to be updated occassionaly

I meant to say, is there a script or something (that has the detection rules) that needs to be put in my website for it to recognize mobile users?

 

[George P Burdell]

Originally posted by: edprush

I meant to say, is there a script or something (that has the detection rules) that needs to be put in my website for it to recognize mobile users?

On web servers running Apache, you can edit your .htaccess file to do this. You'll have to look up Rewrite for this. Google for a HTTP_USER_AGENT list that corresponds to mobile devices (or simply apply the redirection to any User Agent that contains the word "mobile") and apply a rule like:

RewriteCond %{HTTP_USER_AGENT} *mobile*
RewriteRule ^/$ http://m.domain.com

I'm REALLY rusty at this, so the example will not be correct. It's just to illustrate one way of going about it.

 

[troytime]

Originally posted by: edprush

Originally posted by: troytime




php, asp, cold fusion, ruby, anything that you can interpret the user agent and http_accept data and use it to redirect to your mobile url.
the detection rules will need to be updated occassionaly

I meant to say, is there a script or something (that has the detection rules) that needs to be put in my website for it to recognize mobile users?

yes, there are scripts
let us know what your server can run, and we'll find some code for you

its best to keep it in the code and not in htaccess as some users will prefer to see your real site with their mobile phone. a mod rewrite will force mobile users to the mobile version (plus i'm not sure that all mobile agents will have 'mobile' in their agent signature)

 

[edprush]

My server runs Apache 1.3.34, Perl 5.8.7, PHP 4.4.2, mySQL. Does that help?

Maybe someone can point me to existing scripts (free or fee) that I could utilize?

Troytime, if mobile users aren't forced to go to the mobile version of the site how will they get to it when they access via their mobile device?

 

[troytime]

you can redirect them by default, but offer them a choice.
if they prefer to use the real site instead of the mobile version, they can click a link, set a cookie, stay on the real site

for scripts, this is the one i use
http://dev.mobi/node/472
i made some modifications though

you should make sure that HTTP_USER_AGENT and HTTP_ACCEPT are valid $_SERVER array keys before calling them.
you can do so by wrapping
if (key_exists('HTTP_USER_AGENT', $_SERVER)){}
around the appropriate code blocks

 

[edprush]

So does that script need to be updated frequently so it can recognize new mobile devices/browsers?

 

[troytime]

Originally posted by: edprush
So does that script need to be updated frequently so it can recognize new mobile devices/browsers?

does it need to be updated? yes

frequently, not really.

i had to update mine for the iphone, but in reality - it shouldn't change more than once every couple months (if that)

 

[edprush]

What type of modifications did you make to the http://dev.mobi/node/472 script?

 

[troytime]

i added to the lists of user agents (both the preg matching one and the array of 0,4 substrings

each area was wrapped with if(key_exists

code was made into a isMobile() function that returns true or false

i can paste the agent lists, but i can't post the function because the site its used on is pretty popular (and huge)

the first if statement
if(preg_match('/(up.browser|up.link|windows ce|iemobile|mmp|symbian|smartphone|midp|wap|phone|vodafone|o2|pocket|mobile|pda|psp)/i',strtolower($_SERVER['HTTP_USER_AGENT'])))

the array
$mobileAgents = array('acs-','alav','alca','amoi','audi','aste','avan','benq','bird','blac','blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno','ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-','maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-','newt','noki','opwv','palm','pana','pant','pdxg','phil','play','pluc','port','prox','qtek','qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar','sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-','tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp','wapr','webc','winw','winw','xda','xda-');

we also don't have the operamini if statement or the windows if statement

 

[edprush]

Originally posted by: troytime
.
.
.
.

Wow, I barely understand a single sentence in your post but thank you for trying to help me.

Hopefully I will be able to hire someone that understands how to do this for my website.

 

[edprush]

troytime, does http://dev.mobi/node/472 update their script periodically to include new mobile agents or would the script user responsible for that?