Olson’s Observations

Technology. Innovation. Science. VC. Media. :: by Eric Olson

Get Your Site Mobile in Under 5 Minutes

with 10 comments

Nokia 9300I 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? Anyways… since I am surfing on the GPRS network which is just around 56k I noticed how slow 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.

All of this got me thinking about how to quickly put together a mobile version of The Wannabe VC and VentureWeek. 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!

1. 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.

2. Create a stripped down version of your site on the new “mobile” domain you set up - This is super easy if you are a FeedBurner user as you can just use BuzzBoost (under the “Publicize” tab) to create your mobile site. 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 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.

3. 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 my 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.

4. 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!

Written by Eric Olson

July 30th, 2006 at 3:32 pm

Posted in Technology, Tutorials

10 Responses to 'Get Your Site Mobile in Under 5 Minutes'

Subscribe to comments with RSS or TrackBack to 'Get Your Site Mobile in Under 5 Minutes'.

  1. I am going to give this a whirl since my blog has the left rail which loads first on a mobile device and pushs my content down quite a bit. I’ll let you know how it goes.

    Frank Gruber

    30 Jul 06 at 4:06 pm

  2. Get Your Site Mobile in Under 5 Minutes…

    Quickly create a mobile version of your site. Also covers redirects….

    Anonymous

    30 Jul 06 at 5:08 pm

  3. Impressive! Not bad for a “business guy” :-)

    It’s worth noting here that mobile browsers (and other low-fi user agents) read your page in source order, not necessarily left to right. So if you order your markup properly and keep the inline images and remote scripts to a minimum, you should be able to get away with using your regular site as your “mobile” version.

    John Zeratsky

    30 Jul 06 at 7:51 pm

  4. here’s a faster/better way. just redirect to http://mobile.feedburner.com/~proxy?u=http://feeds.feedburner.com/thewannabevc&d=xhtml

    this throws an xhtml stylesheet on your feed.

    this won’t work from a pc browser, but the mobile browsers should deal with it just fine.

    this just needs to be part of BrowserFriendly eventually.

    steve

    30 Jul 06 at 11:10 pm

  5. I think Eric and I were drinking the same water this weekend…

    Live Music Blog goes mobile.

    Justin

    31 Jul 06 at 6:41 am

  6. Thanks for all the great info guys. Much appreciated! I didn’t realize that source order was causing the issue for my mini browser and I didn’t think of the FeedBurner mobile server while doing this.

    As for Justin’s note - had the post nearly done when I saw yours come up but after all the work I had done on both figuring out the mobile redirects (i.e. javascript vs. htaccess and which works better) and writing the post I still had to put it up. Plus, my post contain numerious things to watch out for that I don’t believe you had in yours so I figured that it could be useful to folks. :-)

    Eric

    31 Jul 06 at 8:22 am

  7. If the makers of the mobile browsers would just make their products use the handheld media type standard they would make life a lot easier for everyone. Thanks for the great how to.

    Brian

    27 Sep 06 at 9:14 am

  8. Is Your Site Mobile Ready?…

    Is your site mobile ready? .mobi has launched, ready .mobi, a mobile-readiness test to help site owners. You simply put in your URL and using industry best practices standards you find out if the site is mobile ready. Unfortunately, Somewhat…

    Somewhat Frank

    5 Mar 07 at 6:19 pm

  9. [...] Olson previously wrote a piece explaining how to setup a mobile version of your site leveraging the FeedBurner BuzzBoost feature and simple server level http redirects. This method [...]

  10. Check out wurfl for an extensive open database of wireless browsers and capabilities. http://wurfl.sourceforge.net

    Tech World

    19 Jul 07 at 12:16 am

Leave a Reply