Email Design
and Content
Creation
Module: 3
Dr. Saurabh Mishra
TABLE OF CONTENTS
01 02 03 04
01
Email Design
Principles and
Best Practices
Key Principles of Email Design
• Use clean and minimalistic layouts.
Clarity and Simplicity • Clear hierarchy of information: headline → body → CTA.
• Avoid clutter; focus on one primary message per email.
• Design for mobile-first (majority of users read emails on mobile).
Responsiveness • Use responsive HTML and scalable fonts/images.
• Ensure buttons and links are easily clickable on all devices.
• Use size, color, and spacing to guide readers' eyes.
Visual Hierarchy • Headings should be prominent, followed by subheadings and body text.
• Important content should be “above the fold.”
• Include brand logo, colors, and tone of voice.
Brand Consistency
• Maintain consistent email templates for familiarity and trust.
• Use sufficient color contrast for readability.
Accessibility • Alt text for images.
• Avoid relying solely on images to convey key messages.
• Use bullet points, short paragraphs, and bold text to highlight key information.
Scannability
• Readers should be able to grasp the message within seconds.
• Use prominent, action-oriented CTA buttons (e.g., “Shop Now,” “Learn More”).
Call-to-Action (CTA) Focus • Limit the number of CTAs to reduce confusion.
• Ensure CTAs are visually distinct.
Best Practices for Effective Email Design
Preheader and Subject Subject lines should be clear, concise, and personalized.
Line Optimization Preheaders should support or enhance the subject line message.
Content Personalization Use dynamic content blocks (e.g., user name, product recommendations).
Segment lists for targeted messaging.
Use of Visuals Include high-quality, relevant images.
Use GIFs and videos sparingly to avoid loading issues.
Optimize image size for faster loading.
Consistent Layouts and Use modular templates for scalability and quick design.
Templates Maintain similar layouts across campaigns to build user familiarity.
Loading Speed Compress images and minimize HTML code.
Optimization Use inline CSS for better rendering across email clients.
Testing and Use A/B testing for subject lines, CTAs, images, etc.
Optimization Preview and test across major email clients (Gmail, Outlook, Apple Mail).
Use tools like Litmus or Email on Acid.
Legal Compliance Include a visible unsubscribe link.
Add sender’s physical address.
Ensure compliance with GDPR, CAN-SPAM, or other applicable laws.
Components of a Well-Designed Email
Component Purpose
Subject Line Captures attention; encourages opens
Preheader Text Adds context; supports the subject line
Header Brand identity; sets the tone
Hero Image Visual impact; highlights the main message
Body Content Inform, educate, or promote; concise and relevant
CTA Button Encourages immediate action; should be visually clear
Footer Includes contact info, legal disclaimers, unsubscribe
Common Email Layout Types
Single Column Multi-Column Z-Pattern Layout F-Pattern Layout
Layout Layout • Follows natural reading • Reflects how users scan
• Best for mobile devices • Allows display of behavior (left to right, content (top-heavy, left-
and short, focused multiple products or top to bottom). oriented).
messages. features side-by-side. • Alternates images and • Places most important
• Ensures content flows • Often used in text in a zigzag pattern. content near the top and
naturally from top to newsletters or e- • Maintains reader left sides.
bottom. commerce promotions. engagement throughout • Useful for content-heavy
• Ideal for transactional • Requires careful mobile the email. emails like digests or
and promotional emails. optimization (stacking updates.
columns).
Standard Email Structure
Header Contains brand logo and navigation links (optional).
Should be minimal and instantly recognizable.
Preheader Text A short summary that follows the subject line in the inbox preview.
Should complement the subject and encourage opens.
Hero Section Eye-catching image or headline that communicates the main message.
Sets the tone and theme of the email.
Body Content Main message, offer details, or value proposition.
Use headings, short paragraphs, and visuals to break up text.
Call to Action A button or link that drives user action (e.g., “Shop Now,” “Register”).
(CTA) Should be visually prominent and action-oriented.
Social Proof or Optional section with testimonials, stats, or product reviews.
Additional Info Increases trust and conversion.
Footer Includes contact information, unsubscribe link, legal disclaimers.
May include social media links and secondary navigation.
Best Practices for Layout and Structure
Keep it Vertical
• Emails should flow from top to bottom to support mobile reading.
Limit Width
• 600–700 pixels is the standard for optimal rendering.
Use White Space
• Enhances readability and emphasizes key elements.
Align Content
• Maintain consistent alignment (usually left-aligned for text).
Balance Text and Images
• Avoid image-only emails (some clients block images by default).
Hierarchy Matters
• Use font sizes and colors to guide the reader's attention.
02
Responsive
Email Design for
Multiple Devices
Responsive Email Design
Responsive email design ensures emails automatically adjust and
display correctly on various screen sizes—desktops, tablets, and
smartphones—by using fluid layouts, media queries, and scalable
content.
Why It Matters
• 80%+ of users check emails on mobile devices.
• Poorly rendered emails lead to low engagement and high
unsubscribe rates.
• Enhances user experience, readability, and conversion
rates.
Key Principles of Responsive Email Design
• Design starting with the smallest screen (mobile) and scale up for
Mobile-First larger devices.
Approach
• Ensures priority content is always visible.
• Avoid fixed-width tables; instead use percentage-based widths for
Use of Fluid Layouts flexibility.
• Example: Use width: 100% instead of width: 600px.
Scalable Fonts and • Use larger, legible fonts (at least 14–16px for body text).
Buttons • Buttons should be touch-friendly: minimum 44x44 pixels.
• Use images that scale with screen size using max-width: 100%.
Responsive Images
• Optimize image size for fast loading and better performance.
Media Queries • Use CSS media queries to apply styles based on screen width.
Single Column • Easier to adapt across screen sizes.
Layout • Avoids horizontal scrolling and preserves flow of information.
Mobile-First Design Approach
Mobile-First Design is a strategy where the design process
starts with mobile devices (the smallest screens) and then
progressively enhances the experience for larger screens
like tablets and desktops.
Instead of shrinking a desktop email for mobile (which can
cause rendering issues), mobile-first ensures core content
and interactions are optimized for the majority of users—
who now open emails primarily on mobile devices.
Core Principles of Mobile-First Design
Prioritize
Use a Single- Large, Tappable Scalable Fonts Avoid Heavy
Essential
Column Layout CTAs and Images Content
Content
• Deliver the most • Simplifies flow of • Buttons should • Minimum font • Reduce large
important information be at least 44x44 size: 14px for blocks of text
message first vertically. pixels. body, 20px+ for and complex
("above the • Eliminates • Use contrasting headlines. visuals.
fold"). horizontal colors and action • Use max-width: • Optimize images
• Limit content to scrolling and verbs (e.g., "Buy 100% for images and avoid
one or two core awkward Now," "Get to prevent embedded
messages or stacking. Offer"). overflow. videos (link to
offers. • Easier to render • Ensure CTAs are • Add ALT text for hosted versions
• Use concise across various not too close accessibility and instead).
copy and screen widths. together to when images • Use lightweight
impactful prevent mis- don’t load. HTML and CSS
headlines. clicks. for faster load
times.
Media Queries
Media queries are CSS techniques that allow designers
to apply different styles depending on the device’s
How Media Queries Work
screen size, resolution, or orientation. • Media queries use conditions
They help adapt email layouts and elements for: like max-width, min-width,
Smartphones orientation, etc., to apply
Tablets
specific styles. For example:
CSS
Laptops
Desktops @media screen and (max-width: 600px) {
.container {
Why It Matters for Email
width: 100% !important;
Emails can look broken on mobile if styles are not }
adapted.
.cta-button {
Media queries allow elements to resize, stack, or hide
depending on screen width. font-size: 18px !important;
padding: 12px 20px !important;
They create a seamless and user-friendly experience.
}
}
Fluid Grids
Fluid grids use relative units (like How Fluid Grids Work
percentages) instead of fixed units (like Instead of:
pixels) for widths, margins, and
paddings—so elements scale .container {
proportionally on any screen size. width: 600px;
}
Fluid grids are: Use:
Flexible: Resize smoothly across devices.
.container {
Lightweight: Reduce code complexity. width: 100%;
Essential for responsive layouts. max-width: 600px;
}
Or inside an HTML email table:
<table width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px;">
03
Effective
Messaging in
Email Content
Effective Messaging in Email Content
Effective messaging in email
content means:
• Communicating the right message
• To the right audience
• At the right time
• In the right tone and structure
• To achieve a specific objective
(clicks, conversions, awareness, etc.)
Core Elements of Effective Email Messaging
• Ask:
• “What is the goal of this email?”
• Examples:
• Promote a sale or product
Clear Objective
• Announce a new feature or event
• Nurture leads or build trust
• Request feedback or reviews
• Everything in the message should support this one goal.
• Use “you” more than “we” (focus on customer benefit).
• Write at a conversational and appropriate reading level.
• Personalize content when possible (name, preferences, past behavior).
• Segment emails by demographics, interests, or purchase history.
Audience-Centered
Language • Example:
• Instead of:
• "We are excited to announce our new product."
• Use:
• "You're going to love what we’ve made just for you."
• Subject Line (max 50 characters): Grabs attention; sparks curiosity or
urgency.
Compelling Subject Line • Preheader Text: Complements the subject and gives context.
+ Preheader • Example:
• Subject: “Just for you: 25% Off Ends Tonight”
• Preheader: “Grab your favorites before the clock runs out.”
• Hook the reader immediately.
• Reinforce the subject line or offer.
Powerful Opening Line • Create an emotional or curiosity-based connection.
• Example:
• “Imagine saving 25% on the product you’ve been eyeing all week.”
• Keep it:
• Concise: Short sentences and paragraphs.
• Scannable: Use bullet points, bold text, and subheadings.
• Benefit-focused: Talk about what’s in it for the reader, not features.
Value-Driven Body Copy
• Instead of:
• “Our shoes are made from Italian leather and hand-stitched.”
• Say:
• “Step into all-day comfort and style—crafted to last and turn heads.”
• Use clear, action-oriented verbs (Shop Now, Claim Offer, Get the Guide).
• Place CTA prominently and early (don’t wait until the end).
• Ensure the CTA aligns with your goal.
Strong Call to Action (CTA) • CTA Tips:
•Use buttons with contrasting colors
•Avoid vague CTAs like “Click here”
•Test different CTA placements (top, middle, bottom)
• Match your brand voice (formal, friendly, quirky, inspirational).
Tone and Voice Consistency • Be consistent across all touchpoints.
• Adapt tone depending on purpose (e.g., urgent, celebratory, informative).
• Tap into:
•Urgency: “Last chance,” “Ends today”
Emotional Triggers •FOMO: “Only a few left”
•Exclusivity: “Just for you,” “VIP early access”
•Gratitude: “Thanks for being a loyal customer”
• Use visuals (images, icons) to support the message, not distract from it.
Visual Alignment with
• Ensure image ALT text supports key points.
Message
• Don't rely on images alone—include readable text for clarity and accessibility.
• Many users skim. Help them by:
• Using headings and subheadings
Optimize for Skimming
• Emphasizing key words or offers
• Structuring text in blocks with ample white space
Example Email Messaging Breakdown
Subject:
“Don’t Miss This: 40% Off Ends Tonight!”
Preheader:
“Just 12 hours left to save big on our best-sellers.”
Opening Line:
“Your dream wardrobe just got 40% closer.”
Body Copy:
“From sleek office wear to comfy loungewear, grab what you love
while it lasts. No code needed—just shop and save.”
CTA Button:
[ Shop the Sale ]
Closing Text:
“Offer ends at midnight. Don’t miss out!”
Best Practices Summary Table
Component Best Practice
Subject Line Keep under 50 characters, create urgency or curiosity
Preheader Support subject, expand on the benefit
Opening Line Hook the reader in the first sentence
Body Text Be concise, scan-friendly, and benefit-focused
CTA Clear, visible, and action-driven
Personalization Use names, preferences, and behavior-based segmentation
Tone Match brand voice and reader expectations
Emotional Triggers Use urgency, exclusivity, gratitude, or FOMO
04
Visual and
Performance
Optimization
Meaning & Goals
Visual optimization ensures the Goals of Optimization
email looks appealing and
• Faster email loading on all
consistent across devices and devices (especially mobile)
clients. • Visually appealing layout that
reinforces brand identity
• High compatibility across email
clients (e.g., Gmail, Outlook, Apple
Performance optimization Mail)
focuses on making the email • Better engagement rates (opens,
load fast, render correctly, and clicks)
function smoothly to enhance • Improved accessibility for all
user experience and users
deliverability.
Key Components of Visual Optimization
Image Optimization
•Compress image file sizes (ideally < 1 MB total per email)
•Use appropriate formats:
•.JPG or .PNG for photos/graphics
•.GIF for simple animations
•Avoid heavy or complex animations
•Use max-width: 100% in CSS for responsive scaling
•Add ALT text to all images (improves accessibility and fallback display)
Responsive Design
•Use media queries and fluid layouts to adapt visuals to screen sizes
•Design for mobile-first, then scale up
•Avoid complex multi-column layouts
Visual Hierarchy and Branding
•Use contrasting colors for CTA buttons
•Stick to 2–3 fonts and a consistent color palette
•Use headlines, subheadings, and body text to guide attention
•Keep design simple, clean, and uncluttered
Key Components of Performance Optimization
• Use inline CSS (many email clients don’t support <style> blocks)
• Avoid JavaScript or external CSS files
Minimize Code Bloat
• Keep HTML simple, using <table> layouts for compatibility
• Tip: Use email boilerplate templates from tools like MJML, Litmus, or Foundation for Email.
• Avoid embedding videos—use a thumbnail image linking to a hosted video
Limit Use of Heavy Content • Limit the number of images and avoid large GIFs
• Use text-based CTAs in addition to buttons in case images are disabled
• Examples: Arial, Verdana, Georgia, Tahoma
Use Web-Safe Fonts • These render consistently across email clients
• For custom fonts, include fallbacks
• Ensure your preheader reinforces the subject line and loads quickly
Preheader Text Optimization
• Use hidden preheader text if needed:
• Use ALT text, logical reading order, and semantic HTML
Accessibility Enhancements • Maintain sufficient contrast between text and background
• Avoid flashing images or color-only cues
• Use tools like:
• Litmus, Email on Acid, Mailtrap to preview emails in 50+ clients/devices
• Validate rendering for:
Email Load Testing & Rendering • Outlook (desktop/web/mobile)
• Gmail
• Apple Mail
• Yahoo
Impact of Visual and Performance Optimization
Benefit Description
Faster Load Times Improves engagement and lowers bounce rates
Improved Compatibility Displays correctly across platforms and devices
Better Click-Through Rates Clean CTAs and design guide user actions
Reaches more users, including those with
Increased Accessibility
disabilities
Clean code and low image-to-text ratio help
Higher Inbox Placement
avoid spam filters
"Email is more than just a
communication tool; it's a direct
line to a consumer's heart.
When crafted with care and
delivered at the right time, it
can yield extraordinary results
that are virtually impossible to
replicate.”
THANKS
Do you have any questions?
saurabh.mishra26384@paruluniversity.ac.in
+91 98930 12681
www.paruluniversity.ac.in
CREDITS: This presentation template was created by
https://www.facebook.com/saurabh.mishra.75457
Slidesgo, and includes icons by Flaticon, and
Slidesgo Flaticon
https://www.linkedin.com/in/dr-saurabh-mishra
infographics & images by Freepik
Freepik
