Posted on Jul 08, 2009 - 09:07 AM

Recently at Relativity Communications, we changed our phone plans and this has led to us having the iPhone as our handset of choice. I was starting to have some issues with my old handset and Vodafone offered the iPhone at only AUD$20 a month more than what I was already paying. The deal came with a massive amount of phone time, data and the handset, so we went ahead.

iPhone and the internet

Previously I used my phone just for calls and used mobile broadband with my laptop catching up with work and emails on the go. Though now with the suite of applications available I’ve got another set of options and I’ve already used the maps, social networking, email and of course the calling features to advantage.

One of the features of the phone is the built in version of the Webkit based browser Safari. This gives you the ability to surf web pages over the 3G network and despite the small window you can use your thumb and forefinger to scale the site so you can enlarge parts of the screen.

Really though, this is a terrible way to view web pages. Fortunately there are ways to develop material that is purposely built for the iPhone. You could build an application for the phone or you could simply build an iPhone site.

We decided to build an iPhone version of our site and had some particular needs that we wanted to take care of:

• We wanted the content to come out of our existing content management system with the exact same entries being used in the majority of cases.
• We wanted a rapid development environment where we could repurpose the content quickly making the 1.0 version and then adding features and content over time.
• We wanted to make the first version simple though still representative of the service offering of Relativity Communications.

IUI

The framework kit for building a very basic iPhone site is called IUI, though any HTML/CSS/JavaScript can be built from the ground up as long as you understand Apple’s Browser and Phone kit and how they work together.

As you are building for Safari you can also use many Webkit codes and features for animations, styles and graphics. Our iPhone site uses some of these to mimic features of an application in a browser setting. There are also codes that the iPhone understands and you can use these to constrain the window size and hide overflow (the window is as wide as the phone only), block resize, horizontal/vertical orientation and the sliding effect of pages.

If we followed the IUI spec we would have ended up with a very ugly grey list based site with no reflection of our company branding or principals so we have hacked the interface to add a tabs menu at the top to mimic a normal web page and this removes having to click back 3 times. A problem of the basic interface.

I created a template group within our CMS software and this is where the iPhone site lives. It also allows us to use our CMS system to populate the iPhone site with content that already exists in the site. The idea being that when that content is updated it is updated in every area of the site where that content is shown including the iPhone.

IUI uses AJAX to slide the content into the page and essentially an iPhone site will consist of HTML/CSS for the visual look and feel and JavaScript to handle the transitions and effects with reference to the related CSS stylesheet.

Redirect

You can build a subdomain for your site ie iphone.relativitycommunications.com though we decided that we wanted iphone users to use the iPhone site and regular users to use the regular site. They are the same content, so that seemed logical.

Our site automatically redirects users of the iPhone to the iPhone based site by recognising their browser agent (‘iPhone’) and iPhone users are also tracked by Google Analytics.

To make sure that when users add the site to their iPhone home screen the brand is represented properly, we put an iPhone specific code in the site header and a graphic in our images folder online. If you add the site to home it uses this to create the home icon (see image) and not a snapshot of the site.

More features

As we continue to develop tools for clients and our website we’ll look at other features such as Login to the CMS and Mobile Blogging, Form Submission and Data Search all possible from the handset.

Virgil Reality. 

Back to News.

Enjoy this post? Share it with others. Click an icon.

Comments