We stick to two methods: emails with concise, short content so that they never hit that 22"/1800px mark, or conditional styling for Outlook, which can mitigate the issue and make it far less noticeable. There’s no way to disable this “feature” you’re relegated to finding work-arounds. That page break ends up being inserted between the aligned tables, which causes one to move under the other: When a document reaches this limit, around 1800 pixels in length, Outlook 2007 & 2010 oh-so-helpfully inserts a page break to aid with printing. There’s a major problem with using this aligned table method, specifically having to do with Outlook’s 22 inch height limit on documents. With the body placed on the left, but aligned to the right and the sidebar placed on the right and aligned to the left, the sections snap into place once the media query triggers: The Outlook Problem The major differences are in the markup, where the sidebar and body are placed in a semantic order, and the align attribute directions on each table are opposite of their desktop-view positions: If you’re following along from scratch, grab the files from GitHub and create a new HTML document in the same directory as the /images folder. The HTML is very similar to other responsive column layouts. Our responsive HTML email layout Advertisement Getting Started Let’s start off with our blank canvas. We can use the aligned method to swap the order of the sidebar and body section and thus maintain proper semantic order when the email is viewed on a small display. On a small display, however, the sidebar would end up above the body, which doesn’t make much semantic sense: In the desktop view, the fact that the sidebar is to the left of the main content doesn’t really affect how you might read the email. Layout switching in cases like this is very useful generally, sidebars are for content that’s secondary in importance to the main body of the email. The clearest example of that is an email with a left sidebar and right main content area: As we mentioned in Responsive Multi-column Layouts, using aligned elements as columns allows for a lot of flexibility in terms of mobile layout.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |