The Outlook page break is one of the most confusing rendering issues for those who send out email. First I’ll define the problem, then I’ll show how to “fight” it, then I’ll discuss the technical reasons why it happens. The easiest example (and likely the issue you’ve run into yourself) is when you have a template with a sidebar, and when you send a test, portions of the sidebar or main content area get pushed down for no apparent reason:
The Outlook page break can manifest in a number of other ways as well: images not lining up exactly where you want them to, three column areas not lining up, buttons getting pushed far below the content that they belong with. The bottom line is, large gaps are occurring in your email and you need to fix it pronto.
The cause: Outlook 2007, 2010, and 2011 don’t like very tall tables (HTML tables, that is). The problem is, templates require a “buffer table” to ensure background colors are present and that content gets centered in a way that all email clients can agree on. So if we have a template with a single buffer table, a bunch of content in our mailing, and a couple of columns to place our content in, we end up with a “very tall table” with some side by side content that Outlook will adjust. And outlook will create a page break. Here’s a diagram of a dramatic page break, where the entire sidebar gets pushed too far down for anyone’s good:
If you notice your template having Outlook Page Break issues, you can segment your table into several different buffer tables. I’m talking completely separated HTML tables, not separate rows (<tr>) of the same buffer table, because even if you separate by rows, it’s still a tall table and the Outlook versions in question will not like it. Here’s a diagram of a template with three separate buffer tables – one for the header, one for the content, and one for the footer:
Just because we’ve gone that far, it STILL doesn’t mean that you’re in the clear, because there is always the potential of filling up your mailing with more content, and more content means higher probability of page breaks. If it happens again – you guessed it – you’ll need to add another content area inside another buffer table.
If you want to avoid the whole process of coding and recoding your HTML templates on a mailing to mailing basis, consider the following suggestions that not only will simplify your template but just might provide the results you need.
- Use templates and/or story layouts with only one column. Long term, this will ensure you won’t see an outlook page break ever again.
- Use a combination of single and multiple columns for your content – the fewer amount of 2 or more column areas you have, the less instances you will see the page break occur. This cuts back on the page break, but you may need to rearrange your content every once in a while since there still would be two-column areas.
- Consider the amount of content you are adding to your mailing – could it be reduced? Using summaries and linking out to Informz content manager pages offers our clients a means to keep their editorial pieces concise.
Now that I’ve gone over the solutions – here’s why the Outlook page break happens:
- Outlook 2007, 2010, and 2011 all “pre-process” HTML emails into a printer-friendly format, whether you want to print it or not.
- In doing so, Outlook will isolate any table that is very long (1,790 pixels, or 23.7 inches) and push content next to whatever happens to be in that window down either a little bit, or a lot, depending on where the page break occurs and where the separated columns begin.