使用Zurb Foundation(SASS)开发响应式邮件，如何获取可发送的HTML代码？

Great job getting your test email looking sharp in the browser! Now comes the trickier part: making sure it renders reliably across all major email clients—they’re way less forgiving than web browsers, even with a robust framework like Foundation for Emails. Here’s what you should prioritize next:

• Compile and Inline Your CSS: Email clients (especially Gmail) often ignore embedded <style> tags or external stylesheets. Use Foundation’s built-in CLI or tools like Premailer to inline every style directly into your HTML elements.
  • If you’re using the official Foundation starter project, running foundation build will handle this inlining automatically—super handy!
• Test Across Email Clients: Browsers don’t tell the whole story. Use preview tools to check how your email looks in Gmail, Outlook (desktop and mobile), Apple Mail, and Yahoo Mail. Watch out for:
  • Outlook’s obsession with table layouts (Foundation handles this, but double-check no tables break).
  • Gmail stripping media queries (Foundation’s responsive classes are designed to work around this, but verify mobile rendering still works).
• Validate Your XHTML: Your template uses XHTML 1.0 Transitional, which most email clients prefer. Run your code through a markup validator to catch unclosed tags or invalid attributes that could cause rendering glitches.
• Optimize Images for Email: Many clients block images by default. Add descriptive alt text to all images, and avoid using images for critical content (like call-to-action buttons—use text-based buttons with inline styles instead).
• Test Mobile Responsiveness: Resize your email in browser dev tools to mimic mobile screens, but also send test emails to your phone to see how it feels in real apps. Foundation’s grid should handle breakpoints, but confirm your custom SASS variables don’t mess with mobile layouts.

Example of an Inlined Snippet #

After compiling, your template might look something like this (styles are now inline):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Your Test Email</title>
</head>
<body style="margin: 0; padding: 0;">
  <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f4f4f4;">
    <!-- Rest of your inlined content here -->
  </table>
</body>
</html>

Pro Tip: If you’ve customized any SASS variables, double-check they compile correctly before inlining. Foundation’s defaults are optimized for email, but overrides can sometimes cause unexpected issues in finicky clients like Outlook.

Once you’ve worked through these steps, send test emails to yourself using different accounts (Gmail, Outlook, iCloud) to see how it performs in real scenarios. Foundation for Emails takes care of most client quirks, but nothing beats hands-on testing to ensure your email looks great everywhere.

内容的提问来源于stack exchange，提问作者Marcus Persson