Have you ever visited a website on your phone and tried to call a phone number, but because of the formatting it doesn’t work? In this tutorial I will show you how to make your contact details mobile phone friendly including the address, phone number and email.

Street Address

There a few different options available here and after testing on various devices I have found that using a Google Maps link to be the best option as both iPhone and Android will intercept this link and prompt the user to choose to view on Google Maps or the internet (or other Map App). The other options I trialled included Embedding a Google Map and using the Geo prefix in link. The issue with embedding the Google Map is you’re not giving the user the freedom to use the map App of their choice and it also takes up screen real estate which you may not want to use. The issue with the Geo prefix is that is currently not very supported. It worked on Android but not iPhone, making it fairly useless for mobile.

Linking to the address to Google Maps
Simple go to maps.google.com, find the address, press the link icon in the top right and copy the Google maps link. Add this link to your address or a view on map link like so:

<a href="http://maps.google.com.au/maps?q=melbourne+gpo&ll=-37.813547,144.963613&spn=0.0099,0.026157&oe=utf-8&client=firefox-a&fb=1&gl=au&hq=gpo&hnear=0x6ad642af0f11fd81:0x5045675218ce7e0,Melbourne+VIC&cid=0,0,16491477996227855296&t=m&z=16&vpsrc=0&iwloc=A">Melbourne GPO</a>

Embedding a Google Map
To embed a Google Map you need to go to maps.google.com, find the address and then press the embed icon in the top right. This time select the iframe code and paste this into your website.

Use the geo prefix in your link
Simple add the ‘geo:’ prefix follow by the longitude and latitude like so:

<a href="geo:-37,45">location</a>

Phone Number

To make a phone number or text call simply include the ‘tel:’ prefix in your link, making sure you remove any spaces, + signs or special characters.

<a href="tel:0395075301">Call us</a>

Note: Using this style link will not work on non-mobile browsers.

Email Tag

We’ve all been doing this on for a long time and is common practice but here it is again to remind us all.

<a href="mailto:info@yourdomain.com.au">Email us</a>

Why not help the user out a little and add the subject line in for them too, like so:

<a href="mailto:info@yourdomain.com.au?subject=Enquiry">Email us</a>