Take this with You

Need help allowing mobile users to take our site w/ them

[Propools]

I want to develop a mobile version of our site.

What might be the best way to do this and which tools should I use?

Is there a not so technical site that would show me what the general settings on mobile sites should be, etc.?

Also, What is the best script to use for detecting the mobile device, then redirecting them to our mobile site?

[Marshall]

In many cases, mobile versions are stripped down version of a regular site, fewer (and smaller) images, larger space between links for use with touch screen, and so forth. A good resource is Developing mobile sites [support.google.com]

As for the detection script to redirect visitors, I personally recommend you do not use one. It is better to give your visitors a choice by having a link at the top of your regular site saying something like "Mobile Friendly Version" and one on your mobile version saying "Full Site" rather than forcing them. Except for "dumb" phones, virtually all new smart phones can view a normal web page. The advantage is offering a mobile version is so they can use less bandwidth.

And remember, JavaScript and Flash are problematic on mobile devices, especially smart phones. I seem to recall that iPhone does not support Flash and Adobe has stopped trying to make a mobile friendly Flash version.

And if you do a web search, I know there are mobile friendly dynamic menus available that rely solely on CSS and are spaced for use with touch screens. I just put one on one of my sites and it is really nice.

Marshall

[Propools]

Thanks Marshall,
In creating this mobile version of the same site, I wonder what the parameters are?

Like what's the max width?

What is the correct font size?

What is the best font?
Etc.

[Propools]

Marshall,

What about this?

<script type="text/javascript">
<!--
if (screen.width <= 699) {document.location = "mobile.html";}
//-->
</script>
“mobile.html” is the page to be redirected to.

[Marshall]

Everything I have read about and seen on mobile designs usually have a screen width set to a maximum width of 480px. Also, usually a line or block height for links is around 40px to allow for, dare I say, fat fingers on a touch screen. As for fonts, I follow the rule of thumb that sans-serif fonts are better on screen while serif fonts are better for print. I also keep font sizes at defaults setting them at 1em or nothing at all. And tags like <h> can have a weird effect. Not all mobile devices support CSS well and even if you set your tags to a specific font size, it may be ignored.

I would still discourage you using an automatic redirection. However, when I need to use a script for mobile devices, I use .asp as most of my sites run on .asp. When possible, scripts are better server side.

Marshall

[Propools]

Great. Thanks for the tips Marshall.

Have you ever thought of or tried this in the .htaccess file?

RewriteEngine On
RewriteBase /
# Mobile redirect
# If desktop cookie is not equal to true - then process
# Prevents an endless loop
RewriteCond %{HTTP_COOKIE} !^.*desktop=true [NC]
#Only proceed if the host is www version (ignore on mobile site)
RewriteCond %{HTTP_HOST} ^www\.fullsite\.com$ [NC]
# if the browser accepts these mime-types, it's mobile device
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC,OR]
# Try different mobile user_agents
RewriteCond %{HTTP_USER_AGENT} "sony|symbian|nokia|samsung|mobile|windows ce|epoc|opera" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "mini|nitro|j2me|midp-|cldc-|netfront|mot|up\.browser|up\.link|audiovox"[NC,OR]
RewriteCond %{HTTP_USER_AGENT} "blackberry|ericsson,|panasonic|philips|sanyo|sharp|sie-"[NC,OR]
RewriteCond %{HTTP_USER_AGENT} "portalmmm|blazer|avantgo|danger|palm|series60|palmsource|pocketpc"[NC,OR]
RewriteCond %{HTTP_USER_AGENT} "rover|ipaq|au-mic,|alcatel|ericy|vodafone\/|wap1\.|wap2\.|"[NC]
RewriteCond %{HTTP_USER_AGENT} "smartphone|mobile|iPhone|android"[NC]

RewriteRule ^(.*)$ [m.fullsite.com...] [R=301]

[Marshall]

Since most of my sites are on a Windows IIS shared server, I can't use .htaccess, but I'll keep it in mind for those I can.

Marshall