![]() ![]() ![]() intra-email links to stories that appear further down in the email followed by the stories and content.a header, containing a logo and some (or all) of the navigation links from the parent web site to reinforce the branding and provide familiarity for site visitors.Single column email designs also make it easy to display well on phones and tablets.Ī single-column layout typically consists of: For newsletters, single column and two-column layouts work best, because they control the natural chaos that results when a large amount of content is pushed into such a small space as an email. The first step in creating an HTML email is to decide what kind of layout you want to use. So put your standards-compliant best practices and lean markup skills aside: we’re about to get our hands dirty! A few email software clients are light years behind the eight-ball in terms of CSS support, which means we must resort to using tables for layout if we really want our newsletters to display consistently for every reader (see the reading list at the end of this article for some excellent resources on CSS support in mail clients). That’s right: tables are back, big time! Web standards may have become the norm for coding pages for display in web browsers, but this isn’t the Web, baby. My Code HTML Email site also has actual HTML emails I’ve downloaded and formatted so you can study to see how others created email. CSS style declarations are very basic, and do not make use of any CSS files.spans and divs are used sparingly to achieve specific effects, while HTML tables do the bulk of the layout work.No CSS shorthand is used: instead of using the abbreviated style rule font: 12px/16px Arial, Helvetica, you should instead break this shorthand into its individual properties: font-family, font-size, and line-height.CSS style declarations appear below the body tag, not between the head tags.When you open up one of these templates, you’ll notice a few things we’ll discuss in more detail later: The quickest and easiest way to see how HTML tables and inline CSS interact within an HTML email is to download some templates from Campaign Monitor and MailChimp. Use inline CSS to control other presentation elements within your email, such as background colors and fonts.You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment. Use HTML tables to control the design layout and some presentation.Whether you choose to code your HTML email by hand (my personal preference) or to use an existing template, there are two fundamental concepts to keep in mind when creating HTML email: And even when these tools do display an HTML email properly, accounting for variances in, for example, the widths at which readers size their windows when reading emails makes things even trickier. If you thought it was difficult to ensure the cross-browser compatibility of your web sites, be aware that this is a whole new game - each of these email software tools can display the same email in vastly different ways. The software used to render HTML for each email software tool determines what HTML and CSS code works and doesn’t work. The biggest pain when coding HTML email is that so many different software tools are available to read email, from desktop software such as Eudora, Outlook, AOL, Thunderbird, and Lotus Notes, to web-based email services such as Yahoo!, Hotmail, and Google Mail, to email apps on phones and tablets.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |