Awhile earlier, I explained the difference between an iPhone microsite and an iPhone web app. There are actually 3 distinct types of site that can be viewed on the iPhone, and I’d like to briefly clarify their differences.
iPhone Microsite
- Detects and reacts to iPhone visitors
- Delivers optimized version of media.
- Content can be dynamic or static
- Horizontal scrolling navigation – Pages load in user interface similar to native iPhone Applications
- Similar look and feel of iPhone applications
- Often exists as separate framework
iPhone Friendly
- Detects and reacts to iPhone visitors
- Sets viewport to maximize initial zoom
- May resize elements using CSS to provide iPhone friendly layout
- Configurable to provides support for other Mobile Platforms
- Pages load as separate pages similar to traditional website experience
- Exists as addition to normal website
- May simply be a special message or offer for iPhone visitors
- For iPhone and iPod touch users only
- Contains functional or application logic
- Performs a distinct singular function. i.e. a message board.
Web App
Once you understand the types of website available to mobile visitors, you can effectively determine which solution or combination is most logical for your requirements.
Full Screen Web Presentations
When the iPhone was first released, there was no App Store and no capabilities in the SDK to create native applications. Apple’s iPhone SDK was strictly for web application development for the first year. During that time, developers tried many techniques to enable full screen web browsing, though no one was successful. With the release of OS 2.1, support for full screen web applications was introduced.
This is achieved by using a special Meta tag that tells the iPhone this page is mobile web app capable.
| <meta name=”apple-mobile-web-app-capable” content=”yes” /> |
Once you have the Meta tag added to the head of your HTML page, the process to enable full screen support is as follows:
- Load the page in MobileSafari on your iPhone
- Hit the “+” button at the base of the Safari app
- Select the “Add to Home Screen” option
- Save the Page to your Home Screen
- Tap the icon that was just saved to your Home Screen
- The site should load in full screen without the MobileSafari Chrome.
It’s worth noting that links to external pages may be opened in the regular version of MobileSafari. Due to this, you may consider using technologies like AJAX or JavaScript to write data to your application without requesting an alternate page. This will likely be dictated by your program requirements. I’ll cover this topic in greater detail in a future article.
