Taking a simple email link to a new level.
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.
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?
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.