views:

144

answers:

3

I have a main site and a mobile site, and am looking at having Apache redirect users based on their reported user-agent as the next step up in providing a better mobile experience. E.g. a user who visits http://jonathanscorner.com/spectacles/ is redirected to http://jonathanscorner.mobi/?url=/spectacles/. At present what I have tried in my httpd.conf does not seem to have effect on my iPhone; what I had tried was:

    RewriteCond %{HTTP_USER_AGENT} (andriod|avantgo|blackberry|blazer|elaine
|hiptop|iphone|ipod|kindle|midp|mmp|mobile|nokia|o2|opera.mini|opera.mobile|palm
|pda|plucker|pocket|psp|smartphone|symbian|treo|up.browser|up.link|vodaphone|wap
|windows.ce;.iemobile;|windows.ce;.ppc;|windows.ce;.smartphone;|ziino) [NC]
    RewriteRule (.*) http://jonathanscorner.mobi/?url=$1 [R=302,L]

with an eye to changing to a 301 when things were working nicely.

The immediate question I have is why this is not redirecting http://jonathanscorner.com/spectacles/ when I visit with my iPhone (and what I can do to easily bounce mobile phone users to the mobile site); my broader question is what small steps I can take to improve visiting experience for mobile users. The main site has some real artistry in a graphic-heavy design; the mobile site is meant to provide a light touch with e.g. one small network hit per page.

+1  A: 

Looks like your user-agent strings are missing something, maybe these links could help you.

http://www.mattcutts.com/blog/iphone-user-agent/ http://www.gtrifonov.com/blog/2009/04/08/IPhone_User_Agent_Strings.aspx

Philippe
They contain the string "iPhone". Should RewriteCond ... (...|iphone|...) [NC] not match as a case-insensitive match? If my iPhone is giving "iPhone" in its user-agent string, and the condition is not matching, then there's something I'm missing about how Apache works.
JonathanHayward
A: 

http://deviceatlas.com/

This page got the best base of mobile user agents on the net. It also has APIs to work with the different UAs. Maybe it's of some use for you?

BTW; the developer version is free, but if you are serious about it, the small fee for the professional version should be well worth it.

cwap
A: 

After looking around, automagically adapting user-agent strings from WURFL and seeing redirection activate for FF, I opted for something with a little less magic and danger of bouncing a desktop user to the mobile site.

You can see the result at http://JonathansCorner.com/ on the home page: just a link at the top of the page that says "Mobile-friendly site" and shows up on most mobile usage but not most desktop usage. This is nowhere near perfect, but it is a modest improvement. (And, AFAICT, it doesn't have stuff that search engine spiders will interpret as text shown to search engines but hidden from regular users, which is penalized as blackhat SEO.)

How I did it: Following http://www.alistapart.com/articles/return-of-the-mobile-stylesheet, I set my main stylesheet to not display divs of type mobile_notice. This is countermanded in a mobile stylesheet that catches iPhones. From the page header:

<pre>
<link rel="stylesheet" href="/include/style.cgi" type="text/css" />
<link rel="stylesheet" href="/include/mobile.css" type="text/css"
media="handheld" />
<link rel="stylesheet" href="/include/mobile.css" type="text/css"
media="only screen and (max-device width: 480px)" />
</pre>

Most of the browsers that don't use JavaScript are not wizards using NoScript or the like; they are less capable mobile browsers, probably the ones which need the simplified mobile site the most:

<pre>
<noscript><h1><a href="http://JonathansCorner.mobi/"&gt;Mobile-friendly
version</a></h1></noscript>
</pre>

And, without search-engine-penalized text that appears to be spider food hidden from the general public, I add a nice, deprecated document.write() so phones with more capable browsers will see a div that displays on mobile phones only.

<pre>
<script>
document.write("<div class='mobile_notice'><h1><a href='http://JonathansCorner.mobi/'&gt;Mobile-friendly version</a></h1></div>");
</script>
</pre>

Net effect? A modest improvement; on mobile devices there is an invitation to use the mobile site, but visitors can stay on the full web main site if the want. And it avoids stuff that is penalized by search engines.

There is room for improvement--in particular, this does nothing for visitors who enter someplace else than the home page and don't stay around long enough to see this invitation. But I think it's a real improvement.

JonathanHayward