Beautiful design is just as important as personalized, relevant content in today’s email marketing. Many marketers are seeing their audiences go the way of mobile email reading, which makes it essential to be designing messages for these devices. There are many approaches to mobile email design.
Many marketers still go the way of mobile-friendly – also known as scalable – design. Typically, those just starting out with making their emails look good on phones use mobile-friendly design tactics such as large CTAs and text size, in addition to small amounts of text.
The pros are that it renders faithfully on any screen size and it’s good for brands who aren’t knowledgeable about coding. The cons as many coders will tell you, is that you don’t get much creative power in making your messages look the way you want them to.
That’s where the powerhouses come in: responsive design and fluid design. Each carries its own strengths and weaknesses.
Let’s find out which one comes out on top.
Responsive Design
Responsive design gives you a lot of control over your layout if you’re comfortable handling media queries. Media queries are used to control the layout on various screen sizes and devices. In other words, the email responds based on the device and the layout is adjusted to maximize readability and user experience. Some elements are scaled up. Some elements are removed. Some elements are moved or stacked differently than in a fixed desktop version.
For example, our campaign production services team has coded templates with a breakpoint of 480px (iPhone 4 in landscape view) that resizes the email to 320px wide (width of iPhone 4/5 in portrait view).
This has always worked great for the iPhone 5 (and earlier) and other similarly sized devices. Devices with screens between 320px and 480px (iPhone 6 anyone?) wide still display the mobile version of the email – just not at full screen. The email renders skinnier than the screen allows for with extra white space around it. It’s not an ideal user experience.
Typically responsive emails are built using 1 or 2 breakpoints and use fixed heights and widths for resizing. As a result, elements are relative to one another allowing the email to scale up and down to a fixed size for a specific device. But with the ever-growing library of mobile devices and tablets to choose from, this method can cause some wonky email rendering within some breakpoints.
Fluid (Responsive) Design
Now enter what many in the design community refers to as fluid – or liquid – design. We would argue that fluid designs are just another arm under responsive design.
Fluid design builds emails using percentages for resizing. As a result, elements are relative to one another, allowing the email to scale up and down fluidly below a single breakpoint. Fluid responsive design doesn’t alter the layout of an email; it simply ensures no matter what the size, your emails stretch to fit the size of the screen they’re viewed on. No awkward white spaces to be seen!
Responsive design vs. fluid design
A combination of both these design tactics is the way to go. By using fluid design in combination with responsive design tactics, you can support an infinite number of screen widths.
This is best viewed by dragging the width of the browser window and watching how the email and images adjust to the screen size in this example. Here’s an example of good responsive design and fluid design.