The year is 2017 so by now you know what a hyperlink is however with the growing popularity of mobile devices for internet use you should really look into optimising your website for smartphones and tablets. I can hear you thinking "this sounds expensive"... right? Wrong!
Granted, redesigning your entire website to be responsive on all devices can be pricey, however there are a few little things you can do to make your customers' life a lot easier and in this blog post I am going to spill the beans on one of those things... Telephone Anchors.
If you're not following up to now dont worry, anchors are simply the technical term (in HTML speak) for hyperlinks and are a protocol used to link one item to another whether that is to a new page, a position on the same page or even to open another application on your device.
Not the boring bit is out of the way lets dive into how we code such practices. The below is a snippet of HTML that can be added to any site.
<a href="tel:+447929671741">Call us</a>
Yep, it's that simple!
Now when you hit that hyperlink on a mobile device capable of making telephone calls you should receive a prompt confirming you want to call the number (depending on your device) - see this blog post picture as an example.
- Where you see the words "call us" this can be be replaced with any string of text or numbers.
- Be careful with the telephone number - you should avoid using spaces (even though most devices will allow spaces) and always use country codes (think global!).
- If using PHP or equivalent to build your site consider creating a global variable and reuse the same variable for consistency and in the event of a phone number change you only have to update one place. See PHP example below for clarity.
// PHP for global variables file <?php global $contactNo1; global $telLink; $contactNo1 = "07929671741"; // note backslashes to escape the double quotes $telLink = "<a href=\"tel:" . $contactNo1 . "\">$contactNo1</a>"; ?> // Your web page <?php global $telLink; ?> <html> <div> <p>You can call us on <?php echo $telLink; ?> </p> </div> </html>