17th November 2011

Mobile Friendly Contact Details

Guides By 5 years ago

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 your 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 link 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>
Recommended Posts

Write JNI wrappers for Android

Post by 5 years ago

Following are the steps that you need to follow┬áin order to make things working – 1. Setting up the NDK on my machine 2. Learn how to write JNI wrappers 3. Learn C++ briefly so

Got an idea?

We help entrepreneurs, organizations and established brands from around
the country bring ideas to life. We would love to hear from you!