by Contributing Author Plunging into the world of coding can seem daunting if you’ve never done it before, and email coding in partic...
by Contributing Author
Plunging into the world of coding can seem daunting if you’ve never done it before, and 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.
If you have experience and some level of comfort using or learning HTML, then coding a custom email template could be a great option. But coding an email is different from coding a web page or website. As with coding for a web page, you will still need to consider browser and device behaviors. In addition, you will need to 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.
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 so that these tags can be called upon for presentation and behavior.
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.
For 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 for users of all devices, and it will keep your reader’s attention focused on the main call-to-action.
Once your layout and coding is complete, be sure use a tool like Litmus to preview how your email looks across various browsers and email clients so you can trouble shoot any issues before hitting send.
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, even if many insist that email coding is stuck in the past and that you must code in nested tables like it’s 1999. A mobile-friendly method that has been recognized recently, for example, is the fluid/hybrid approach. Here is a recent fluid/hybrid tutorial from Envato Tuts+ that is great for those who already have some understanding of HTML. For strict 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.
Source
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 a drag and drop editor so you can customize our ready-to-go templates with your own content.If you have experience and some level of comfort using or learning HTML, then coding a custom email template could be a great option. But coding an email is different from coding a web page or website. As with coding for a web page, you will still need to consider browser and device behaviors. In addition, you will need to 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
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 so that these tags can be called upon for presentation and behavior.
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 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 for users of all devices, and it will keep your reader’s attention focused on the main call-to-action.
Once your layout and coding is complete, be sure use a tool like Litmus to preview how your email looks across various browsers and email clients so you can trouble shoot 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, even if many insist that email coding is stuck in the past and that you must code in nested tables like it’s 1999. A mobile-friendly method that has been recognized recently, for example, is the fluid/hybrid approach. Here is a recent fluid/hybrid tutorial from Envato Tuts+ that is great for those who already have some understanding of HTML. For strict 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.
Source
COMMENTS