Objective:
Convert provided Adobe XD / Figma email designs into responsive, Mailchimp-compatible HTML templates that:
Are editable within the Mailchimp editor (drag-and-drop blocks, text, images, buttons).
Render consistently across all major email clients (Gmail, Outlook, Apple Mail, Yahoo, etc.) and devices.
Scope of Work
Export & Preparation
Extract assets from XD / Figma (images, icons, background graphics) in appropriate formats (JPG/PNG/SVG).
Optimize images for fast email loading.
HTML/CSS Development
Hand-code HTML email using table-based layout (inline CSS for maximum compatibility).
Ensure code is Mailchimp template language (MC Templating) compliant for editable areas.
Implement responsive design using mobile-first approach (hybrid or fluid layout).
Mailchimp Integration
Define editable content areas (mc:edit) for text, images, and buttons.
Ensure drag-and-drop sections where possible.
Configure repeatable sections if needed (mc:repeatable).
Compatibility Testing
Test rendering on:
Desktop clients: Outlook 2016–2024, Apple Mail, Thunderbird.
Webmail: Gmail, Outlook.com, Yahoo Mail.
Mobile: iOS Mail, Gmail app, Outlook app.
Test in both light and dark mode.
Delivery
Final HTML files + Mailchimp template import package (.zip or direct MC upload).
Documentation on editable areas and best practices for editing in Mailchimp.
Technical Requirements
Do’s:
Table-based layout for structure.
Inline CSS for styling.
Mobile responsiveness via media queries.
Fallbacks for background images.
Alt text for all images.
Web-safe fonts or Mailchimp-supported Google Fonts.
Don’ts:
Avoid external CSS or JavaScript.
Avoid absolute positioning unless absolutely necessary.
Avoid CSS properties unsupported by major email clients.
Deliverables
Editable Mailchimp-compatible HTML template.
Fully responsive, cross-client tested design.
Documentation for Mailchimp editor use.
Source XD/Figma assets (optimized and final). |
