What are fixed vs fluid layouts?
Still have a question, spotted an error, or have a better explanation or a source we should cite?
Think about how web design works in browsers. A website stretches to fill your screen whether you're on a phone or a desktop. But email clients don't work like web browsers. That's why email designers have to think about layouts differently.
A fixed layout has a set pixel width. Usually 600px. It doesn't change, no matter what size screen someone's using. You get pixel-perfect control. Everything lines up exactly as you designed it. The downside? On mobile, it shrinks down and gets tiny, or subscribers have to zoom in to read it.
A fluid layout uses percentages instead of pixels. It stretches and shrinks to fit the screen. On mobile, it adapts automatically. On a huge monitor, it uses all that space. Sounds great, right? The catch is that really wide screens can make your layout look awkward, and you need to test extensively to make sure it doesn't break.
Here's why this matters in email specifically. Different email clients render code differently. Some strip out media queries, which are the tools that let you change layouts at different screen sizes. That's why email designers can't just copy what web designers do.
Fixed layouts give you control but require extra work to handle mobile. You'll need separate styles or media queries to stack columns on small screens. Fluid layouts adapt automatically, but they need careful testing to look good at all widths.
Most modern email designs use a hybrid approach. You get responsiveness without media queries by combining fixed and fluid thinking. Test your emails on real devices using Litmus to see which approach works best for your audience.
Contributors
Who worked on this answer
Every name links to their profile. Every company links to their site. Real people, real accountability.