I recently have been testing out mobile website design. Although there are some great free tools out there that automatically make a mobile website for you, I simply did not want THAT much content on my mobile site. I wanted a streamlined small interface with just my key services and phone links. PLUS I wanted the website files to reside on MY server, not over at Bing Local or over at Dudamobile.com.
I found a template at Dreamweaver to help me used JQuery to create a mobile website. You can check out the video and grab the files here. I was able to pretty easily customize the site and CSS, but really ran into a problem getting the site to show for mobile users.
Typically a “sniffing” script will be used to deliver content for mobile phones, but the scripts I found simply did not work. My Android smartphone still saw my desktop website. I found that the CSS declaration that identifies screen width and then redirects the used did not work for me, nor did several other php scripts. I ended up using a .htaccess redirect.
This is the code I used in the .htaccess file:
# mobile site redirection
RewriteCond %{HTTP_REFERER} !^http://(.*).mccordweb.com/.*$ [NC]
RewriteCond %{REQUEST_URI} !^/mobile/.*$
RewriteCond %{HTTP_USER_AGENT} “android|blackberry|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile” [NC]
RewriteRule ^(.*)$ /mobile/ [L,R=302]
This worked for me. You can check out my mobile site at http://www.mccordweb.com/mobile/ but you’ll only see if on your smartphone, don’t got there with your browser. Mine is still a work in progress, but something that I am testing.