Creating the Ultimate Mobile Contact Page

To help you accomplish the most important goal in most mobile designs, you want to make sure it’s…

… easy to dial a phone number.

(It is a phone after all.)

The Apple iOS automatically recognizes phone numbers and makes them clickable (or should we say, ‘touchable’ links). When a user touches the link, a dialog box automatically opens on any iOS device making it easy to make a phone call.

But not all phones are as smart as the iPhone.

If you want to create a link that will place a call on any mobile device with phone capabilities, just add the tel protocol to the URL like this:
<a href=”tel://+12121234567″>Get in Touch</a>

Send an e-mail

When a visitor to your site clicks a link with this special code, an e-mail is automatically started with the e-mail program your visitors have set up on their mobile phones or other devices.

<a href=”mailto:janine@DigitalFamily.com?subject=Love your book”>Email Janine</a>

Note: You can automatically include a subject line with any email link – a great way to save your iPhone users having to enter it on a small keypad. As you see in this code example, we added a question mark followed by subject= followed by the text we want to use in the subject line of any messages that are sent to us from the site.

When you include a subject line in an e-mail like this, the subject automatically appears in the new message as it’s created.

Initiate a FaceTime session with video

FaceTime is a video chat service offered to iPhone and iPad users. With a FaceTime link, your visitors can start a FaceTime video call to your computer, iPad2, iPod touch, or iPhone 4 directly from your web page.

You can create a FaceTime link to a phone number or an e-mail address. Use a phone number if you want to initiate a FaceTime call to an iPhone 4 or later.

To call an iPad, an iPod touch, or a Mac computer, use an e-mail address.

Here’s an example of the code for a FaceTime link with a phone number:
<a href=”facetime:+12121234567″>
Here’s an example of the code for a FaceTime link with an e-mail address:

<a href=”facetime:mark@jellyrancher.com”>

Save your phone bill with mobile Skype calls

If you have a Skype account, you can use the following code to add a link that will automatically trigger a call via Skype:

<a href=”skype:YourSkypeName?call”>Call me on Skype</a>

Note: In place of the text YourSkypeName, in the code example, make sure to include your exact Skype name with no spaces. The question mark (?) followed by the word call indicates that the link will initiate a call via Skype.

Offer directions to your location

To create a link to a map to your restaurant, office, paint ball shop, or anywhere else you want your visitors to be able to find, follow these steps:

1. Point your browser to http://maps.google.com.
2. Enter the address you want the map to lead to and click the Search Maps button.
3. Copy the link to the page and include it in a link tag, as shown in the following example:

<a href=”http://maps.google.com/ADD-Your-Link-HERE”> Show this location on a Google Map</a>

Scan a 2D barcode to automatically add more information (for the iPad only, as you discover in the section “Adding 2D barcodes,” later in this chapter).