Child Safety Online
Many users, even the most experienced, sometimes do not suspect that having protected themselves, they forget about their own children. They forget, especially when creating different accounts in the OS…

Continue reading →

Phone chats, a magazine with life hacks and more
The Internet has become so firmly entrenched in our lives that even those who started using it at a conscious age do not remember very firmly what we replaced this…

Continue reading →

5 examples of designer pain: the most common phrases coming from customers and clients
No matter how many years have passed, and TK for the designer always remains a topic of discussion. Yes, what! Everything can be perfectly painted: what kind of pictures, fonts,…

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…

5 examples of designer pain: the most common phrases coming from customers and clients
No matter how many years have passed, and TK for the designer always remains a topic of discussion. Yes, what! Everything can be perfectly painted: what kind of pictures, fonts,…

...

How to get more search visibility using other people's resources
Whatever niche you work in, there are probably dozens, hundreds, and even thousands of other sites of similar subjects. Some are your direct competitors, with others your interests overlap partially.…

...

Local Area Networks and the Internet
When a local area network is connected to the global Internet, one of the PCs, called a server, becomes a kind of conductor and connects to the Internet using a…

...

The ideal form of authorization - how to do it is not necessary
Recently, we posted a number of useful tips on creating effective registration forms on the site, and today we want to talk about the authorization / login block. Recently, a…

...