Find a Depot

Browse all depots

As devices and platforms continue to change, the types of emails are understandably changing with it. The truth is that the names of the various email types are also changing.(Date of last update – 19 March 2017)For example, a ‘responsive’ design used to do very different things to what they do now. Litmus, a global icon in the email-coding world, explains in one of their blogs back in 2012 that the best email format is a combination of responsive and scalable (without giving that combination a name). In another blog in 2014 they contradict themselves and say responsive combines fluid with scalable emails. Confused? You’re not alone. These terms are not documented anywhere and are essentially suggested by the influential names in the industry. There are even more names around such as ‘skinny’, ‘optimised’ and ‘adaptive’ that only confuses the situation even more. We’re going to break down what we see as the four main types and what they’re all about.   Let’s start with the most basic form; Fixed. This is where emails began and in crude terms, are dated.

Fixed Email Layouts

Fixed email layout
  • Single layout on all screen sizes
  • All elements are static; they stay in the same position on any device
  • Quick and easy to code
  • Doesn’t look good on mobile devices
  • Some content on smaller devices will be cut off, requiring people to zoom and move the window
  • Clicking CTAs is fiddly due to the need to zoom in/out

It uses a single layout that stays the same size on all devices – All elements stay in the same position in relation to the other elements, and all the sizes of those elements is static. Whilst it is the fastest and easiest type of email to build, it has major limitations when users are viewing the email on anything other than a desktop computer. Viewing the email on a mobile device initially shows the content being cut off, as can be seen in the mobile device in the image above. To be able to view all the content, mobile users have to move the screen around, zoom in and out. It makes them fiddly to click exactly what you want (for example a call to action or link within some text) and can be frustrating to navigate. In a modern era people expect content to adapt to them, not them needing to adapt to you. This lack of usability reduces click through rates and in turn, conversions. In short, using a fixed template can lose revenue. 62% of people use a mobile device. Alarmingly, 71% of companies are still using fixed email templates* without any form of mobile optimisation. That means almost 3/4 of all companies are not optimising the experience for 62% of their customers.*Source: http://www.adestra.com/resources/infographics/email-marketing-report-card/  We move on in time to responsive emails. As mentioned before, this used to mean something different to what it does now.

Responsive Email Layouts

Responsive email layout
  • When they were first “invented” they had a single desktop version and a single mobile version
  • The two versions were often coded one on top of the other, with the mobile version simply being hidden on desktop devices, and vice versa
  • The mobile version uses a single break point
  • Worked well when there were fewer devices around
  • “Responsive” is now a term used for a layout that uses sometimes several media queries and % values rather than fixed px values

  Originally it consisted of two versions – A single desktop version and a single mobile version. Each version uses a ‘break point’ – A screen width the template is set to change layout to. The template would detect the width of the user’s screen and output one of the two designs based on that width. A few years ago when there were fewer devices and fewer mobile screen widths this solution worked very well. The desktop version covered all laptops and PCs and the mobile version covered the much smaller range of iPhones. The limitation now is that there are so many more mobile devices supporting email, each having their own unique device width. iPhone alone currently has four screen widths, and that doesn’t allow for their iPods and iPads. Add in Samsung, Nokia and all the other big players and break points become far too complicated to cater for. As the size of the mobile screen increases, more blank space is created around the edges of the screen. This also makes the size of the text and elements smaller on the larger of the mobile screens. The coding on these types of designs was also often quite primitive, with elements being created to specifically show on mobile whilst being hidden on desktops. The result for most the part is ok-looking, but still not ideal. It meant you were coding two separate emails, which had an impact on email file size and likely on spam filters, too.   We move on to an easier to follow concept – Scalable.

Scalable Email Layouts

Scalable email layout
  • Usually a single-column layout
  • Uses a single design that will look good on desktop and mobile devices, without the actual content changing in size
  • Large images and font sizes to make the content readable on mobile without zooming
  • Does not use media queries
  • Easy to code

This keeps the same grid layout on all devices but adjusts proportions to suit the screen width. Larger fonts can be used to make sure they can still be read on mobile devices, with calls to action also being a large size. The code is created using%instead ofpx, ormax-width. Every element is therefore reduced or increased proportionally to the screen size. This concept is slightly easier to code than the original responsive templates however can lack clarity on the elements due to them being reduced in size all over. This format is also not a true responsive email and can suffer the same usability issues as a fixed template.   Lastly, we come to Fluid emails.

Fluid Email Layouts

These are the best all-rounders and look perfect on any device, regardless of the screen width.

