gmail template email with embedded video

Gmail template email with embedded video code#

The width for your main table should be no larger than 600 pixels, just so your recipients won’t have to scroll right and left to view the entire email. Div layouts typically rely on CSS and a few other attributes that don’t have great support by most email programs, so stick with tables – it may be more cumbersome, but it’s much more reliable. This may not be as obvious, but a basic HTML table layout is the best way to structure your email template. This means using basic HTML tags and in-line styling.

Gmail template email with embedded video code#

Bottom-line though – code your emails like you would an old webpage from the ’90s. If you want to see what types of CSS are currently supported in the popular email programs, take a look at the Email Standards Project website, as they have a comprehensive list of which CSS (Cascading Style Sheets) properties work reliably and which ones don’t. Of course, adding external CSS is way more efficient and time-saving, but since there’s such limited support for that in the different email programs, styling your elements in-line is the best way ensure that your intended design will display correctly.

In-line styling is a must when it comes to designing HTML emails. This brings us to the first bit of advice: Use in-line styles As enticing as it may be, don’t attempt to design your email using a program like Dreamweaver, because it generally uses a lot of external CSS (it was designed for creating web pages after all).

What can you do to ensure your email design is preserved? First, if you’re not super comfortable with HTML code, you should stick with a graphical, aka WYSIWYG (what you see is what you get), editor for designing your templates. Keep in mind that most email programs use an outsourced HTML rendering engine, because building and maintaining their own would be extremely time-consuming and not cost-effective. Sometimes the changes are subtle, like the text spacing will be off other times the changes are quite drastic, where an image or an entire section is moved around or partly cut off. So why is email template coding different from the rest? Well, for starters, there’s not an established standard for rendering email code, so various email programs (like Gmail, Yahoo! or Outlook) can and will render the same HTML code differently. However, we’re here to help! In this post we arm you with knowledge about what really works and what doesn’t in HTML email design. When designing email templates, however, you have to take a step back to the proverbial stone age of coding, where basic font and style tags reign supreme, Javascript might as well not exist, and embedding things like videos or forms is risky. When building a web page, you can use CSS, HTML5, Javascript, and a myriad of other languages that can be used to create fancy layouts and graphics. Designing an email template requires imaginative coding skills.