Skip to content
  • Blog
  • Events
  • Help
  • Careers
  • Contact
New Signature
  • About
      • Company

        Cognizant Microsoft Business Group is dedicated to changing the way businesses innovate, transform and run based on a unique cloud operating model. You will now be redirected to our new microsite to learn more.

        View Company

      • Awards

        As a company, we are regularly recognized within the IT industry as well as the communities we serve.

        View All Awards
      • News

        Read the most up-to-date corporate announcements, Microsoft technology updates, innovative business solutions and learn more about how the Cognizant Microsoft Business Group can take your business even farther.

        View News

      • Partners

        New Signature works with a number of outstanding technology companies to deliver the best experiences to our customers.

        View Partners
      • Leadership

        Cognizant Microsoft Business Group’s executive team is comprised of innovative leaders with proven experience and deep industry expertise. You will now be redirected to our new microsite to learn more.

        View Leadership

      • Industries

        Our solutions are tailored to empower organizations across a wide range
        of industries.

        View Industry Experience
    Close
  • Solutions
      • Intelligent Enterprise
        Solutions

        Going Digital
        Unleash cloud capability, deliver change and compete at speed with a Microsoft digital operating model, enabling you to work more efficiently as you transform your IT environment. Learn More

      • Featured Solution

        Secure Cloud
        In a world of constant threat, ensuring that your underlying cloud platform is protected is the first step on your organization’s journey towards a secure, compliant operating environment. Learn More
      • Intelligent Workplace
        Solutions

      • Secure Workplace

        Work Anywhere

        Endpoint Health

        Identity Health

        Teamwork Support



        VIEW WORKPLACE SOLUTIONS
      • Intelligent Cloud
        Solutions

      • App Factory

        Azure Accelerator

        Azure Launchpad

        Azure Launchpad for DevOps

        Application Health

        Platform Health

        VIEW ClOUD SOLUTIONS
    Close
  • Services
      • Begin your journey towards becoming a digital business with GO, our unique end-to-end framework based on the Microsoft Cloud Adoption Framework.

        GO DIGITAL OPERATING MODEL
      • Intelligent Enterprise

      • Consulting

        We go beyond just technology to help your organization understand how digital can help you uniquely differentiate and better serve your employees and customers.

        VIEW ENTERPRISE SERVICES
      • Intelligent Workplace

        • Identity

          Identity is your new first-line-of-defense. It’s vital to your users and clients that your identity platform is properly configured and secured.

          Endpoint

          Whether your devices are on-premises or remote, personal or business-owned, we can ensure they are properly managed and protected.

          Teamwork

          Today’s workforce is collaborating than ever before.  We can empower your current teams with tomorrow’s progressive technologies.

          VIEW WORKPLACE SERVICES
        • Intelligent Cloud

          • Platform

            The cloud is no longer some future-state. It’s the here and now. Adopting a cloud-first platform is one of the best ways to maintain a future-proofed competitive advantage.

            Applications

            We build cloud-native apps and modernize legacy systems with the power of Azure to give your organization a competitive edge.

            Data

            We can help your organization create secure, scalable data platforms to deliver simpler and more sophisticated insights to your business.

            VIEW CLOUD SERVICES
        Close
      • Client Stories
          • Case Studies

            Browse a comprehensive list of companies who have created successful partnerships and experienced transformative solutions with New Signature.

            View All Case Studies

          • Featured Case Study TalkTalk Modern Workplace

            New Signature worked with TalkTalk to define a new Modern Workplace solution based on Microsoft 365, which kept the user firmly at the center of the transformation.
            View Case Study

          • Testimonials

            We love transforming our customers businesses, take a look at what they have to say about New Signature.

            View Testimonials

          • Featured Testimonial Davis Construction

            With New Signature’s help, Davis was able to take a progressive step forward by migrating their private branch exchange (PBX) phone system to a Voice of Internet Protocol (VoIP) system.
            View Testimonial

        Close
      • Explore
          • Guides & Ebooks

            Dive deeper into education with your team by leveraging our expert-developed guides and eBooks.

            View All Guides & Ebooks

          • Infographics

            Rich with statistics and information, our infographics are great tools for quick but insightful learning.

            View All Infographics
          • Podcast: Office Explorers

            Join Kat and Rob monthly as they chat with New Signature experts and explore the world of O365.

            Listen to Podcasts

          • Videos

            Visit our videos stream to access recorded webinars, service information and to learn more about us.

            WATCH ALL VIDEOS
          • Flyers

            Searching for information about our services? Our flyers are a great takeaway for all those details.

            VIEW ALL FLYERS

          • Featured Stream

            Learn more about the tooling and expertise required to unlock productivity and mobilize your teams.

            MODERN WORKPLACE
        Close
        Close
      Blog

      Responsive Email Templates in Outlook: Tips and Pitfalls

      New Signature / Blog / Responsive Email Templates in Outlook: Tips and Pitfalls
      August 1, 2014June 29, 2016| New Signature
      • Facebook
      • Twitter
      • LinkedIn
      • Print

      Creating HTML email templates can seem like a lesson in navigating minefields, due in part to the many various email clients and systems that process emails. In this article, I’ll focus on tips for creating responsive email templates in Microsoft Outlook.

      How Outlook Works

      If your newsletter subscribers or clients are in an office setting in the United States, they’re likely using Outlook to view emails. The software has been around since at least 1997, going through several changes over time as Microsoft hones its support.

      One of the major changes that affects responsive email templates occurred with the release of Outlook 2007. Prior to this release, Outlook 2003 used Internet Explorer 6 to render emails, a browser well known for not supporting modern HTML and CSS standards. On the other hand, Outlook 2007 started the trend of using Microsoft Word for rendering emails. If you’ve seen CSS properties for emails prefixed with “mso,” the reason is Microsoft Word’s integration with Outlook.

      Common Pitfalls

      Because Word renders emails for Outlook, there are several common CSS properties that Outlook will not recognize. Some rules are ignored completely while other rules have a different interpretation.

      First, media queries for targeting screen size or resolution are not supported in Outlook. This isn’t really a big deal as the Outlook client is used on desktop browsers. I bring this point up strictly to keep it in mind during development. It’s easy to forget when you open an email in Outlook, resize it, and wonder why your media queries aren’t working!

      Secondly, CSS written in the head section of an HTML document will get removed from an Outlook email. This means that you’ll want to inline your CSS with HTML. Have no fear though! MailChimp provides an excellent CSS inliner tool to do the grunt work for you!

      Next, the most common CSS properties to avoid are background-image, float, margin, and display. These four rules are very common in standard HTML / CSS development practices but are outright ignored in Outlook. The most common of the four is probably the margin property. Interestingly, when Microsoft officially merged Hotmail accounts into Outlook, the margin property was dropped in Hotmail users as well.

      Finally, the padding and width properties are very widely used in CSS development. They are pretty well supported in most Outlook email templates. The main exception is block level elements. Specifically, applying padding or width in CSS to a div or p tag will not work with Outlook. For responsive email templates, they are largely supported for HTML tables.

      Creating Layouts for Responsive Email Templates

      The major players in email delivery and testing services, including Campaign Monitor, MailChimp, and Litmus, recommend sticking to table-based layouts for responsive email templates. The reason for this strategy stems from the previous section about common CSS pitfalls. When you need to create a multi-column layout without use of float, margin, and display, you’re really left with using tables.

      You may wonder about a table-based layout on a phone. At first glance, it seems like a wide table won’t work well for hand-held devices. Well, as it turns out, most of the CSS pitfalls mentioned here have full support in all the common phone software. Therefore, at the phone-level, set your table, tr, td elements all to behave as blocks using the display CSS property. Outlook will ignore these directives; your phone will not!

      Further, because of the use of tables, using the cellpadding and cellspacing HTML attributes are recommended instead of using the padding CSS property on a per-cell basis. The reason is quite simple. Let’s say that hypothetically you have a row of 3 table cells. If the middle cell has a top or bottom padding via CSS, it will get applied to all cells in the row. This is how tables are meant to function in the HTML 4 spec, so it’s really in our best interest to use the HTML 4 attributes for tables.

      Challenges in Rendering

      The final part to consider is how your email actually renders for your subscribers or clients. By far the most challenging aspect to grasp is that your HTML will more than likely get restructured by Outlook. In some cases this involves rearranging HTML elements, but in other cases this involves the introduction of new, sometimes deprecated HTML elements.

      For a simple example, I wrote HTML for a table with two rows (tr elements). Inside one of these rows is a third-level heading – the h3 element.

      HTML for responsive email templates

       

      This is what happens in Outlook, when the email is received by the client:

      Outlook interpretation of responsive email template

      The first thing to notice between these two images is that the table now has only a single row. It’s not displayed in this image, but Outlook actually created a totally new table element and placed the second row inside this new table. Secondly, where there was once an h3 element, Outlook replaced that with a set of font and span tags. You’ll note that the font tag is deprecated in the current HTML standard.

      The effect of this HTML editing means that your CSS should not be too specific: don’t expect adjacent or sibling selectors to work automatically, and don’t expect a container to always include a child element. You’ll note that the h3 tag I wrote also had a CSS class, but in Outlook that class is removed. This effect is the reason you should inline your CSS.

      To conclude this article, I’d like to direct you to a few resources to help you succeed with creating responsive email templates.

      Resources

      1. Background images and Buttons
      2. Word 2007 HTML and CSS Rendering – A guide from Microsoft in how Microsoft Word renders HTML
      3. A Designer’s Guide to Outlook 2013 – A look at the newest release of the Outlook desktop client from Campaign Monitor
      4. The Ultimate Guide to CSS – An all-encompassing guide to CSS properties in for responsive email templates
      Categories
      Tips and Tricks
      Contact New Signature

      Blog Posts

      • Return to the Workplace Solution
      • Be Cyber Smart with Tips from Our Experts
      • Office 365 Security with Expert Ella Wright
      • Webinar: Creating a 360-Degree View of Your Customer

      Events

      Thu 28

      Power Platform Series: Drive Organizational Productivity with Power Virtual Agents

      January 28 @ 10:00 am - 10:45 am EST
      Feb 16

      Cognizant’s Experience Lab for Continuous Testing with Azure

      February 16 @ 12:00 pm - 2:00 pm EST
      Feb 25

      Power Platform Series: How to Build Resilience and Revenue with Dynamics 365

      February 25 @ 10:00 am - 11:00 am EST

      View More

      New Signature
      New Signature HQ
      901 K Street NW, Suite 450
      Washington, DC 20001
      Phone: 202-452-5923
      New Signature Canada HQ
      7th Floor, 5140 Yonge Street
      Toronto, ON M2N 7J8
      Phone: 416-971-4267
      New Signature UK HQ
      57 Bermondsey Street
      London SE1 3XJ
      Phone: +44 (0) 845-402-1752

      About

      • Company
      • Awards
      • News
      • Leadership
      • Partners
      • Industries

      Solutions

      • Intelligent Enterprise Solutions
      • Intelligent Workplace Solutions
      • Intelligent Cloud Solutions

      Services

      • GO
      • Intelligent Enterprise
      • Intelligent Workplace
      • Intelligent Cloud

      Client Stories

      • Client Stories
      • Testimonials

      Explore

      • Guides & Ebooks
      • Podcasts
      • Flyers
      • Infographics
      • Videos
      Copyright © 2021 New Signature
      • Blog
      • Events
      • Careers
      • Help
      • Anti Slavery
      • Privacy Policy
      • Contact
      • About
        • Company
        • Awards
        • News
        • Leadership
        • Partners
        • Industries
      • Services
        • GO
        • Intelligent Enterprise
        • Intelligent Workplace
        • Intelligent Cloud
      • Client Stories
        • Case Studies
        • Testimonials
      • Technologies
      • Explore
        • Guides & Ebooks
        • Infographics
        • Podcast: Office Explorers
        • Videos
        • Flyers
      • Blog
      • Events
      • Careers
      • Contact
      • Search
      Cookie Settings
      New Signature uses "Required Cookies" to run our website, "Functional Cookies" used by third parties to personalise marketing, including social media features.

      Change your preferences by clicking the “Cookie Settings” link at the bottom of every page. Learn more about cookies in our Cookie Policy and our Privacy Policy. By clicking the “Accept Cookies” button below, you consent to our use of cookies.

      Please note that “Required Cookies” will be set regardless of your consent.
      Cookie SettingsAccept Cookies
      Privacy & Cookies Policy
      Performance

      Performance Cookies provide Content Delivery Network assets that deliver faster site content delivery capabilities.

      Required

      These cookies are required mainly in order to deliver Multilanguage site capabilities.

      Functional

      Functional Cookies allow us to provided advanced media capabilities including videos, surveys and other multimedia capabilities.

      Disabling Functional cookies will block the playing of videos and other multimedia site components.

      Targeting

      Targeting Cookies are used to capture user information in order for New Signature to deliver better user experiences.

      Save & Accept