iPhone-Specific Templates for EPiServer CMS 5
|
Product version: |
EPiServer CMS 5 R2 |
|---|---|
|
Document version: |
1.0 |
|
Document last saved: |
03-10-2008 |
Introduction
This technical note contains functional and technical information about the iPhone templates. It also contains information regarding general Mobile Application Development. The iPhone package does not feature all the functions of the normal package. Implementations for them are shown in code but not used. This package is provided "as is" and is not supported. It is released with an EPiOpen License.
Table of Contents
Prerequisites
An EPiServer CMS license is required for the iPhone templates.
Configuration
Configuration of the templates has mainly to do with the multirendering section. See the readme file in the Multirendering folder. It requires you to add a few lines of code into web.config stating which UserAgent to look for and which folder to open. Safari on the iPhone has a UserAgent, which can uniquely be identified using the regular expression .*iPhone.*.
Sliding Effects
The sliding effects of a native iPhone are one of the neat features of it. They can especially be seen in the AppStore or in the Settings pane. We want to have the smoothness of the feature. Safari on the iPhone features WebKit capabilities. By stating WebKit transformations we can slide pages in and out. See my blog post about iPhone-specific EPiServer CMS Web sites for more information.
Menu
A major issue when working with smaller screens is what to do with all content. Having it slide in when you click a button is a nice and simple way. The Main and Sub Menu in EPiServer CMS is a good example of such an issue. For this template we show only a few menu options, but there is a sliding effect to get all Main Menu options.
Turning the iPhone
By using width set in percent we can easily make the flipped version of the page alter to the size. The issue with this is that it is often hard to calculate things in percent and some things always need to be a static metric. If you instead were to have set widths such as 320px, you would have to catch the turn of the iPhone using JavaScript and seeing device width.
Optimization
The iPhone’s Web browser Safari offers new capabilities for surfing the Web. A developer needs to realize that the Safari browser on the phone is not the same as on a Macbook. Your site needs to be scaled down in order to have satisfied costumers. 3G connections makes downloading the content faster, but rendering it is still dependent on Safari and it will be slower than on a regular computer.
