Friday, 15 August 2014

Responsive Mobile Dialer with CSS3

These days web design is all about responsiveness. It's basically a fancy word for a site which 'reacts' dynamically to be optimised for different screen sizes. This means that it will display content which has been specifically designed with a device in mind. 
One thing traditional responsive techniques don't do natively is deal with phone numbers properly. What do I mean by this? Lets say your'e looking at website on your phone and you see a phone number, currently you'd have to copy and paste the number into the dialer. 

What I'm going to do today is show a responsive way to deal with phone numbers. Using the tel prefix with a little CSS and HTML we'll get the dialer showing up for mobile only. For the sake of this blog i'll just keep it very simple and start with a basic HTML page.
First we'll build our code:


01234 567 890
01234 567 890

and our CSS:
#phone-number{
 color: #FFF;
 float: right;
 text-align: center;
 font-size: 18pt;
 margin: 5px;
 font-family: arial;
 text-shadow: 2px 2px 2px #000;
}
#telnum{
 display:none;
}
What we have here is some basic styling to the container and the tel anchor element hidden away as default as we are going to optimise for desktop as a default. Your number should look like this one:
The next step is to make this responsive for mobile devices. As these tend to have much smaller screen sizes we shall use CSS media queries to detect the change in browser size. The code below listens for the browsers width and while it is below 767 pixels it implements the CSS contained within it's parenthesis.
@media (max-width: 767px) {
 #normnum{
  display:none;
 }
 #telnum{
  text-decoration: none;
  color: inherit;
  cursor: text;
  display:block;
 }
 
}
This very simply hide the normnum div and shows the telnum anchor text. As you can see from the image below:
You can see that while my mouse was hovered over the anchor text it showed the href destination. In Chrome this isn't an issue as you can click on it and nothing happens. However some other browsers treat the link as normal and attempt to navigate to the page. This creates errors which is why we use the media query to hide the link so it is not clicked by accident.
Lets view this on a mobile device and see what the results are, first Android: