One column, or more?

The "one column" is becoming more and more important in the #emaildesign and becomes THE graphic trend (It's not from yesterday either, admittedly). But what exactly is the "one column"? And why?

Very few articles deal with the subject, and I discover only now Campaign Monitor'swhich is in line with the points I was going to raise. So I'm approaching the question, moussaillon, in French and with some additional information and opinions!

First of all, what is it?

one column email

The "one column" or "single column" consists, in design, not to put elements side by side but to use the full width of the container (the email then) for the content. So they look exactly like their names: email templates that have only one column, as opposed to templates that might have two to three columns (or more).

In other words, the textual and visual elements are one under the other, in a single column. Here is an example of a "one column" email on the left.

Okay, so why?

Today, more than half of all email views or opens are done on mobile. It is therefore important to think of an email structure that goes in this direction and facilitates consultation first on mobile.

The "one column" is perfect for this, since it consists of stacking blocks one under the other with large text sizes, much more readable, large call to action more easily clickable ...

Need help?

Reading content isn't everything. The best way is to talk to us.


In addition, by following this design technique, the hierarchy of information is even clearerand the elements will keep the same order on desktop as on mobile.

Does this mean that multi-column design methods are dead? Are they bad for readability, or in terms of technique? And if the "one column" becomes a graphic trend, don't we risk getting bored if everyone starts doing the same thing? Let's take stock.

The advantages of the one column in an email.

1. Graphics, first of all.

  • Because it's a little less work for the email designer, and that's no small thing...
  • Because we can, if we start on a width of less than 480px for example, provide a single version of the email which will be adapted to both desktop and mobile versions, especially with mobile screens getting larger and larger...

2. Then, techniques.

  • Because we will then use a single table (<table>) so that the content easily adapts to any screen size.
  • Because it is easier to manage for the mobile: no need to pass the elements under each other, it is already the case! This reduces the use of media queries and it's cool when you know the problems of the display:block on the <td> .
  • Because there are no more unpleasant surprises when it comes to reversing the order of two columns since there is only one left.
  • Because there are fewer blocks to manage, there is potentially less risk of error in the HTML code.
  • Because the HTML structure is then simpler: it simplifies the support on all email clients, and it reduces the weight of the HTML code.
  • Because if we know how to make good use of Spongy Code, the max-width and shadow boards for Outlookthen we can achieve an ideal template for mobile and desktop, with automatic resizing according to the width of the screen even if media queries are not supported.

3. And then practical.

  • Because when you don't control the content because it is dynamic (texts in a database for example, which you do not have control over)it may be more relevant to use the one column for a total elasticity of the enamel.
  • Because we don't know the resolution of the mobile screen, and if we plan blocks with two or more columns, the contents may be very narrow, or even cut...
multi column email versus one column email
So many lines for so little text... If it is not unfortunate...

4. And ergonomic...

  • Because the one column is designed to be read quickly and your recipients have less and less time...
  • Because the content hierarchy is clearwith the most important information at the top and a standard scroll, regardless of the client.
  • Because a single-column email places information exactly where users expect it to be.
  • Because the scrolling function seems intuitive on a single column email.
  • Because the one column gives more space to titles and texts, you can enlarge them and improve their readability.

Is it good for that?

As you can imagine, if there are advantages, there are also disadvantages, conditioning, feelings. Here they are:

  • Generally, the visuals will actually take up the entire width. If the email is 600px wide, then the visuals will be 600px wide. This makes the visuals quite large and therefore, quite heavy. Think of optimizing the weight of the visuals!
  • The one column can create a certain weariness for the recipients, who finally have the impression that "all emails look the same. Not that modules designed in any other way than one column are always radically different, but they do allow for a certain rhythm to be applied, don't they?
  • Having multiple columns allows you to divide content and display it in an attractive way.
  • When stacking with media queries was not possible, ok.... But now, in 2022? Progress has been made: the support of responsive in email should, on the other hand, make it easier to use multiple column templates.
  • What about the rendering on a desktop computer? It can give the impression that the contents (cta, titles, texts) are oversized...
  • The vertical scroll is much longer Do you really want to put your recipients through this?
  • With cell phone resolutions getting bigger and bigger, maybe collaring will be applicable on mobile in the long run, right?
  • The main content is probably easier to place above the waterline with several columns...

But finally, as usual, it all depends on your users!

You've got it, the choice will be made according to the consultation habits of your recipients If they open their emails mainly on mobile, then it can be relevant to design your emails in "one column".

Do not hesitate to use tools such as Emailonacid or the opening environment statistics of your previous campaigns. In any case, remember thatadapt your techniques to design in email marketing and email coding show your subscribers that you care about their experience. And this is very important!

Sources

Share
The author

Laisser un commentaire

Your email address will not be published. Les champs obligatoires sont indiqués avec *