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

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 →

How to make a color palette for a site and not only
In Design Mania, there have already been several publications with similar topics: in a note about color matching services for websites, in addition to inspiration resources, we examined a couple…

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…

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

...

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…

...

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…

...

PPTP VPN
This protocol allows you to implement a secure point-to-point connection by creating a tunnel in an insecure network. The work of PPTP is to implement PPP frames in IP packets…

...