Repositioning elements in email — more info
In emails, it's never best practice to change the positioning of elements from mobile to desktop. This means we should not have a single-column layout for mobile that becomes two-column for desktop, e.g. some elements that are side-by-side for desktop and that become stacked for mobile. Another term I use for this column juggling.
Single-column is best practice for email, for both mobile and desktop. Design mobile first, stick to single column, and you'll avoid these problems.
Avoiding column juggling in emails means less art time, less dev time, less QA time, and less routing/tweaking time.
But wait, is it possible to reposition elements?
In some cases, yes. But in emails it's never best practice. Why not?
In many cases, the designer wants to reposition elements in a way that is 100% not possible — often this is because they're attempting to change the order of the elements, which is absolutely not possible in email. More about this fascinating(?) topic at this end of this article.
In the case that the designer has repositioned elements in a way that is possible, this adds a tremendous amount of extra dev/QA/routing time, and it often results in positioning and balancing that just aren't satisfying to the team and client when viewed across all platforms. We often do not have fine control over spacing and positioning in email. On certain screens the balance may not look great, and this usually cannot be fixed. It's simply better to avoid going down this route.
So, let's say A) it is possible, B) the team is willing to spend the extra time/budget on it*, and C) the team is willing to let go of having fine control over the elements. Ask yourself these two questions:
1. Is there any benefit to the user?
2. Will this help the email be more successful for our client?
In my experience the answer to these questions, if we're being honest, is always no. Why spend the time and money on something that has no value to anyone? If we're thinking like digital designers, we'll avoid this.
*Remember: industry best practice is to keep emails streamlined and inexpensive for our clients; these are relatively short-lived digital tactics and it's difficult to justify spending a lot on them. Making an email that's overly complicated doesn't benefit our users/clients, and it could make our clients start to question why they're spending so much on emails.
Again, repositioning elements in email goes against best practice. Best practices are the rules for successful, streamlined digital design.
"But we've worked with another vendor who was fine with doing this."
That vendor was not thinking about best practices or efficiency; they were just executing without being a consultant or a partner. Maybe they just don't know a lot about emails, or maybe they don't care. And I'd be very curious to see how stringent their QA process is(n't).
For our clients, we must hold ourselves to a higher standard.
It is impossible to change the order of elements in email
Think of all elements in an email as being in the order of left to right, top to bottom. (This is exactly like how we read panels in a comic book — we start at the top left, we move across to the right, and when we hit the right edge we move down a row and go back to the left again — and repeat.)
If we're repositioning elements in email (which we should not), the element on the top must always become the element at left. The element on the bottom must always become the element at right.
A very common example is this: The designer designs an area with a testimonial quote. For mobile, the person's head is above the quote text. For desktop, they put the quote text at the left, and the photo at the right. This is impossible in email. If the photo is above the text for mobile, the photo must be to the left of the text for desktop. This is keeping the elements in the same order for both mobile and desktop.
I can't stress enough, best practice is to avoid juggling elements like this all together! Let's embrace these guidelines and help our clients understand why we do the things the way we do, and why it's in their best interest.
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.