DEV Community: Marcos Rego

Best Email practices, tips and tricks

Marcos Rego — Mon, 10 Oct 2022 17:40:44 +0000

There are a lot of best practices that can improve email reputation, unfortunately many of them are initially overlooked or only implemented when problems arise.

That can bring serious problems on the long-run, specially when using a non business email service. So I’ll let you know some important ones for you to take into consideration…

When should you use a business email

If your business relies a lot on sending and receiving emails or combines regular emails with marketing services, it might be better to start using a business service immediately, such as Google or Zoho. It might seem costly initially but it’s safer for your reputation and security on the long-run.

Best practices for newsletters and transactional emails

Always use a specific service for newsletters and transactional emails, such as Mailchimp or Sendinblue.
Avoid using your main domain. Configure your services to use a subdomain and set the sender to something like noreply@email.yourdomain.tld.
Always add links for unsubscribe or manage preferences.
Example of how to avoid using the main domain and configure the sender using Sendinblue.

Best practices for sending regular emails

Use the Mail Tester platform when you write new messages, it will give you tips and tricks on how to improve them and avoid from falling into spam.

To use Mail Tester, grab an email that you will send to someone and send it to the email shown to you on https://www.mail-tester.com/.
After clicking to check the score, your test result will be shown. You can open each option to know more details on how to improve.

Some practices are:

Do not use for mass email sending.
Always include a subject.
Always add alt text attributes to your images.
Regular emails should not show HTML code, iframes or other embed content. That type of content should be sent as an attachment or via WeTransfer. You can use HTML only in newsletters.
Do not send messages only with a link or attachment, it should always have some regular text.
Messages should have a proper length. Avoid sending short texts that could be sent via chat, apps or sms.
Avoid typical subjects with certain keywords that can fall into spam such as “test”, “spam” and similar. Specially when unrelated to the message.

Best practices on email clients

Which email client should you use

By email clients I mean software and apps such as Mail, Thunderbird or Outlook.

Something to keep in mind for basic users is, the simplest the email client the less problems will occur when connecting to emails:

If you only need the basic features, check the client that comes with your device. Usually the basic is more than enough and many clients still give you features such as signatures.
If you need a set of advanced configurations and features for free I advice you to use Thunderbird.
If you need advanced configurations, advanced features and you are on a company, you can go with Microsoft 365 Outlook. But I usually advice against it, specially if you can’t update to the latest version for some reason, It’s the first to give problems. You might need a “tech guy” to help you out from time to time. Sometimes you might need some kind of compatibility with other software/service, that’s the only reason I understand the use of Outlook.

Incoming server: IMAP or POP?

To keep things simple, the best option usually is IMAP. When you delete emails they will also be deleted from the server by default and the emails will only be stored on your computer temporarily as you read them.

Troubleshooting connection problems on email clients

Not receiving emails? Always check the spam folder before moving to other types of troubleshooting. Add domains you trust to your whitelist and report as not spam if your client/webmail allows it.
Connection problems? First thing to always troubleshoot is to check the status of the server, some email providers have a specific place to report situations, Hostinger for example has this page for each of their services. A second thing to troubleshoot, is to access your email via webmail. If you can’t access via webmail, you will not be able to access via clients either. If this is the case, double-check the address and password. If they are correct, contact your host manager/provider (Is it me? Then this is the usual webmail access and you can contact me here).
Configuration problems? If your email client doesn’t have a field for the ports, add them to the incoming and outgoing server fields. Something like this: imap.hostinger.com*:993* smtp.hostinger.com*:465*
Unknown connection errors? If you have problems connecting and the error message is not clear, the fastest way to discover the problem is to check the logs. Depending of your email client, you might need to enable them first. If you can’t read the logs you might need help from an expert. Do you have a maintenance or support service with me? You can send the logs to me and I’ll try to help you out.
- Outlook logs
- Thunderbird logs
Hostinger is one of the many hosts providing emails. Including webmail access.

Best practices for domain records (advanced)

