XD Email Design Library

To complement the HTML email development, I established a comprehensive Email Component Design Pattern Library in Adobe XD. This system empowers designers to visually assemble full email layouts using drag-and-drop components that directly mirror the coded template structure. Each module—whether it's a hero block, testimonial, CTA, or icon list—is built with responsiveness, branding, and accessibility in mind. By front-loading design consistency into the mockup stage, teams can prototype campaigns faster, with fewer iterations and clearer stakeholder alignment.

This design library doesn't just streamline the creative process—it enforces visual and structural consistency between design and code. Because every XD component is mapped to a matching HTML module, handover to developers becomes seamless, with minimal risk of discrepancies or rebuilds. This approach reduces production time, enhances quality control, and ensures that every email adheres to Linnworks' brand standards, accessibility practices, and modular email strategy. It's a foundational asset for scaling email creation efficiently across teams and campaigns.

Accessibility

To check if your email is accessible, you should evaluate how well it supports users with visual, cognitive, or motor impairments. Here are the best tools and checks to assess email accessibility:

✅ 1. Manual Checklist for Email Accessibility

📷 Images:

• Do all <img> tags include meaningful alt attributes?

• Are decorative images using alt=""?

🎨 Contrast:

• Are text and button colors WCAG AA compliant (contrast ratio of at least 4.5:1 for normal text)?

• Is background and text color legible in both light and dark mode?

🔡 Typography:

• Is the font size at least 14px?

• Is line-height at least 1.4 (or 140%)?

🧭 Navigation:

• Are links clearly styled (underlined or colored)?

• Do links use meaningful anchor text (not just “click here”)?

🏷 Structure:

• Are you using semantic HTML (like <h1>, <p>, <ul>, etc.)?

• Is reading order logical in screen readers and mobile clients?

🛠 2. Tools You Can Use

Tool Use Litmus Advanced email testing + accessibility audit (includes screen reader preview) Accessible-email.org

Free accessibility scanner + inline code feedback Email Markup Tester (for MJML emails) Helps visualize layout with structur

Wave by WebAIM Paste in HTML or URL to check for contrast and structure

Color Contrast Checker Validate text/background combinations

Dark Mode Support

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

Don’t worry about sounding professional. Sound like you. There are over 1.5 billion websites out there, but your story is what’s going to separate this one from the rest. If you read the words back and don’t hear your own voice in your head, that’s a good sign you still have more work to do.

Be clear, be confident and don’t overthink it. The beauty of your story is that it’s going to continue to evolve and your site can evolve with it. Your goal should be to make it feel right for right now. Later will take care of itself. It always does.

Reflow support

In email design, reflow support refers to an email's ability to adapt its layout dynamically when viewed on different screen sizes — especially on mobile devices — by stacking or rearranging content vertically rather than just shrinking it.

More technically:

Reflow support means the email is responsive — not just in terms of resizing, but in how its content "flows" into a readable format. It goes beyond simply scaling text or images down and instead repositions, reorders, or collapses columns and elements in a logical way for smaller screens.

📱 Example Without Reflow:

An email with a 3-column table layout might remain side-by-side and become illegibly squished on a phone.

✅ Example With Reflow:

That same 3-column layout stacks vertically into a single column, ensuring legibility and usability — headlines above text, images above buttons, etc.

How it’s Achieved:

• Media Queries (usually in the <style> tag in the <head>)

• Fluid or hybrid layout techniques

• Table-based layouts with conditional stacking

• Use of tools like MJML, Foundation for Emails, or responsive email frameworks

Why It Matters:

• Better mobile UX (over 50% of emails are read on mobile)

• Improved accessibility

• Higher engagement and conversions

Caveat:

Not all email clients support CSS-based reflow equally — Gmail, Outlook, and others have their quirks. So designers often use fallback-friendly, mobile-first layouts with careful use of tables and inline styles.

If you're working with platforms like Pardot, Adobe Campaign, or Mailchimp, many have templates with built-in reflow support — but it’s still worth testing on Litmus or Email on Acid to verify.

Email-safe animated CTA Buttons

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

Don’t worry about sounding professional. Sound like you. There are over 1.5 billion websites out there, but your story is what’s going to separate this one from the rest. If you read the words back and don’t hear your own voice in your head, that’s a good sign you still have more work to do.

Be clear, be confident and don’t overthink it. The beauty of your story is that it’s going to continue to evolve and your site can evolve with it. Your goal should be to make it feel right for right now. Later will take care of itself. It always does.

Preheader & Footer

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

Don’t worry about sounding professional. Sound like you. There are over 1.5 billion websites out there, but your story is what’s going to separate this one from the rest. If you read the words back and don’t hear your own voice in your head, that’s a good sign you still have more work to do.

Be clear, be confident and don’t overthink it. The beauty of your story is that it’s going to continue to evolve and your site can evolve with it. Your goal should be to make it feel right for right now. Later will take care of itself. It always does.