As a digital marketer, you have likely come across HTML at some point, and let’s face it, it can look a bit overwhelming when you are unfamiliar with how to code.
Whether you are trying to just understand how HTML works or want to up your email marketing game by adding new features but are not sure where to start, this post is for you. It will provide you with the best practices, resources, and HTML generators to get you started plus make you look like an HTML pro.
TOP TIP: Bookmark this tab so you have quick access when you are working on your next email.
Let’s start with some best practices –
Always make a copy of the original HTML document before making changes.
It might sound obvious but it is easy to forget when you are focused on getting an email out. You don’t want to be in a position where you have edited the HTML but when testing the email you realise what you thought would work doesn’t and now you don’t have the original (working) HTML file.
Keep it simple.
Unfortunately, complex email designs are not always compatible with HTML so your email might look good in theory but when it hits your customer’s inbox it might look completely different. To avoid this, keep your designs clear and simple, make sure they are as accessible as possible, and always test before sending.
Don’t forget the Alt tag.
Talking about accessibility, another best practice is remembering the sometimes forgotten ‘Alt’ tags (alternative text). The Alt tag is an HTML attribute that sits with images in your emails to provide a text alternative to what the image is displaying. This is incredibly important as it allows your email to reach a wider audience including people who are unable to see images and helps them gain a better understanding of your email.
Another use-case of using the Alt tag is for screen readers such as smartwatches and browsers that block images, as it provides a description of what the image is converting and avoids any gaps in your email’s narrative.
Resources & Generators for HTML & CSS
There are loads of resources and generators available. We have gathered the most useful websites and tools for email marketing below plus a handy table for your next email build.
W3 Schools
In my opinion, this is the go-to website for learning how to code. They offer HTML & CSS tutorials, references, and exercises that are simple to understand and include all aspects of HTML. So if you are wondering how to do something, this is the place to look.
Email Layout Calculator
Want to add a new email section that includes multiple tables but don’t know how? This website removes the need to code but provides a handy calculator to do it for you. All you need to do is provide the width of your email, how many columns you want to include, and the gutter (or commonly referred to as the padding) between the columns, and done, the HTML & CSS is generated for you. More on generators below.
Can I email….
HTML & CSS consists of loads of different attributes and elements that allow you to style and structure your email but not all of them are supported by email clients. To make life easier, ‘can I email’ breaks down popular email clients and tells you if your code is supported or not. This can get you an idea of what design is going to work in your email before you test it which will save you a lot of time.
How to Target Email Clients
Helps you find supporting code for specific email clients, so you can make sure your emails will render correctly. If you check the email client tab when looking at your email reporting in Pardot, you can identify which clients your customers are using most, and then you have the ability to go deeper into your code and tailor your emails accordingly.
HTML Crush
Sometimes if you have been working on an HTML document for a long time or there are multiple people working on the same email. Unwanted pieces of code can embed themselves within the HTML, leaving unwanted blank space, extra rows, or different code. HTML Crush will identify any unused/extra code and minify your document so it is tidy, organised, and clean. This also helps Pardot render the email when you are pasting the code into the HTML tab in the email editor as the code is simple for Pardot to read.
Fancy some more?
There you have my top tips for understanding more HTML in email marketing. If you find yourself looking for further knowledge or need someone to build your next emails, don’t hesitate to contact us – you’ll be in great hands.
This Pardot article written by:
Nebula Consulting
Get the most out of marketing automation with Pardot. Attract and nurture leads with personalized, targeted journeys and adapt quickly with intelligent campaign performance insights. Start with the right building blocks to ensure you get the most out of your marketing automation strategy.
Original Pardot Article: https://nebulaconsulting.co.uk/insights/become-an-html-email-marketing-expert/
Find more great Pardot articles at https://nebulaconsulting.co.uk/insights/
Pardot Experts Blog
We have categorized all the different Pardot articles by topics.
Pardot Topic Categories
- Account Based Marketing (ABM) (7)
- Business Units (14)
- ChatGPT / AI (3)
- Completion Actions (5)
- Connectors (10)
- Custom Redirects (4)
- Data Cloud (2)
- Demand Generation (8)
- Dynamic Content (6)
- Einstein Features (12)
- Email Delivery (17)
- Email Open Rates (3)
- Pardot A/B Testing (2)
- Email Mailability (16)
- Do Not Email (1)
- Double Opt-in (2)
- Opt Out / Unsubscribe (14)
- Email Preferences Page (6)
- Engagement Studio (16)
- Industries (1)
- Non Profit (1)
- Landing Pages (9)
- Lead Generation (1)
- Lead Management (13)
- Lead Routing (3)
- Lead Scoring (16)
- Leads (3)
- Marketing Analytics – B2BMA (9)
- Marketing Automation (1)
- Marketing Cloud (3)
- Marketing Cloud Account Engagement (4)
- Marketing Cloud Growth (2)
- New Pardot Features (6)
- Opportunities (2)
- Optimization (2)
- Pardot Admin (64)
- Duplicates (1)
- Marketing Ops (1)
- Pardot Alerts (1)
- Pardot API (2)
- Pardot Automations (3)
- Pardot Careers (12)
- Pardot Certifications (4)
- Pardot Consulting (1)
- Pardot Cookies (3)
- Pardot Custom Objects (3)
- Pardot Email Builder (8)
- Pardot Email Templates (9)
- HML (6)
- Pardot Events (16)
- Pardot External Actions (1)
- Pardot External Activities (4)
- Pardot Forms (29)
- Form Handlers (8)
- Pardot Integrations (20)
- Data Cloud (1)
- Slack (1)
- Pardot Lead Grading (5)
- Pardot Lead Source (2)
- Pardot Lightning (1)
- Pardot Migration (1)
- Pardot Nurture / Drip Campaigns (1)
- Pardot Personalization (3)
- Pardot Profiles (1)
- Pardot Releases (18)
- Pardot Sandboxes (2)
- Pardot Segmentation (5)
- Pardot Strategy (7)
- Pardot Sync (2)
- Pardot Sync Errors (1)
- Pardot Tracker Domains (5)
- Pardot Training (3)
- Pardot Vs Other MAPs (4)
- Pardot Website Tracking (2)
- Reporting (22)
- Salesforce and Pardot (31)
- Marketing Data Sharing (2)
- Pardot Users (3)
- Salesforce Automation (5)
- Salesforce Flows (2)
- Salesforce Campaigns (20)
- Salesforce CRM (3)
- Record Types (1)
- Salesforce Engage (3)
- Salesforce Queues (2)
- Security and Privacy (1)
- Tags (3)
- The Authors (504)
- Cheshire Impact (9)
- Greenkey Digital (51)
- Invado Solutions (37)
- Jenna Molby (9)
- Marcloud Consulting (6)
- Nebula Consulting (60)
- Pardot Geeks (44)
- Salesforce Ben | The Drip (235)
- SalesLabX (3)
- Slalom (4)
- Unfettered Marketing (46)
- Uncategorized (1)
- Website Tracking (2)
- Website Search (1)
More Pardot Articles
See all posts
This Pardot article written by:
Nebula Consulting
Get the most out of marketing automation with Pardot. Attract and nurture leads with personalized, targeted journeys and adapt quickly with intelligent campaign performance insights. Start with the right building blocks to ensure you get the most out of your marketing automation strategy.
Original Pardot Article: https://nebulaconsulting.co.uk/insights/become-an-html-email-marketing-expert/
Find more great Pardot articles at https://nebulaconsulting.co.uk/insights/