A World Different from the Web: Trial and Error in Email Template Work

Email clients are not web browsers, so ordinary responsive CSS didn't work as expected. At first, like with existing templates, I tried using media queries for mobile support, but after actually checking sent emails, image resizing wasn't applied and the layout broke.

To reduce these issues, I switched to keeping the same layout on both web and mobile, letting it shrink naturally as the screen got smaller. However, even within the same mobile environment, the appearance differed slightly across Safari, the Gmail app, the Naver Mail app, and the iOS default Mail app.

The cause is that each email client has a different internal rendering engine. Unlike browsers, you can't expect standard HTML/CSS support, and the following elements in particular are frequently restricted.

• Limited support for the <style> tag and complex selectors
• Incomplete support for layout properties like display: flex and grid
• Differences in box model handling for things like margin and padding
• Overlap-related properties like z-index and position being disabled
• Unstable behavior of @media, especially in Gmail and Outlook

So for email templates, table layout + inline styles ends up being the most practical solution. Typically, you place a 100% width table on the outside and a 600px fixed-width table in the center, so it looks stable on desktop while shrinking to fit the screen on mobile.

The key is not to force responsiveness through CSS, but to design the structure itself to be responsive. Images also need to be handled relative to the container width, and for designs requiring overlap, it's safer to handle them via image compositing.