Follow

Optimize your emails for mobile viewing

  • Target mobile devices with the @media query
      The @media query will provide targeted CSS style sheets that are triggered when a device’s capabilities match specific criteria. It will allow you to adjust widths, padding and hide some content all together.
  • Make it smaller
      Mobile devices have smaller screens and therefore you should be coding your email so that the @media query will shrink the width of your email to about 300 pixels eliminating the need to zoom in or pan out.
  • Turn off font resizing
      Mobile devices use a browser (Webkit) that will automatically adjust the text size for better viewing on your device. If you make all of the changes above it is a good idea to add some code to turn this feature off. You can do that by applying the following CSS to your body tag:  <body style="-webkit-text-size-adjust:none;">
  • Highlight the important stuff
      Place all important messages in the upper portion of the email if possible. No one likes to scroll down forever.
  • Hide low priority content
      In order to ensure maximum scanability of your email on a mobile device you can hide secondary content by adding the hide class to any image, paragraph or entire table.
  • Use a single column design
      A single column makes it easier to quickly browse through an email. If you decide to use more columns for secondary content you can always choose to hide them for mobile.
  • Be touch friendly
      Design your buttons a little bigger so they easy to click without having to zoom in.
  • Test, test and test some more
      Don’t forget to test your new email design on all platforms. Think about how it will look in a vertical pane as well as horizontal.

1 Comments

  • Avatar
    Ofsys Master

    Example to put in <Head> section :

    @media only screen and (max-device-width: 480px) {     

    .page {           padding: 0px 10px 5px 10px !important;      }     

    body {           padding: 10px !important;      }     

    #airmail-line {           margin: 0 -10px !important;

         }     

    .header {           font-size: 16px !important;      }     

    .headline {           font-size: 20px !important;      }     

    #screenshot {           width: 275px;           height: 190px;      }

    }

Please sign in to leave a comment.