Yes, it’s true that all your Caspio web apps already work on the iPhone, but it’s great to offer mobile users an experience that is optimized for their device.
This guide shows you how you can create iPhone web apps that look as close to native iPhone apps as possible. No programming experience other than very basic HTML is required.
Note that by iPhone we also mean iPad. The two devices share the same browser and behave the same for our purposes. Additionally, the Android appears to operate iPhone web apps similarly.
If you haven’t already seen our sample forms and apps optimized for iPhone, point your iPhone browser to mobi.caspio.com and try out the different demos (inquiry form, CRM app, map mashup). If you like what you see, continue.
Pieces of the puzzle
You will need the following:
1. A Caspio Bridge account
If you are not a current Caspio user, sign up for a trial account now.
2. Mobile website template
We have utilized a modified version of iWebKit version 5.04 open source framework. Download the iPhone kit containing the modified framework and unzip it in a folder on your website. If you don’t have a mobile site yet, these files could be on the root of your site. Your mobile site could be on a new domain, or a folder in your current website. Either way, the files and its sub-folder structure should be unchanged and placed in its entirety on the root of your mobile web site or app.
3. A special Caspio style designed for iPhone
We have designed a simple Caspio style that for the most part gets traditional web styles out of the way so that the framework style can take over. There are two ways to get the style.
The first way is quick. It’s actually in the kit you download above and is called Caspio_iPhone_Style_beta_v_1.xml. In your Caspio Bridge account, go to the Styles section and click on the import button on the top toolbar. Point to the style file and import it into your account.
The second way is to open a support ticket and request the iPhone kit to be loaded into your account. The advantage of this option is that you get the style loaded into your account, plus all the demos that we have placed on mobi.caspio.com. Just make sure you have adequate DataPage slots in your account if you go with this option. The demo currently utilized 3 DataPages.
Deploying your apps to the site
This is actually very simple. Select your preferred page from the provided HTML sample pages and replace the existing deploy code with your own. Adjust the links if needed, as you’d do with any other web page.
Best practices to achieve optimal results
- Dedicated Mobile DataPages – You will need two versions of your DataPages, one for regular web sites and one for iPhone. This way, you can optimize the iPhone version to achieve the best experience without sacrificing the experience of web users.
- Apply iPhone Style – Make sure to apply the iPhone style to your iPhone DataPages.
- Move Labels to Top – To get the most out of the small iPhone screen, setup your forms and details pages in such a way that your field labels appear on top of the field instead of the default left position. To do this, enable Advanced options for your DataPage (on the first screen) and in the field configuration screen, click on the Section and select the Top positioning for labels. If you add a new field to your form, you must repeat this.
- List or Grid (No Tabular Results) – Search results in tabular view won’t look good on the iPhone. We suggest using List view, or at most, a two column grid view.
- Experiment and Share Feedback – We’d love to know how your projects are working out, so please post a link to your apps and share any improvements that you may make to the styles or other parts of the template.
We will be adding improvements and more samples to this blog, so check back often.
Feeling encouraged? Check out these other resources to get more out of your iPhone website:
Customer app examples:
We look forward to sharing real-world examples utilizing this kit.
The first of which is Caspio’s long-time valued customer, Diversified Business Communications Canada. They deployed a mobile app for conference session schedules in just 2 hours. See how they did it.
Please share your own examples by leaving a comment below!