Turbologo - an online service for creating logos
For a company, a company logo is not just an element of style. This, in fact, is its business card on the market, which stands out among competitors. A well-thought-out…

Continue reading →

Destination of proxies and NAT
A proxy server is designed to mediate between a workstation and a worldwide network. The proxy computer passes user requests through itself and then returns the results received from Inetrnet.…

Continue reading →

The allowable marginal cost of the targeted action of the visitor on the site.
Website performance is measured not by the site’s position in the TOP, and not by the number of visitors, although most often site owners track and pay for these metrics.…

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…

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…

...

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,…

...

Self-creating a graphic logo - step by step instructions
In this informative post, I would like to consider all aspects of creating a company logo - the most important element of a modern identity / brand. The lesson will…

...

Personal Data Security
What is personal information and why does the state develop entire laws designed to protect such data? Imagine that you are making an order online. In the process of forming…

...