The Mail tester platform mentioned above, also gives great tips for domain records.
Regular emails usually have MX records but should also have TXT records for DKIM and DMARC.
MX Records should not have the same priority level.
MX Records per domain/subdomain should point to one unique service. Mass email services usually have alternative DNS Records.
For mass email and newsletters services such as Sendinblue. Always configure with all the steps given by the service, with all the DNS records.

I hope this practices, tips and tricks can help you as they helped me!

I’m not an email expert but I’ve been learning a lot of practices while working with my clients since 2014 and it’s a pleasure to share them with you now.

How to avoid (CLS) Layout Shift when using JS Components

Marcos Rego — Mon, 10 Oct 2022 17:31:58 +0000

When using components that are based on Javascript, you might notice a layout shift on your content (CLS), specially if you delay the start of Javascript in some way. On that situation, you’ll see the initial look of the elements until Javascript kicks in.

But of course, delaying javascript until user interaction or after some seconds it’s a good practice and a good trick to increase the score of a website on pagespeed insights. So the better option is to find ways to avoid layout shift, fortunately is not that complicated.

For this tutorial I’ll be focusing on Mr.Utils JS components, but the same logic applies to other tools.

Understand how general JS Components work

The way Mr.Utils javascript components work is by adding the necessary CSS inline properties to the element after page load, but only if the element doesn’t have a utility class that already uses some of those properties.

And as you might know, HTML classes don’t rely on Javascript to apply the style of CSS properties. We’ll use that fact to our benefit, to avoid the layout shift when delaying Javascript on this situation.

Fixing the Content Layout Shift

Fix CLS for components that add properties

Components such as Mr.Utils Swipe component add the following inline properties to the element:

display: -webkit-inline-box;
flex-wrap: unset !important;
overflow-x: scroll !important;
-webkit-overflow-scrolling: touch !important;
overflow-y: hidden;

But there’s one utility class that does the exact same thing, so all you need to do is to add the following utility class after adding the swipe class:

mr-horizontalscroll

If you are using Mr.Utils as a plugin: Instead of adding the class you can select the option at Misc > Scroll > Horizontal Scroll.

In the end, you’ll have the following classes on your element:

mr-swipe mr-horizontalscroll

By doing this, the properties will be added before javascript runs and you’ll be avoiding the layout shift, without losing the benefits of the swipe component (such as the ability to drag with a mouse).

Fix CLS for components that create new elements

Components such as Tabs and navigation options on Pagination (Radio, Arrows, Dropdown) add new elements to the page if those elements do not exist yet. So, the way to avoid layout shifting when Javascript starts on this situation, is to create the elements manually, let’s take a look at that:

If you want to use the exact same elements that Mr.Utils’ Javascript would create, you can use the below HTML Codes after the element (or before when using the proper class).

Pagination Arrows

<div class="mr-pagination">
<button class="mr-arrows mr-prev">⇦</button>
<button class="mr-arrows mr-next">⇨</button>
</div>

Pagination Radio Buttons

Duplicate the last “mr-radio” to match the number of pages.

<div class="mr-pagination">
<span class="mr-radios">
<input name="mr-radio" title="1/2" class="mr-radio" type="radio" value="1" checked="checked">
<input name="mr-radio" title="2/2" class="mr-radio" type="radio" value="2">
</span>
</div>

Pagination Dropdown

Duplicate the last “option” to match the number of pages.

<div class="mr-pagination">
<select class="mr-pageselect" title="/2">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>

Tabs

Duplicate the last “mr-tab” to match the number of pages.

<div class="mr-tabsnav mr-horizontalscroll">
<button class="mr-tab mr-active">Tab 01</button>
<button class="mr-tab">Tab 02</button>
</div>

If you want a bit more control or if you use site-builders, you can also create those new elements in a different way, as long as the main/parent element uses the class mr-pagination or mr-tabsnav.

If you are using Mr.Utils as a plugin on WordPress, you can use the block editor to create buttons for the Tabs component. Then, by selecting the buttons container, on Utilities choose Components > Tabs Navigation.

Live example of fixing Tabs CLS

A good example of this live is on Itemzero’s Shop, the tabs were created using the block editor and Mr.Utils.

Itemzero’s shop uses tabs from Mr.Utils components.

And that’s it! Those are some ways to avoid layout shift when using JS Components.