Expanded Email Hyperlink 1.0

Taking a simple email link to a new level.

Expanded Email Hyperlink 1.0

Introduction

When I was crafting the Contact section of this site, I had decided I wanted a simple email hyperlink as well as a full web form to give users options to reach out. It had been a growing trend I’ve noticed in many websites, but I encountered an inspiring view of a simple email hyperlink from none other than Adham Dannaway.

On his site, he had his email link in the upper navigation show a tooltip the allows you to copy his email address into your clipboard upon clicking. One would wonder why he would do this, but it makes sense with how many handle email in the desktop/laptop space. Many users do not have their systems set to easily open and set up an email when you click on a mailto hyperlink, but it’s even more challenging when one uses a browser-based email like Gmail or Outlook.com.

Adham Dannaway's tooltip

Adham Dannaway’s tooltip

Development

Inspired, I wanted to do the same kind of setup for this site, but found one fatal flaw in Dannaway’s setup. When you open his website on a mobile device, you get the same exact experience. While it makes sense on a laptop, it’s not ideal for mobile, as these devices make it so easy to go from mailto click to your prefered email app.

I wanted a hyperlink that would show a tooltip on desktop/laptop, but yet act like a simple mailto link in the mobile space. One thought would be two hyperlinks that would appear and disappear based on screen width, but I felt this wasn’t ideal with WCAG compliance. I also found that using screen width media queries are not ideal in this scenario as one with their dekstop/laptop browser would get the mobile experience if they happen to have their browser too slim. Not to mention what experience would happen on a tablet then?

The best solution was to use actual mobile detection within JavaScript. I know some will say it’s not perfect, but in my eyes it was perfect enough to handle most cases of mobile versus desktop. I set up a function with an if-else scenario where on desktop/laptop, you use JavaScript to copy a piece of text (the email address in the hidden span), and then on mobile to “shut off” the tooltip and make the hyperlink behave like a mailto hyperlink. The tooltip itself is pure CSS.

Showing the different experiences between desktop and mobile

Results and Takeaways

I’m quite pleased with the results, as I tested it on several smartphones, tablets, and laptops and had no issue with the right experience appearing based on platform. Granted this seems like a lot for something so miniscule, but I can see thinking like like become handy for any kind of scenario when one needs a hyperlink differentiated between mobile and desktop. Hopefully we will one day see it easier to set a laptop or desktop so when you click a mailto hyperlink, it would open a browser, go to your email site of choice, and have things all set up and ready.