Present day viruses
There are a huge number of computer viruses in the world. To establish their exact number (along with all modifications and upgrades) no one is taken. Instead, it is customary…

Continue reading →

Creating an Effective Hero Image Image for a Website
Does the user only need 50 milliseconds to form an opinion on any site? Web developers and designers really have very little time to make a good impression on a…

Continue reading →

Effective B2B website designs for 2019
If you are producing a product / service that is in demand in a particular field and trying to create a suitable website that fully reflects your attitude to work,…

Continue reading →

Mailto – HTML

In order to somehow dilute the design theme, let’s look at another layout lesson today – a lot of time has passed since the previous post about CSS hover effects. This note will be devoted to the issue of creating a link to mail in html. All this is implemented using the usual A tag, which, despite its simplicity, can be used not only to create hyperlinks, but also has several interesting nuances.

The basic syntax looks like this:

<a href=”mailto:youremail@somesite.com”> write to us </a>
Here, as the href attribute, write the phrase mailto and the mail where you want to send the message. Inside the tag is the link text that the user will click on.

The problem with this design is not the best UI / UX solution for users, because clicking on a link performs actions that not everyone likes. It’s like with a PDF document when it immediately opens in the browser.

OPENING IN A NEW WINDOW
If one of the mail programs (Apple Mail, MS Outlook, etc.) is installed on the user computer as the application that works by default for the current task, then when you click on the mailto-link, the corresponding application will open with the new message created. And it doesn’t matter whether the attribute target = “_ blank” is indicated here (triggering in a new window) or not – the program always reacts the same.

When you use a web client for mail, for example, you specify Gmail as the base mail application in Chrome, then clicking on the link performs the same actions as in any other case – that is, without specifying the opening in a new window, you will simply be redirected immediately to Gmail (the current open page will disappear).

In principle, prescribing target = “_ blank” for all links on the site is the same controversial issue as disabling the right mouse click. But even if you are against this attribute as a whole, then at least for the link to the mail address it makes sense to do it.

<a href=”mailto:youremail@somesite.com” target=”_blank” rel=”noopener noreferrer”> write to us </a>
ADDITIONAL LETTER PARAMETERS
If you saw a chip somewhere, when you open a new letter, the message subject and even its contents are automatically entered there, then you should know that all this is easily done through the following additional parameters:

You can even use the mechanism of adding additional recipients (including hidden ones) – insert special variables CC (copy) and BCC (blind copy). Values ​​in these options are separated by commas, and the “&” symbol is placed between them.

LINK DESIGNER MAILTO
For beginners who still do not understand how to make a link to mail, we recommend that you look at the mailtolink.me service. It allows using a visually understandable interface to fill in all the necessary parameters of the message and get ready html mailto code at the output.

Mailto link builder
The only caveat that still needs to be tested is the input of Russian letters, the service converts them into certain characters. Perhaps it will be easier to create an English version of the link first, and then change the phrases in it.

CSS DECOR
In the article about underlining links and text with CSS, you could see many interesting tricks. Given that people do not particularly like surprises, there is an idea to highlight links to e-mail in some other way, distinguishable from ordinary ones. This, in principle, is logical, because clicks on them will give different results.

The first trick is to substitute the postal address itself directly as anchor:

<a href=”mailto:mymail@gmail.com”> mymail@gmail.com </a>
You can also optionally set the CSS style:

a [href ^ = “mailto:”] :: after {
content: “\ 2709”;
}
CSS design of mail links
This code applies to all A-tags, so if you need to highlight only a few, use the / id classes in addition.

IHATEMAILTO Plugin in CHROME / FIREFOX
For people whose functionality of this attribute is unrealistic annoying, the developers came up with a special extension for browsers – ihatemailto.com.

IHateMailto Plugin for Chrome and Firefox
Its functionality consists of two parts: firstly, the application blocks the traditional mechanism for triggering a mail link, and secondly, the email address itself is copied to the clipboard.

MAIL FORM
Another extravagant option for using the mailto link in html was proposed by the authors of the original article, which we translated today. As you know, the Form tag allows using the GET directive to redirect to an external URL, and a mailto link with the parameters entered in the form can act as this URL.
That is, this is such a simple alternative to sending mail through the feedback form, but without using PHP or modules of different CMS. It is clear that after a click you have to use one or another client to write a message, you just fill in its basic parameters: addressee, subject, etc.

Total We hope this small manual about creating a link to e-mail on the site you…

Enterprise VPN in plain language
Today, many who are interested in computer technology and communications have heard about such a popular technology as VPN. However, most of the articles describe subtle nuances of technology that…

...

How to choose an internet provider?
If you are reading this article, then most likely you cannot imagine life without the Internet. Perhaps the Internet is already connected to you, but the quality of the service…

...

What is CTA: Real Hypnosis in Selling Texts
Call To Action (CTA) or in another way a call to action, the target action is a way of concentrating the user's attention on the implementation of certain actions. This…

...

What is important for the internet user?
What is important for the internet user? Speed ​​and price? Aw, users! Speed, price and service are said by users. Support - the most literate pronounce weightily. You are at…

...