Top Gear: Useful Internet Marketing Strategies & Tips to Move You Forward: HTML & CSS: email coding concepts

Plunging into the world of coding can seem daunting if you’ve never done it before. Email coding, in particular, has its own set of rules. If you’re new to coding, here are some things to consider before diving straight into HTML and CSS for email.

Do I need to code my email?

If you don’t have coding experience, coding an email from scratch may not be a practical solution for you, and it is certainly not required. VerticalResponse provides a wide selection of mobile-friendly templates and offers an easy-to-use editor so you can customize our ready-to-go templates with your own content.

If you do have experience and some level of comfort using or learning HTML, then coding a custom email template could be a great option. As with coding for a web page, you still need to consider browser and device behaviors. In addition, consider the unique style defaults of dozens of email clients like Gmail, Yahoo, Outlook and more. If you are used to coding a web page in HTML and applying an external CSS style sheet, you’ll need to get used to working with CSS internally and inline so that your styles are not overwritten by these email client defaults.

Vocabulary to know

If you are brand-new to coding altogether, here’s what you need to know about HTML and CSS:

HTML is a language you’ll use to structure and describe your content. HTML stands for Hypertext Markup Language. When you code in HTML, you are marking up your content with tags that tell the web browser how to display information like images and words on a web page.

CSS is a language that affects the presentation of your content. Using CSS, you can assign styles to HTML elements. CSS stands for Cascading Style Sheet. The word cascade is significant because style declarations, or rules, will be honored by order of appearance. If you make two declarations for the same element, the latter will be honored because it overwrites what comes before it.

Here are the ways to tie your CSS to your HTML:

External CSS: using an external stylesheet (a file commonly named style.css) that is referenced within your HTML file. This is great for websites because if you have 100 common elements that span over 100 pages, you can change them all at once with a single CSS declaration.

Internal CSS, aka Embedded CSS: including your CSS code within <style> tags at the top of your HTML file. When coding an email, this can be great for assigning general styles that apply to common elements. However, this method is not always supported by email.

Inline CSS: attaching CSS code to a single HTML element right within the HTML code. In email coding, this method ensures that certain styles are not overwritten by browser and email client defaults.

If you are used to setting up your CSS externally or internally, you can build it that way and then use an inliner tool such as this one from PutsMail to convert your styles into inline CSS.

The relationship between HTML & CSS

To get a better idea of how HTML and CSS are related and how separating CSS from HTML can free up the presentation of your HTML, go to the fantastic and celebrated website CSS Zen Garden, where you can view the same HTML markup with drastically different CSS, coded by noted designers.

Approaching email coding

When coding an email from scratch, keep it as simple as possible. Use a plain text editor, such as TextWrangler, Notepad or Sublime, and stay away from visual editors like Dreamweaver because they can add unnecessary items to your code.

For the layout, try taking a mobile-first approach. This means designing for small screens and working your way up. With mobile viewing continually on the rise, making sure your email looks good on phones and tablets is more important than ever; there is no reason to create a complicated design that only looks good on a desktop. Keeping your message and design simple enough for the smallest devices will also be easier to code, it will be accessible to users of all devices and it will keep your reader’s attention focused on the main call to action.

Once your layout and coding are complete, be sure use a tool like Litmus or VerticalResponse’s Inbox Preview for HTML editor to preview how your email looks across various browsers and email clients so you can troubleshoot any issues before hitting send.

Where to start learning

There are many online tutorials where you can learn hands-on, in detail how to code an email. One good way to dive into email coding is to find a simple template you like and spend some time examining the code. Get familiar with the main tags like <body>, <head> and <div> first and then notice how tags are sometimes further defined into IDs or classes, such as <div class=”half-column”>. Notice that the naming in a quality HTML template will be clear and logical so that it is easier to tell what is happening when it appears in the CSS.

If you are ready for a step-by-step lesson, look for recent tutorials (within the last year). The approach to coding is constantly being reconsidered. A mobile-friendly method that has gained popularity in the past couple years, for example, is the fluid/hybrid approach. This fluid/hybrid tutorial from Envato Tuts+ is great for those who already have some understanding of HTML. For beginners, Lynda.com offers many email-specific coding courses. A good course will walk you through a coding exercise and provide a downloadable example project file that you can use as a reference.