How to make a website footer: design options, why you need it, tips
Home »Web Design» How to make a footer of a site: design options, why it is needed, tips How to make a website footer: design options, why you need it,…

Continue reading →

Website promotion: how to get real results
After the work on SEO-optimization, the sales department was “cut off” by inappropriate calls. The contextual contractor regularly “masters” the budget, but there are no more applications. The PR man…

Continue reading →

How to make a website footer: design options, why you need it, tips
Home »Web Design» How to make a footer of a site: design options, why it is needed, tips How to make a website footer: design options, why you need it,…

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…

Vertical text direction in web design - good use cases
Home »Web Design» Typography »Vertical Text Direction in Web Design - Good Use Cases Vertical text direction in web design - good use cases Ordinary standard and template web projects…

...

Internet fraud
A proverb says: "Forewarned - means armed." Not listening to her is stupid. Nowadays, the Internet is playing an increasingly important role in people's lives, and is of undoubted benefit.…

...

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

...

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…

...