If you use a wide container (for example 1280px) then the content of that container should look good even if the actual width is much lower (for example 800px). Another good example for this is Inbox by Gmail:Įven though it's possible to create containers which can be much wider than 600 pixels, the reality is that in many email clients there is simply not enough space.īecause of this reason, your design should be prepared for variable wide containers as well. This ensures that the container will not be wider than its parent.Īs you can see it fixed even Lotus Notes 8, but if you take a closer look, you can see that the widest container is not as wide as it should be. If there is not enough space, then the container will use width="100%".
With this method, you can create much wider centered containers than 600 pixels. You might remember the rule of thumb from the previous lesson, where I introduced the "Drop Calc method". You can see from the Litmus test results that IE based email clients (for example Outlook2000 or Lotus Notes 8) still don't apply the correct width. īy wrapping the previous table with another table in a conditional comment, Word-based Outlooks can be fixed. Let's start with the Word-based versions. Luckily it's possible to use conditional comments to fix Outlooks. We have to figure out a way where the width of the container can stay 100% and force the problematic email clients pixel values in another way. If you don't use 100% as the width of your container, then it won't adapt to the available space. You must use pixel values in the width CSS property or the width attribute to support these email clients. The problem is that Outlooks and Lotus notes do not apply max-width. The following example contains five containers with different widths: 1440px, 1280px, 1024px, 800px and 600px.Īs you can see in the Litmus tests, it's generally a good solution. (Just think about Outlooks.) The pattern for the centered container looks like this: I like to use table-based containers because they are very robust. The straightforward approach to achieve the solution above is to use width: 100% and max-width: 960px (or any other number) in your containers. It means that your content is generally fluid with an upper boundary (for example 960px), and your multi-columns are stacked under 600 pixels. The break-point for this can still be 600 pixels. If you have multi-columns in your email, then they should be stacked on mobile devices.
When the device's width is less than the container's width, then the width of our container should be fluid (width: 100% ).
Change column width in word for mac how to#
So, how to define that generic solution? Well, the width of our content containers should not only be 600px, but much, much larger than that as well.
What if I start a new newsletter? What if I need to use my templates somewhere else? This approach is just way too much work. To be honest, I'm not satisfied with the "looking at our email list then decide" approach. They realized that most of the people on their email lists open their emails on such email clients where it's not an issue any more. There are many companies who are experimenting with wider newsletters. Many people in the email community are doubting that we still need to use such narrow designs. The latter is an in-depth article, I really recommend you to read that. The first was published on this blog long, long ago the second was published recently on chamaileon.io's blog. But why is that? We have written two articles about it already. The de facto standard for HTML emails' width is 600 pixels.
0 kommentar(er)
