How to optimize web applications for the iPhone

Some mobile devices can now render complex web pages almost as well as regular desktop browsers. Support for full XHML and JavaScript is growing fast: an example of such a device is the iPhone that was released in the US and that should come at the end of the year to Europe. If you are targeting this kind of devices, maybe your best option is to use regular web flows and web screens, this way reducing the overhead of maintaining two different sets of user interfaces.

Here are 2 tips for creating content for the iPhone in particular:

1 - In the case you want to resize the content so it’s displayed full screen, without the user needing to double-tap, you can add <meta name="viewport" content="width = 320" /> in the head of your pages. You can use the AddMetaTag action in the HTTPRequestHandler extension to do this.

2 – Events like onmouseover do not work although onclick should work fine when you tap on an element.

You can read more tips here on how to optimize web applications for iPhone.

Tiago Simões

I'm not offering, because I have no expertise, but it would be interesting if someone were tocome up with a solution optimized for iPhone/iPod/iPad websites that had all the right controls and screen layouts and javascripts crafted.

Any takers?
Hi Jeffrey,

We are aware of the need, and we do agree it would be interesting.

Let's see what news there are about this in the near future...


Paulo Tavares

It looks like news on this front was expected in the last few months, but it's August now and I haven't seen any specific announcements regarding the iPhone or specific targeting of other mobile smartphone platforms.  We are considering this platform for generating content targeted for mobile phone browsers across BlackBerry, iPhone, Android, and Web OS where we need tight control to optimize the aesthetic for each platform - are there any examples out there of using outsystems for this purpose?
Hey there!

I'm currently working on a project for the mobile web using the Outsystems Platform. I'm using version 4.2 and I found some difficulties when adapting the content to the mobile web... Anyway, I'm only using Javascript and a large amount of CSS to address this approach. I'll try to give you some clues and maybe point you in some directions.

So, first of all, I chose to write only one css that would work on all the platforms instead of making a different CSS for each mobile. If you try to make things different for each mobile browser, your application will easly become outdated as new platforms hit the market and the ones that already exist get updated.
This way, as browsers get updated and support CSS3, HTML5 and such, my application just gets better and better. That being said, currently, the browsers that render the application more efficiently are iPhone and Android (both use the Webkit rendering engine). I use some CSS3 properties like rounded corners and even some transitions. With these, I get some pretty awsome features that will become supported as browsers get updated. Despite this, the application also renders well even on IE Mobile(WM 6.1+)! Of course it doesn't render the rounded corners but except those, the application renders pretty much as I expected.

Practical tips (Learn more (a lot more) about the mobile web for iPhone...):
  • The viewport meta tag(all the mobile browsers I tested so far) : This meta tag allows the application to be displayed full size on the mobile browsers not requiring(or even allowing) the users to zoom in and out to read the information on the page. And this goes like: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
  • Web App Capable(iPhone/iPad only): This meta tag lets the iPhone know that your application can run in fullscreen if the users wants it. This one looks like this: <meta name="apple-mobile-web-app-capable" content="yes">
  • Status Bar Style(iPhone/iPad only): Oh... Apple even lets you decide the color of the status bar when your application runs in fullscreen: <meta name="apple-mobile-web-app-status-bar-style" content="black">
  • Icon(iPhone/iPad/Android? only): You can also set an icon to be presented on the home screen when the user wishes to add your website to their home screen. I read also that Android uses the "apple-touch-icon-precomposed" link tag but I falied to test it so far... The icons should be 114x114 for the iPhone and 72x72 for the iPad. To achieve this you need a link tag: <link rel="apple-touch-icon" href="/custom_icon.png"/>
  • Startup Image(iPhone/iPad only): Well, it would be nice to display a splash image while your page was loading, right? Sure, create a 320x460 image for the iPhone or 768x1004 for the iPad and there you go: <link rel="apple-touch-startup-image" href="/startup.png">
  • Please don't use tables: Tables can simplify your layout but they are heavy for the browser to render and possibly will be harder to render nicely cross-browser.
  • Fluid, fluid, fluid: Avoid as much as you can using fixed heights and widths, always try to use relative (% or em) sizes. This way, the applications keeps the good looks even if the user changes the device orientation and it helps rendering on the many many many different screen sizes.
Well, you've read about some of these features on the initial post but I tryed to update those.
My application is currently rendering well on iPhone(3, 3G and 4(simulator only)), Android(1.6 and 2.1), IE Mobile(WM 6.1+), Opera Mobile(10), Symbian OS(It's Webkit powered too...). I didn't test it on the Blackberry so far...

It was hard for me to get all those tags in the head element of the pages, so I used Javascript to dinamically generate those on the fly... Not such a good practice but it works. (I wish I could just write into the <head>...)

So, I try to keep the application as simple as possible and keep myself close to the standards instead of adapting the application for each device. It's working very well so far.

Happy mobile programming,
Pedro Magalhães