Untangling the knots: Fixed, fluid, adaptive and responsive design
One of the hottest topics in marketing at the moment is catering to the mobile audience. Every reputable company wants their emails designed to look beautiful no matter the screen size. But sometimes, buzzwords get the best of us and all that’s left is confusion. So what exactly is the difference between fixed, fluid, adaptive and responsive design?
Much like it says on the tin, fixed design doesn’t change depending on the device which is viewed on. If it’s designed with desktop in mind, opening it on mobile means images and text might get cut, and a combination of horizontal and vertical scrolling might be needed to see the whole content. On the other hand, if it’s designed with mobile in mind, opening it on desktop will show a skinny email with super-sized text and buttons. Needless is to say that neither of them are a great experience.
This allows the designer to retain some control over the content, while offering a slightly better user experience. In fluid design, widths are set as percentages of the screen and relative to each other. In this way, an image will always be 30% of the screen size, regardless if that screen is a desktop or an iPhone screen.
The problem is that simply shrinking or enlarging content might not always be the best strategy. It can become too small to be viewable, or look out of proportion.
This is where most of the confusion occurs. The terms ‘adaptive’ and ‘responsive’ are often used interchangeably, and wrongly so. The former was actually introduced by Aaron Gustafson in his book Adaptive Web Design.
This is a step-up from fluid design, and uses media queries. These are sets of rules that allow the designer to specify how the layout should change depending on the size of the screen. For example, they might shift a two-column design into a single column to allow for a better scrolling experience.
Adaptive design usually works using server side data. This means the web server receives the email, and based on the information it has, picks a layout to display. The drawbacks of using adaptive design is that it needs updating as new devices are launched with different screen sizes. So new layouts need to be planned to suit them.
Responsive design was coined in 2010 by Ethan Marcotte. Building on the idea of fluid design, the images and videos included in the design are also fluid. So their size and quality, not just their placement, will change depending on the device screen. It also uses em as a font size measurement instead of pixels.
Media queries are also used to rearrange the layout, but the reflow in response to the screen is done on the client’s side. This means the email is sent out in a single format, and the email client will decide how to display it at opening. It’s good to keep in mind that responsive and adaptive design are not mutually exclusive, so they can be used to complement each other.
I hope to have shed some light on this, but do leave comments if you have any questions. Also, look out for my next post discussing the pros and cons of a single-column design versus a responsive design.