How to Use Gravit Designer for Vector Graphics

Why Email Design Requires Specialized Tools

Email clients do not render HTML the same way web browsers do. Gmail strips CSS classes and media queries from email code. Outlook uses Microsoft Word's rendering engine, which does not support modern CSS features like flexbox, grid, or background images in many contexts. Apple Mail supports modern CSS but has its own quirks. This fragmentation means you cannot design an email like a website and expect it to work everywhere. Specialized email design tools handle these inconsistencies by generating email-specific HTML that uses table-based layouts, inline CSS, and conditional comments for different email clients.

Mailchimp: The All-in-One Email Platform With a Design Editor

Mailchimp's email designer is the most widely used email creation tool, and for good reason. It provides a drag-and-drop editor with pre-built content blocks: headers, text blocks, image blocks, button blocks, divider blocks, social media blocks, and footer blocks. You assemble your email by dragging blocks into the canvas and customizing their content.

Each block is responsive by default. Mailchimp generates the email HTML with media queries that stack columns on mobile devices, resize images to fit narrow screens, and adjust font sizes for readability on phones. You do not need to write any CSS—Mailchimp handles the responsive behavior automatically.

Mailchimp also includes a "Code Your Own" option for developers who want to write custom HTML. This mode provides a split editor where you write HTML on the left and see a preview on the right. Mailchimp's merge tags (dynamic content like subscriber names, purchase history, and recommendation blocks) can be inserted into both the visual editor and the code editor.

Mailchimp's free plan supports up to 500 contacts and 1,000 sends per month. The Essentials plan at $13 per month supports 500 contacts with 10,000 sends. The Standard plan at $20 per month adds A/B testing, custom branding, and send time optimization. For small businesses, the free or Essentials plan covers basic email design needs.

Bee: The Designer-Focused Email Builder

Bee (beefree.io) is a standalone email design tool that prioritizes design flexibility. The editor provides more layout options than Mailchimp: multi-column layouts, background images, custom spacing, and a wider selection of content blocks. Bee also includes a "Saved Rows" feature where you can save entire row layouts (a header row with logo and navigation, a content row with image and text side by side) and reuse them across multiple emails.

Bee's responsive preview shows how your email looks on desktop, tablet, and mobile simultaneously. You can adjust the mobile-specific styling directly in the preview: hide certain blocks on mobile, change column stacking order, and modify font sizes for smaller screens. These mobile overrides are applied as media queries in the exported HTML.

Bee exports clean, tested HTML that works across 50+ email clients. The export options include HTML file (for importing into any email service provider), a testing link (to preview the email in real clients), and a ZIP file with embedded images. The free plan includes basic templates and exports. The Pro plan at $25 per month adds premium templates, custom branding, and team collaboration features.

Stripo: Code and Visual Editing Combined

Stripo (stripo.email) bridges the gap between visual email builders and code editors. The interface provides a visual drag-and-drop editor alongside a code editor, and changes in one are reflected in the other in real time. This dual-mode approach appeals to email developers who want the speed of visual editing with the control of direct code access.

Stripo's standout feature is its module system. You can create reusable content modules (a product showcase block, a newsletter header, a CTA section) and save them in a module library. When building a new email, drag modules from the library into the editor instead of rebuilding from scratch. For teams that send regular newsletters with consistent branding, this module system dramatically reduces production time.

Stripo also includes an "AMP for Email" editor that lets you create interactive emails with carousels, accordions, and forms. AMP emails work in Gmail, Yahoo Mail, and Mail.ru, and they allow recipients to interact with content without leaving the email. This is a relatively new capability that most email builders do not support.

Stripo's free plan includes basic features and 5 email exports per month. The Basic plan at $15 per month provides 50 exports and premium templates. The Professional plan at $25 per month includes unlimited exports, AMP emails, and team collaboration.

Litmus and Email on Acid: Testing Your Email Designs

Regardless of which tool you use to build your email, testing across email clients is essential. Litmus and Email on Acid are email testing platforms that render your email in 50+ email clients (Gmail, Outlook, Apple Mail, Yahoo, Thunderbird, and mobile apps) and show you exactly how it looks in each one. They also check for spam filter issues, broken links, image loading problems, and accessibility compliance.

Litmus integrates directly with Mailchimp, Bee, Stripo, and most other email builders. After designing your email, send it to Litmus for testing with one click. The test results show screenshots of your email in every major client, highlighting rendering differences. Litmus costs $99 per month for the Basic plan (1,000 tests per month). Email on Acid offers similar functionality starting at $89 per month.

Email Design Best Practices

Design for the preview pane. Most email clients show the first 200-300 pixels of your email as a preview. Place your most important content (headline, key offer, primary CTA) in this area. If the preview pane does not capture the reader's attention, the rest of the email does not matter.

Use a single-column layout for mobile. Multi-column layouts that look good on desktop often break on narrow mobile screens. Most email builders automatically stack columns on mobile, but test this behavior to confirm. If a two-column layout (image left, text right) stacks with the image above the text on mobile, ensure the image is not so large that it pushes the text below the fold.

Keep images under 200KB each. Large images slow email load times and may trigger clipping in Gmail (which clips emails larger than 102KB). Optimize images before uploading them to your email builder. Tools like TinyPNG and Squoosh reduce image file sizes by 60-80% with minimal quality loss.