Build A Free Html Email Template In Less Than 60 Seconds

This blog post was updated on July 12, 2018. It was last updated in February 2017 & originally published in 2013.

Bạn đang xem: Build a free html email template in less than 60 seconds

With the popularity of mobile gmail and so many of our users asking about best practices for responsive emails, we’d lượt thích to help with a không tính phí responsive email template lớn get you up and running as fast as possible.

This template offers three different “layouts” that trigger based on the width of the screen. By mặc định, it supports 1-3 columns and as you trigger each media query conditional statement, it converts lớn a one-column layout for easy reading on sản phẩm điện thoại devices.

If you have sầu an Email on Acid subscription, you already have access lớn this template in our Resources section! Simply log in & navigate khổng lồ the resource center in the left navigation bar.

If you don’t have sầu a subscription, you can find the template here. Simply enter your tin nhắn và the tải về is không tính tiền.

Once you download the template and finish customizing it with your content, don’t forget lớn thử nghiệm the tin nhắn. Although we’ve sầu tested this kiến thiết, the smallest code change could break the email. Luckily, our platform shows you what your email looks lượt thích in more than 70 clients và devices. Sign up for our không tính phí trial & give sầu it a chạy thử today!

 

Download

Template Details

When developing this template, we researched the most comtháng device dimensions và ran a truyền thông media query test to lớn identify the device widths to target.

The breakpoints we’ve selected for this template are:

A width less than 480pxfor the iPhone and smaller smartphones.A width between 481px & 640pxfor medium-sized Android devicesA mặc định dimension of 580pxfor tablets, website, và desktop tin nhắn clients

What’s interesting about these dimensions is that the breakpoint for medium-sized handheld devices is greater than the real estate your email will get in most web and desktop tin nhắn clients. For that reason, the mặc định width for our template is phối to lớn 580px. This dimension is less than the truyền thông query dimensions that we used for medium-sized Mobile devices.

Xem thêm: Cách Tải Video Facebook Về Máy Tính Trên Mọi Trình Duyệt, Facebook Video Downloader

You can mix-and-match each section of this layout. Plus, we tried lớn make the template generic, as your email needs will likely change over time.

This template has been tested across most major gmail clients. But don’t take our word for it: Test it yourself today with our không lấy phí, seven-day trial.

 

How Did We Build the Responsive Template?

1. Media Queries

Here’s the entire style block:

We then used the ‘deviceWidth’ class on all tables and images throughout. This resets the width for each element based on the width of the thiết bị di động device. You could add more truyền thông queries if you want – feel không lấy phí kiểm tra out this blog post for more breakpoint ideas.

2. Floating Elements

The next challenge was creating floating elements that naturally staông chồng when there’s not enough room for them to lớn float. Floating elements for gmail is rather tricky because several gmail clients do not support the ‘float’ property. Instead, we used the ‘align’ attribute within table elements.

For example:

Simple enough, right? Yes and no. Using ‘left’ or ‘right’ align tables in Outlook 2007, 2010, & 2013, results in extra table padding. So, we recommkết thúc checking out this Outlook padding workaround for getting aligned tables khổng lồ match up perfectly. In the case of this template, we used percentage-based widths for each floating table & in some instances, we had to rely on the ‘’ fix.

Customize Away!

Feel không tính phí to lớn customize this template to fit your needs. You can keep the tin nhắn short và sweet for your di động readers by hiding some elements within your layout using truyền thông queries. Both the Android & the iOS tư vấn the display:none property.

Hopefully, this will save sầu you some time và găng tay when creating your next responsive email!

Don’t Forget to lớn Test!

We’ve sầu tested this template thoroughly và we trust it, but when you update it with your nội dung, you’ll need khổng lồ chạy thử it again. The smallest code change can have sầu massive sầu consequences in the world of email. That’s why E-Mail on Acid offers unlimited testing on more than 70 email clients and devices. Cheông xã out our không tính phí, seven-day trial and start testing your new template today.

Xem thêm: Buff Sub Là Gì? Lợi Ích Và Cách Buff Sub Buff Sub Tăng Follow, Hack Like Uy Tín

Test today!

If you’d lượt thích khổng lồ obtain rights to lớn use any of the fonts that were included in the artwork of our template, they are available for purchase online: Hvà Gothic, Thirsty Rough, Thirsty Script, Veneer.