Email Addresses and Telephone Numbers on the Web

Lync screen with telephone number pad

Email links and telephone links in a website only work properly if the system the user is on has a default phone or email service. A mobile phone almost certainly does. However a tablet user may not be able to make calls. And a student on a lab computer probably does not have access to either phone OR email through that computer. So although a clickable phone or email on a website may not be usable by all your users, it will be increasingly available to many of your users.

Mobile devices are an increasing large percentage of our users. And now, as we transition to Office365 and Lync phones on the WWU campus, even our desktop users can make phone calls from a webpage.

So - how do we put clickable email and telephone numbers on our webpages?

Email

Email addresses on webpages are pretty standard, but in case you wondered how to do it, here we go.

The first method provides the user with the human-readable email address, which is useful to those who will need to write it down for later, as with: webhelp@wwu.edu

Code for this is:

<a href="mailto:webhelp@wwu.edu">
                    webhelp@wwu.edu</a>

The second method is to provide the user with the text explaining who the email goes to. If the user wants to write down the email address for later then will have to hover over the email and it should appear in the bottom left of the webpage. This would look like this: WebTech Help Line

And the Code for this is:

 <a href="mailto:webhelp@wwu.edu">
                    WebTech Help Line</a>

At WebTech we prefer the second method slightly.

In Dreamweaver you just highlight the text phrase that you want to use, then select Insert > Email Link and input the email address you wish to use.

Telephone Numbers

Telephone numbers are very similar, but have a few special characteristics. First of all the phone number has to include the international code (which is "1" for the US) and of course the area code. Then instead of having the "mailto:" part of the link you replace this with "tel:+" . Therefore the code ends up as:

<a href="tel:+13606506355">
      Call us at 360.650.6355</a>

Which looks like this: Call Marie at 360.650.6355

Advanced

If you want to get fancy there are some special characters you can employ within the phone number:

p creates a one-second pause in the dialing sequence, perhaps before an extension

<a href="tel:+13606506355p1111">
      Call us at 360.650.6355 ext 1111</a>

w means wait-for-dial-tone

<a href="tel:+w13606506355">
      Call us at 360.650.6355</a>