2007-12-27 by Jonathan Clarke - 0 Replies - 805 Views

Mobile Websites with Ruby on Rails 2.0

So seeing as I have had a bit of free time over the past day (30 minutes), in between my own job here in Dublin and helping my parents out in their bar over the holidays I've also been looking at creating a nice and minimalistic mobile site for beilabs.com.  It's not up and running yet but hopefully it will be shortly. 

As I won a nice new IPOD Touch last month I decided to put the mobile safari browser to some use and check to see how well rails looks on it.  Apparently there is a mac application designed for exactly this purpose called iPhoney but I prefer to use the real thing.  

Now there are quite a few ways that creating a mobile rails site can be accomplished however I went for the nice easy way and decided to just find out the users mime type. 


The Juicy Bits

First we add a helper method to application_helper.rb

app/helpers/application_helper.rb
# Request from an iPhone or iPod touch? (Mobile Safari user agent)
def iphone_user_agent?
request.env["HTTP_USER_AGENT"] && request.env["HTTP_USER_AGENT"][/(Mobile\/.+Safari)/]

This is vital to ensure future compatibility with apple hardware.  Bear in mind that this is a short term solution as there will be plenty of nice browsers on mobiles in the future such as Opera to name one.

So next in our view we can redirect them to an optimized website specifically for the iphone/itouch safari mobile browser

<% if iphone_user_agent? # Show message for iPhone users -%>
<div class="message">
<p>Using an iPhone? <a href="http://iphone.beilabs.com/">Use the optimized version</a>.</p>
</div>
<% end -%>end

Back to Reality

http://mobile.beilabs.com is not even up yet, it's barely a figment of my drunken imagination but it will be soon I hope.  Anyhow, I'm off to watch Kill Bill, I hope that gave some people a bit of an idea about how to make a rails mobile website.  Easy eh?  Yeah, it always looks that way.

Write a Comment

Name: * Required Field
Email: * Required Field
Website:
Non Robots Only:
simple_captcha.jpg