Being an avid iPhone user, and receiving a few requests for our site to support a mobile format, making a Coupon Search Webapp for the iPhone seemed like a no brainer!

Specification:
First we researched what was possible in a webapp and that is basically anything that can be rendered as a small web page in safari browser. Armed with this information we sat down and decided what we needed the webapp to do.

We decided that we needed the search form functionality, the search results and coupon display. It was also thought to be a great idea to redirect anyone using an iphone or ipod to be redirected to the iphone version of the site.

Implementation:
First cab off the rank was the redirect. After some research, javascript supports a userAgent matching function:

<script language=javascript>
<!--
if((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i)))
{
location.href='http://www.couponmeup.com/iphone/';
}
-->
</script>

We used this code to redirect the user to an alternative homepage which is designed specifically for the small screen.

Beyond our homepage, most of our site is dynamic and generated using PERL scripts and mysql databases. To lower the overhead of implementing basically a new site, we used some PERL code to detect the device the user is using and change the template which is displayed for the user.

my $userAgent = $ENV{"HTTP_USER_AGENT"};
if (($userAgent =~ m/iPhone/i)||($userAgent =~ m/iPod/i)||($iphone eq '1')) {

We also added a variable that can be specified on the command line to get the system to display an iPhone template when viewed in a normal browser which helped a lot in testing.

We then created templates for all of the required pages using the same variables that are available in our full templates and we are able to maintain a single set of code with two templates. This also easily allows us to create another version of the site for say Blackberry at a later date with minimal work.

We have now created a framework for mobile coupon browsing that should be easy to work with and expandable to a range of devices.

Want to see the end result? Visit CouponMeUp.com with your iPhone.