Make Your Site Mobile Friendly in Under 5 Minutes
by Rick • Filed under Optimize • October 14, 2006
I recently started using my Nokia 9300 quite a bit to do some web surfing on the go. In fact, some may say I am addicted to the on-the-go web but what do they know? Anyway… since I am surfing on the GPRS network which is just around 56k (sometimes even upwards of 156k) I noticed how slowly my site loads on a mobile device. Also, Opera Mini (and other mobile browsers) load from left to right meaning that if you have a left rail full of stuff a mobile user will have to scroll through all of that before they can hit your content and then your right rail (unless you change the load order of course).
All of this got me thinking about how to quickly put together a mobile version of my blog, The Wannabe VC. An idea John had a while back seemed to be the perfect solution and it would take under 5 minutes to set up. Here is a quick tutorial on how to get your site mobile ready in under 5 minutes. Enjoy!
Set up the subdomain for your mobile site - I would recommend placing your mobile site at www.yourdomain.com/mobile as that is the “industry standard” from what I hear. Other popular methods are m.yourdomain.com (what Google uses) and mobile.yourdomain.com.
Create a stripped down version of your site on the new “mobile” domain you set up. Use BuzzBoost (under the “Publicize” tab) to create this. Head into the BuzzBoost set up tool and customize your output. Save those changes, grab the script that is automatically created for you and add it to the new mobile domain either via text document (which you can then upload to your server) or right in your ftp if your ftp allows you to edit files. The new file should be labeled index.html and it should be placed in the mobile subdomain. Your full mobile URL is now www.yourdomain.com/mobile/index.html (make sure you have the html and body tags set up in the doc of course otherwise the script won’t work properly). Save the new index file and then head over to your mobile site to see what you have done!
Important Note: If you are already using BuzzBoost as I do you will need to set up a “dummy” (it is just as smart as your other feed - this is just a figure of speach) version of your feed in your FeedBurner account if you want your mobile site to have different settings then your current BuzzBoost. You need to do this because if you were to go in and change the BuzzBoost settings they would cascade to all other uses of BuzzBoost. In my case, I only BuzzBoost that last two headlines for the cross promotion I do between the sites and I wanted to BuzzBoost the last 5 items in full content format for the mobile site.
To create a second version of your site for your mobile BuzzBoost you can simply burn your FeedBurner feed again inside of your account. I suggest naming the dummy feed YourName - Mobile. Once the dummy feed is burned you can go ahead and create your BuzzBoost code.
Set up a redirect that will forward all mobile devices to your new mobile optimized page - Insert the block of code below into your .htaccess file. This code will forward all mobile devices listed in the code to your mobile site. This code came from Pocket PC Thoughts where it did not include Opera Mini. You’ll notice I have added Opera Mini into the code below. It’s really simple to do that. All you need to do is figure out what the user agent for the particular application is and then add a new rewrite condition with the new user agent to the code. Wikipedia has a great list of user agents for your reference.
Note: Change the bold below to your schema. Also, where it is obvious the lines wrapped in order to fit in the site design you will want to keep that info on the line it is attached to when you place the code into the .htaccess file otherwise the code may break.
RewriteEngine On RewriteCond %{HTTP_USER_AGENT} “Windows CE” [NC,OR] #Windows CE and Pocket PC RewriteCond %{HTTP_USER_AGENT} “Opera Mini” [NC,OR] #Opera Mini RewriteCond %{HTTP_USER_AGENT} “NetFront” [NC,OR] #PalmSource WebBrowser 2.0 RewriteCond %{HTTP_USER_AGENT} “Palm OS” [NC,OR] #Eudora Web Browser for Palm RewriteCond %{HTTP_USER_AGENT} “Blazer” [NC,OR] #Handspring Blazer Browser RewriteCond %{HTTP_USER_AGENT} “Elaine” [NC,OR] #RIM Devices RewriteCond %{HTTP_USER_AGENT} “^WAP.*$” [NC,OR] #WAP Browsers RewriteCond %{HTTP_USER_AGENT} “Plucker” [NC,OR] #Plucker Offline download client RewriteCond %{HTTP_USER_AGENT} “AvantGo” [NC] #AvantGo Service RewriteRule ^index\.php http://www.yourdomain.com/mobile/index.html [L,R]Other options: You can also use javascript to do this type of redirection but I would highly recommend using the code above if it at all possible. The javascript version of the redirect seems to be less universal and reliable. Also, if you can’t access your htaccess file you should just begin to promote your mobile site on your regular site so mobile users can bookmark the mobile site.
You’re Mobile! - You can test your implementation by heading to the Opera Mini simulator. If you have done everything properly you should be able to type in your usual URL and Opera Mini will automatically resolve to the mobile optimized site you just created. I should note that it probably took you longer to read this article than it would to implement all of this so get to it. Help your mobile brethren out!
More Publisher Tips Await — Explore the archives »
