iPhone & iPod Touch

Click Here for Apple’s Recommendations

Use Standards

Freeway creates 100% standards compliant code*, so the first box is ticked without doing anything.

*Note that some third party Actions may invalidate the code on your pages. If you find an Action that does produce invalid code, then please make the author of the Action aware.

Follow Good Web Design Practices

The structure of the HTML that Freeway creates is industry-leading. We pride ourselves on the fact that Freeway produces clean, standards-compliant code every time you publish. Again, another tick without needing to do anything.

Page Sizes

Obviously, the iPhone has a smaller display than a desktop. It normally forces the viewport (the visible area of the page in the browser) to be a size that optimally displays websites designed for the desktop (980px wide).

This is only really of benefit if your site is 980px wide or slightly smaller. To assist you, we have made Freeway automatically set the viewport to the width of your website. This means that on the iPhone your pages will always be displayed with an optimal viewport, without you doing anything.

If for any reason you want to override Freeway’s automatic viewport settings you can do so (Freeway 5 Pro only). Simply use the Inspector palette page-by-page or the Document Setup dialog to set the default viewport for the whole site.

The scale limits (the amount iPhone users can scale the page up or down) can also be set in the same places as the Viewport.

Avoid Framesets

The iPhone doesn’t provide scroll bars, so framesets and scrollable areas of pages should be avoided whenever possible.

Framesets that have scrollable frames will be resized to fit in regions of the page and the scroll bars will be removed. Some frames will still be scrollable using the two-finger gesture but doing so is not considered to be user-friendly.

Use Columns and Blocks

Think of your site like a newspaper or magazine. Use blocks and columns for text, with images either inline (so the text runs around them) or in separate blocks.

To make text run around a graphic item in Freeway, you need to place the graphic in the run of text and align it appropriately. To do this double click inside your HTML item and choose Insert Graphic from the Insert menu. Once inserted, align the graphic to the left or right using the Align pulldown in the Inspector palette.

Having one column of text that is the width of the page makes for difficult reading (on any platform) so is best avoided. If you break-up the page into distinct areas, the user can easily double tap on the area they want to zoom in on and the iPhone will accurately detect the block or column the user wants to see.

Know the Resource Limits

The iPhone connects to the internet on the EDGE network, the 3G network (iPhone 3G only) or on Wi-Fi. For this reason it's a good idea to keep the quantity of data (the size of the page in kb) as low as possible.

Keep the number of slideshows, stacked images (used in Target/Trigger combinations) and unnecessary images down to a bare minimum.

Tile small background images efficiently by placing them in the Page background or HTML item backgrounds. Do not use large background images.

The limit for GIFs and PNGs is 1024px by 1024px. The limit for JPEGs is much larger but smaller is still better, particularly when these pages will be viewed over mobile connections.

Two pages with the same total size can have very different load times. Pages containing large numbers of smaller images will generally take longer to load than pages containing a smaller number of larger images (even if the total file size of their resources is the same).

You can see the size of your pages and their resources by selecting Show File Sizes from the cogwheel menu at the bottom of the Site Panel. After you publish your site, Freeway will show the sizes next to the pages in the Site Panel.

The Select Element

Certain HTML items will change their appearance to increase usability on the iPhone. The item that Apple highlights in their documentation is the Select element (known as a Menu/List in Freeway). If you add one of these to your pages, then the iPhone will designate half the screen to the options within the list, allowing for easy selection. Other types of items that change their appearance include Text Fields, Text Areas and QuickTime movies.

Unsupported Technologies

The following cannot be used in your designs as they are unsupported on the iPhone :

