![]() Your email layout should encourage the viewer to keep reading. Use a design that guides the eyes downward. Look for on-brand images that fit with your brand identity as well as the overall color scheme of your email. Include descriptive alt text in case images break or your reader is using a program for people with visual impairment.Īnimated GIFs can add extra spice to your messaging, but keep in mind that too much movement can create loading issues or be distracting. Images for emails rarely need to be wider than 800 pixels. Use web-optimized images that load quickly. This will ensure that your content doesn’t feel crowded or overwhelming and helps emphasize important elements. Text should be broken down into larger headlines and grouped with small digestible chunks.ĭon’t neglect white space, or areas that are empty except for a simple background color. ![]() Use designs that a developer can build and modify with HTML to carefully curate content, so it shows up well on multiple email platforms. Your audience is likely pressed for time, so make sure that your emails are clear, concise, and easy to read from a design standpoint. This allows you to create a content hierarchy with opportunities for clever calls to action, to boost customer engagement. There are also hybrid layouts that more resemble a blog post or other piece of content, with a featured story on top, leading into a multi-column layout at the bottom. Separating content into two to three columns arranges it in a logical, grid-like structure. Many email campaigns use a multi-column layout. With good design, you can streamline your message to increase click-through rates and inspire action.Ī great place to start your email design is by tapping into current design trends to find inspiration. Strategically structured email content makes it clear to the reader what you want them to do. Explore some best practices for both, along with good examples and tools that you can use to improve your overall email strategy.Īlmost 40 percent of emails are viewed for about eight seconds or fewer, so it’s essential to make it quick and easy for readers to see what’s important about your message. Emails need a compelling harmony of copy, design, and must-click CTAs. We’ll need to strip some inherent styling from the document in order to use up the full client or browser window as our canvas.Email is an important way to communicate with an audience and it’s crucial to get the design right. The HTML email body or tag in our HTML email document is the start of setting up our document’s appearance in email clients and web browsers. If you plan to have your HTML Email Template display on the web, it’s a good idea to include a title tag for the user to see and for the page to be bookmarked in a users browser. Learn more about Dark Mode in HTML Email here. The last set of meta tags included in the head of the document is for dark mode which lets dark mode compatible email clients and web browsers know that it can choose from the light or dark version of the template based on the user’s preference. Next we’ll control the layout on mobile browsers and to make it so the scale is set to the zoom of 1 or 100% when the email template is seen on mobile: Now we’ll add a compatibility meta tag for the rendering of Internet Explorer and Microsoft Edge web browsers: The header includes meta tags, which are similar to those used in the latest web development practices, to tell the browser or email client how we want our content to display.įirst we’ll declare the character set of the document which is “UTF 8” or the standard character set for numbers and letters on the internet (and in email). Now that we have our doctype sorted out, let’s direct our focus to the header of the HTML document. Here is the complete document type HTML with the xml namespace link included for the xlmns attribute in addition to language english: Some may argue that the HTML5 doctype is OK to use for email, but the best testing service for email designs (Litmus & Email On Acid) still recommend XHTML Email Doc type as it allows for proper rending on all email clients. In HTML email, the simple answer to “what is the best email doctype?” is whichever one works in the most email clients (such as Outlook). If you need more guidance on creating an HTML document and getting started with a text editor, please see the resources page where there is an introduction to the Visual Studio Code Text Editor. ![]() Let’s first start with our email doctype for our template since this is the very first part of the HTML document we’ll be building inside of for our email design. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |