Chapter 3: Responsive Design for Emails

Making Emails Responsive

Responsive design ensures that your emails look good on all devices, from desktop computers to tablets and smartphones. Given the diversity of screen sizes, it’s crucial to build emails that adapt to different viewports for the best user experience.

Common Media Queries

When writing CSS for responsive emails, you may encounter or use common breakpoints (media queries) such as:

• @media only screen and (max-width: 600px)
  Often used for smartphone screens in portrait orientation.
• @media only screen and (max-width: 768px)
  Targeting tablets in portrait orientation or small desktops.
• @media only screen and (max-width: 992px)
  Used to adjust layouts for mid-sized tablets or smaller laptops.

In email design, the most common breakpoint is 600px, since many email layouts are designed at a fixed width of around 600 pixels on desktop. By using a max-width: 600px media query, you can easily adjust styles for mobile screens.

Using Media Queries in HTML Emails

While most modern web pages place media queries in an external CSS file or in the <head> of the HTML, some email clients ignore or strip out those styles. You can improve compatibility by:

• Embedding your CSS within a <style> tag in the <head> or even inline.
• Using inline media queries where supported (though this can be less reliable).
• Testing thoroughly across different email clients (e.g., Gmail, Outlook, Apple Mail) and devices.

How to Test on Mobile Devices in Google Chrome

You can use Chrome's built-in **Developer Tools** to simulate mobile device sizes and orientations:

1. Open Developer Tools: Right-click anywhere on the page and select Inspect, or press Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac).
2. Toggle Device Toolbar: In the top-left corner of Developer Tools, click the Toggle Device Toolbar icon (it looks like a phone and a tablet). This switches to the mobile device simulation view.
3. Select a Device or Set Custom Dimensions: From the dropdown at the top of the preview pane, choose a common device (like an iPhone or Galaxy) or set a custom screen size. Chrome will emulate that device’s viewport, allowing you to see how your layout adjusts.
4. Rotate or Resize: You can switch between portrait and landscape modes or adjust the custom width and height to see how your design reacts.

This tool is invaluable for catching layout issues that might only appear on smaller screens.

Best Practices for Responsive Emails

• Use flexible layouts and percentages or max-width properties instead of fixed widths.
• Hide or rearrange non-essential elements for smaller screens to keep the email concise.
• Ensure any images are set to width: 100%; with height: auto; so they scale properly on narrow devices.
• Test your emails on multiple devices and email clients to verify how they render.

Continue to the coding example to see how these concepts are applied in practice.