Fluid email layout
  • A combination of all email technology
  • Uses several media queries and % values
  • Content adapts to any screen size by using a % of the width
  • Most advanced but also most complicated to code

  It uses a combination of the traditional responsive logic along with scalable logic. Not only is the grid layout adapting and moving around depending on the width of the screen, but it also keeps to a percentage of the screen. It starts by using a break point to change the layout. Any screen size below that break point uses the percentage to ensure the adapted layout fills 100% of the screen. It is the most advanced and complicated version to code but looks much cleaner and more modern than all other versions.  

Which email layout should you use?

Simply, Fluid email layouts are the ones to use. They adapt to all screen sizes and you can even show specific content to an exact screen size, making it ideal for all viewers. 

70 thoughts on “Fixed vs. Responsive vs. Scalable vs. Fluid Email Designs”

  1. Exploring roulette strategies through math is fascinating. It’s intriguing how platforms like Jilicasino blend AI with gaming to potentially boost player odds-though luck still plays a big role, of course.

  3. Interesting analysis! Transparency in RNG is huge – seeing platforms like arina link prioritize data & quick PHP transactions (GCash/PayMaya!) is a smart move for the Philippine market. Definitely a step forward!

  4. Alright, I stumbled upon 80wim the other day. The sign-up process could be smoother, but the overall experience is good. Their selection of sports is impressive.

  5. Interesting read! Seeing more mobile-first casinos like ph987 apps legit pop up in the Philippines – convenient access is key. Smart to focus on local preferences and security, a winning combo for players! 👍

  6. Just tried out f8bethos and gotta say, it’s pretty slick! Games are running smooth and the site is easy to navigate. Seems like a solid spot to chill and have some fun. Definitely worth checking out! f8bethos

  7. Been messing around on 585bet2 lately. Nothing crazy, but it’s a good way to kill some time. Site’s easy to navigate, which is something I appreciate. Give it a spin 585bet2.

  8. Ooh, 556betvip… sounds fancy! Wonder what kind of perks they offer for VIP members. If you’re a high roller, might be worth looking into the VIP program. See what it’s all about: 556betvip

  10. I’ll immediately grasp your rss feed as I can’t to find your e-mail subscription hyperlink or e-newsletter service. Do you’ve any? Please allow me understand so that I may just subscribe. Thanks.

  11. Yo check out in7aapk! Another APK download spot, always lookin for those! Hope they have the ones I need and no weird permissions. Wish me luck! Give it a shot: in7aapk

  12. Interesting article! Strategic play is key, and platforms like nn77 login seem to recognize that with their analysis tools. Accessing via the app or browser is convenient too – good for Filipino players! 👍

  25. Heard about rr86 from a friend. Looks promising, like a cool place to chill. Anyone got any good stories about it? Check it out: rr86

  30. Dabetlive’s sports betting section is pretty good honestly, worth checking out if you’re into that sorta thing. I like to use Dabetlive. You can visit this link: dabetlive

  35. MerryPH Online Casino Philippines: Easy Login, Register, Slot Games, and Official App Download. Experience the ultimate gaming thrill at MerryPH, the most trusted online casino in the Philippines. Enjoy a seamless MerryPH login and quick MerryPH register process to access world-class MerryPH slots and live dealer games. Enhance your mobile experience with the official MerryPH app download. Join MerryPH online casino today for secure betting, exciting bonuses, and big wins! visit: merryph

  37. kinggamebio – Kinggamebio: Top Philippines Slot Online & Casino Games. Experience easy Kinggamebio login, register today, and enjoy our official app download for the best gaming experience.Experience the premier Philippines slot online and casino games at Kinggamebio. Enjoy easy Kinggamebio login, fast register, and our official app download for the ultimate gaming experience. Join today! visit: kinggamebio

  38. It’s fascinating how gaming platforms are evolving! Seeing a focus on mindful play, like with 58jl online casino, is a smart move. Responsible gaming tools are crucial – setting limits & recognizing patterns is key to enjoying the fun! 🤔

  45. Hi, I do believe this is a great blog. I stumbledupon it 😉 I’m going to revisit yet again since i have book-marked it. Money and freedom is the greatest way to change, may you be rich and continue to guide other people.

  46. Denofa’s Italian Deli6946 Torresdale Ave.Inside of the Tacony part of PhiladelphiaIs one particular of the Simplest cheesesteaks in close proximity to!Clean sliced sirloin chipped steak , completed upon the premises

  49. I love what you guys are usually up too. This kind of clever work and coverage! Keep up the excellent works guys I’ve included you guys to my personal blogroll.

  64. Seriously, can’t get enough of Pokerbaazi. Their customer support is really helpful too. Had an issue once, and they sorted it out quickly. Solid site all around. Poker lovers’ go-to pokerbaazi

  68. Yo! Just jumped over to mbet1. Quick registration process and decent odds. I’ve seen worse. Give it a try, you might just end up winning! Check it out yourself mbet1!

Leave a Reply

Your email address will not be published. Required fields are marked *