• Modal Dialogs - These are dialogs that take focus from the main window (the Ok or Cancel button on modal dialogs must be clicked before anything else can be done in the main Window). Don't use window.showModalDialog() or window.print() in JavaScript.
• Mouse-over events – The user cannot mouse over items on the iPhone (there is no mouse!); instead rollovers and similar will be triggered when tapped.
• Hover Styles – Again, the user cannot hover the mouse over items, the hover style will only be displayed if the user taps and holds on a clickable element with a hover style.
• Tooltips – Tooltips will only be displayed if the user taps and holds a clickable element with a tooltip.
• Java applets
• Flash
• SVG
• XSLT
• Plug-in Installation
• Custom x.509 certificates
• WML–Safari on iPhone is a fully fledged web browser that accepts the standard HTML types.
• File uploads and downloads–If your pages feature the <input type="file"> element (this is added through the Upload Stuff Action from http://www.freewayactions.com) it will be disabled by Safari on the iPhone.

Pop-up windows are blocked by default by Safari on the iPhone, though there is a preference to turn this off.

Testing your Site on the iPhone

You may be thinking, “This all sounds great but how can I test my sites on the iPhone if I don't have one!?”. The (free) iPhone SDK from Apple’s developer site has an iPhone simulator built in (Leopard-only). Go here to register, agree to the license and download it:

http://developer.apple.com/iphone/program/

Freeway will automatically detect the iPhone simulator when you hit the Update button in the Browser Setup menu (don't forget to add the new Preview in Browser toolbar button to the toolbar from the Customize Toolbar sheet). You can then preview your sites on the simulator directly from Freeway with just a couple of clicks**.

**Note that the simulator doesn't have the Google Maps or YouTube applications installed and it also doesn't allow any third party applications to be installed.

Specifying a Homescreen Icon for Web Clip

You can now use the bundled iPhone Homescreen Icon Action to add a Web Clip Icon to your pages. Similar to a favicon that appears in the browser address bar, it will appear on your iPhone/iPod Touch's home screen (iPhone 1.1.3 or later).

The Action can be applied to individual pages if you require separate icons for each page, or to Folders, which will include all pages in the folder. Just select the image you want to use (which must be a PNG) from the Image pulldown menu.

iPhone Application Links

There are a number of link types that can integrate with other iPhone applications in Safari on the iPhone. Examples of these are phone, mail, map and YouTube links - all of which can be easily created using Freeway.

Mail Links are the same as mail links in standard webpages. They use the mailto: protocol that tells the default mail application on the machine to open up a new message with the address used in the link in the “To:” field.

They look like this in Freeway’s hyperlink dialog:

Phone links are similar but instead initiate a call to the number specified. This is what it looks like in the Hyperlink dialog:

Safari on iPhone will automatically try and detect other numbers that look like telephone numbers and place tel: links on them. This can be turned off for the page by disabling the Automatic Number Detection checkbox in the Inspector palette.

Map links will open up the Google Maps application point to a destination or mark out a route between two destinations. You can use the Google Maps iPhone Link Action to easily create these. On machines other than iPhones the links will navigate to the Google Maps website with the details entered in the Action.

The Action allows you to create three types of links; a straight address lookup, directions from an origin to a destination, or a business in an area. Just enter details in the fields provided and test the results by previewing and following the link.

YouTube links will open up the YouTube application and play the movie you specify in the URL. Use the YouTube iPhone Link Action to create these. Like the Google Map link, on machines other than the iPhone the link will navigate to the specified movie on the YouTube website.

To use this Action, enter the video identifier or URL of the video you want to link to in the Action’s Video Identifier field.

Video Content

Only certain video file types and encodings at specific sizes can be played on the iPhone. To make things easier, Freeway ships with the QT Reference Movie Action that converts a movie into four separate movies: one designed to be played on the iPhone over the EDGE network, another over 3G or Wi-Fi, another on desktops with regular broadband connections, and a reference movie that links to all the previous movies.

When people visit your site, QuickTime will open the reference movie and decide which version of the movie to play to the visitors based on their network connection and device type. This ensures that your users will always get the best viewing experience possible.

QT Reference Movie Action

Note: You must first enable “Applescript in Actions” in the preferences found in the Freeway 5 (Pro or Express) menu.

To use the Action, import a QuickTime movie into an item by either dragging and dropping from the Finder, or importing using the Import option from the File menu. Apply the QT Reference Movie Action to the item.

The Action palette will contain 5 options:

iPhone (WiFi/3G) and iPhone (EDGE) - These are the two movies that will be played on the iPhone (not the simulator) depending on the network connection.

To make versions of the movie in the item that are optimized for viewing over these connections, hit the Generate button. Alternatively, select your own movies from the pulldown menus; WiFi/3G expects .M4V files and EDGE expects .3GP. You can use QuickTime Pro to export movies to the correct specifications.

Poster Frame - This option will show the first frame of the movie (poster frame) when your site is viewed. Alternatively, you can specify your own image to be used.

Message - This option is the message that will appear on a button on your poster frame. Leave this blank if you don’t want a button on your movie.

Font - This will determine the font-set of the message, and will be the same on all reference movies on that page. This is decided by the first movie (in the site panel, highest in the list of items on the page).

When you have selected all your options in the Actions palette, Freeway will generate the poster frame (if necessary) and reference movie automatically. Any options added through the QuickTime Extras Action or Extended Dialog will be respected. If no movies were selected in the iPhone (WiFi) or iPhone (EDGE) fields, the movie in the item will be used instead of the reference movie.

FLV Player Action

It can be very tricky to embed FLV (Flash Video) files into your webpages and they will never display on an iPhone. You need make sure you have a SWF file that either contains or references an external FLV and skin/player, and you need to make sure these are then uploaded to the correct directory location on your server.

Softpress’ new FLV Player Action is designed to handle all of this for you - all you need to do is draw an FLV Player Action item on the page, choose the FLV file on your machine and select either a pre-installed or other player from your machine.

The Action will also allow you to convert your FLVs into QuickTime reference movies so that your video to be seen on the iPhone, which normally doesn’t support Flash. Simply select the iPhone Compatibility option and generate a version for the iPhone’s Wi-Fi and/or EDGE connections Freeway will create a QuickTime Reference movie and display the appropriate file instead of the FLV on the iPhone or iPod Touch.

To use the Action:

• Choose FLV Player from the Actions toolbar pull-down or from the Insert menu, and draw an item on your page.
• Open the Action palette from the Window menu if it isn’t already open.
• Select your FLV file from the FLV File pull-down.
• Choose the Actionscript level you want. If you want to take advantage of the fullscreen option in Flash, then leave the option on its default If you have a custom player you will need to choose the level that is specified for the player.
• Choose the player from a pre-defined list or select your own. Note: the Action only supports standalone FLV Playback skins - some downloadable skins will require the movie to be self-contained, hence edited and embedded manually.
• If you require transparency to be used (the default background is white) then check the Transparency option. Note: this will incur a slight performance hit on the resulting page.
• Check the iPhone Compatibility option to display the fields that generate the iPhone compatible QuickTime files.
• If you already have your QuickTime movies for the iPhone, then select them from their respective pulldowns. Otherwise, click the Generate buttons to have Freeway automatically create them for you.
• If you would like to use a custom poster frame, then select it from the final pulldown, or leave this option on Automatic if you would like Freeway to use the first frame of the movie.