Mobile (iPhone/Android) Version Of Your Site

iphone_inhandapf

COLOR

You can directly control the color of the mobile (iPhone/Android) version of your site inside the APF Admin. Under site settings you will see a page for color and on that page a link to the iPhone/Android Color Settings:

iphonecolor

NOTE: If you do not have access to an iPhone or Android phone to check your color you can use the develop mode in Safari to see what it looks like. Here’s how:

1. Launch your Safari browser.

2. Under preferences go to advanced and check the box that says “Show Develop menu in menu bar.”

safaridevelop1

3. Visit your site.

4. Under the Develop menu select user agent then iPhone.

safaridevelop2

VIDEO

Because mobile phones have a limited screen size and bandwidth any videos you would like to appear on the iPhone/Android version of your site must be re-encoded and placed in a special folder on the server.

NOTE: If you don’t re-encode the videos the video tab simply does not show up and your website videos are not viewable on mobile devices (no big deal).

Here are the instructions:

Important: Video cannot have special characters (#,&) or spaces in the name. Must be named exactly the same as the video on your site except the extension will be different (.mp4).

Mobile encode settings:

video
file format: MP4
compression: h.264
data rate: 1000 kbps or less
frame rate: 24 (key frame 24)
optimized for: streaming (max packet size 1450 / 100 bites/ms)
size: 640 x 480 *preserve aspect ratio

audio
format: AAC-LC
data rate: 128 kbps
channels: Stereo
sample rate: 44.100 kHz

Newly encoded videos will be uploaded to the server using your ftp access (check your welcome email if you don’t have this). Inside the httpdocs folder (root) you will see a folder called videos_mobile. Place the videos inside that folder.

videos_mobile

UPDATE: The iPhone 3 (oldest version) does not support .mp4 files it only supports .mov with a supporting .m4v. If you want your video to play on the old iPhone 3 you will need to encode and add additional video files (3 total for each movie). Here’s how:
1. Open your video in Quicktime
2. Under File select “Export for web…”
3. Make sure in “Save as:” the video is named the same as all other versions (except the extension).
4. Check the Box iPhone next to “Export versions for:”
5. Export
6. Upload the .mov and the .m4v to the videos_mobile folder.

picture-1

Contact Form

If you are using a contact form on your site it will show up on the mobile version provided you checked the box to add it to the mobile (formerly html) version of your site.

addcontactform

Creating Pages For Phones Only

It’s possible some of the pages you’ve created for your website do not work well on mobile devices. We’ve created a simple work around solution that will allow you to block those pages on mobile and create new ones for mobile only.

On each page you want to remove from the mobile version of your site you will uncheck the box that says “show page in HTML version.”

For each page you wish to appear in the mobile version only you will check the box that says “show page in HTML version” and check the box that says “hide this page.”

pagespecific

Image Quality

We’ve tried to strike a balance between the quality of the mobile images and the speed at which they load. If you would like to load higher quality images you can go in and replace the images with your own. If you log onto the server using your ftp access inside the httpdocs folder you will see a folder called gallery (example above). Inside that you will see 6 folders containing the images for your site. The mobile site uses images from the medium folder. Use the images from the original folder to create new ones to your specifications (Note: image names must be the same and when you add new images to your site you will need to go in and replace those as well). Replace all the images in the Medium folder with your NEW higher quality images. Test.

If you need additional help submit a support ticket.