Tel: 01865 242425

Tel: 1-855-835-0471

Tel: 1300 993 579

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?

Fixed 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.

Email Desktop example

Fixed-width email designed with desktop in mind, opened on desktop

fixed email example

This is how the same email might look on mobile

Fluid design

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.

Desktop example 2 image

Desktop version of fluid design

Fluid email image

Fluid design on mobile screen

Adaptive design

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.

Email Desktop example

This is how the email would look on a desktop screen

Responsive email example

Responsive and adaptive emails might look the same, but they work differently

Responsive design

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.

Tags: , ,