rolandhking.github.io

Email Template, Module & Content Block Design

OVERVIEW

Career projects showing HTML/CSS for my Hubspot MAS and Salesforce Marketing Cloud (SFMC) templates, including pre-designed modules and content blocks for other email marketers to use in building email campaigns. Source for all template files can be viewed on my Github Repository.

AUTHORS

• Template and Content Block Design: Roland King
• HTML and CSS: Roland King
• Image/Asset Styling and Editing: Roland King
• Email Copy: Roland King

SYSTEMS, TOOLS & TESTING

• Hubspot MAS
• SFMC
• Visual Studio Code Editor
• Photoshop
• Email on Acid

Hubspot

TEMPLATES

hubspot_block_img_content_general_template.html

• Uses display attribute to present content and images in traditional and responsive view, as well as inline dual CTA buttons.
• View Source →
• View Associated Modules →

hubspot_dual_CTA_email_template.html

• Blend of CSS and Photoshop design to present illusion of overlapping content area to draw reader in.
• View Source →
• View Associated Modules →

hubspot_blog_post_template.html

• Custom modules so template can be easily used by non-technical team members to send blog post emails. Includes RSS module.
• View Source →
• View Associated Modules →

hubspot_default_email_template.html

• Use of background url() to draw attention to email and increase CTA.
• View Source →
• View Associated Modules →

hubspot_marketing_report_email_template_internal.html

• Card-style approach to easily find content that matters most to internal sales team.
• View Source →

EMAIL EXAMPLES

extending-technology-lifecycles-extending-care-to-more-patients.html

• Email example showcasing block image and content sections using block image general template
• View Email →

build-your-own-custom-device-at-techex-oct-5-6.html

• Example of email campaign using dual CTA template
• View Email →

which-industries-have-the-greatest-need-for-rugged-technology.html

• Example of email sharing latest website post using blog post template
• View Email →

the-business-value-of-custom-technology.html

• Example of email campaign using general email template
• View Email →

marketing-insights-report-october-2022.html

• Example of Marketing Insights internal email template to sales teams
• View Email →

Salesforce Marketing Cloud

TEMPLATES

content_blocks_template.html

• HTML and CSS for all content blocks designed for SFMC
• View Source →

undergrad_general_email_template.html

• HTML and CSS for general email campaign template for UMBC
• View Source →

undergrad_dual_cta_template.html

• HTML and CSS for alternate template with a dual call-to-action design
• View Source →

EMAIL EXAMPLES

general_template_all_content_blocks.html

• Template showing all content block design styles with placeholder content
• View Email →

umbc_campus_life_email.html

• Example of email campaign using the general template
• View Email →

umbc_success_ready_email.html

• Example of email campaign using the dual CTA template
• View Email →

undergrad_application_email.html

• Example of an undergraduate template using AMPscript to display dynamic content
• View Email →