Last Update: 2023-11-16

Mobile optimization

Viewport

To ensure that the newsletter uses the whole width of the device, we set the viewport width to device width (more info). 

<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>

CSS for mobile

CSS for mobile devices is written in an <style>...</style> tag inside the head section.
Using media queries we can define CSS styles, which will only be used when the query parameters are fulfilled. Therefore we can target specific device sizes, and customize CSS for each device size as needed. All clients not supporting media queries, will simpy render the normal newsletter layout, without CSS defined in the media queries. 

<head>
  ...
  <style>
    /* desktop styles  */

    @media only screen and (max-width: 480px) {
      /* mobile styles  */
    }

  </style>
<head>

Basics for mobile CSS

To override inline styles and HTML attributes, all styles need to be given the !important attribute.
You should also include the basic styles, as shown in the example, to reset all defaults. 

@media only screen and (max-width: 480px) {
  /* reset for windows phones */
  @-ms-viewport {
    width: 320px;
  }

  /* prevent Text from resizing */
  *{
    font-size-adjust: none !important;
    -webkit-text-size-adjust: 100%;
  }

  /* override inline stiles */
  img.headerpicture{
    display: block !important;
    width: 300px !important;
    height: auto !impirtant;
  }
}

Avoid using !important in desktop inline-CSS, as these styles can not be overwritten.

Usability and size

  • Clickable elements need to be larger on touch devices. These elements (e.g. buttons) should be at least 40x40, to maintain accessibility.
  • Width of the newsletter layout should change to either a smaller fixed width (320px is recommended) or to a fluid width (percentual).
  • To ensure readability, font-size of text should be at least 14px.

Images

For best results of design elements use high-quality images. All images on mobile devices shoud be at least double in size as displayed.
Due the better CSS3 support on mobile devices, you can hide layout images, e.g. rounded corers for buttons, and replace them with CSS styles.

Images could be:

  • Fixed images like logo, social media icons, arrows, etc.
  • Dynamic images like Editorial Picture, Content Picture and Footer Picture
  • Layout images like rounded corners, lines, bullet points, etc.

Outlook quirks

Unwanted gaps

When you use images with small dimensions, outlook may add some extra space around the images. To get the exact size, add inline style font-size: 1px; line-height: 1px; to the wrapping eleement. 

<table width="100" style="widht: 100px;" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td height="3" style="height: 3px; line-height: 1px; font-size: 1px;" bgcolor="#aaaaaa">
    <!--SPACER:100:3//-->
  </td>
</tr>
</table>

Info: Outlook also changes width or adds space around floating elements like right/left aligned tables. A workaround is provided at examples.

Show/Hide elements

As Outlook needs some extra care and specific workarounds, you can show or hide parts of your code specificly for Outlook (Outlook 2007 and newer).

<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <!--[if mso]>
  <td>This table cell will display in Outlook 2007+ only.</td>
  <![endif]-->

  <td>This table cell will display in all email clients.</td>

  <!--[if !mso]><!-- -->
  <td>This table cell will not display in Outlook 2007+.</td>
   <!--<![endif]-->
</tr>
</table>

DPI scaling issues

Outlook on high resolution PCs tend to scale layout, images and text unevenly. To assure the right size of all elements, add css properties in px-Units for width and height to images and layout elements. 

<table width="600" style="width: 600px;" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="line-height: 1px; font-size: 1px;">
      <img src="<!--LAYOUT_URL//-->img/logo_banner.jpg" width="600" height="200" style="width: 600px; height: 200px;" border="0">
    </td>
  </tr>
</table>

Display images somewhere else

HTML Snippet:

<!--[if !mso]><!-- -->
<div class="mobilepicture" style="display: none; font-size: 0; max-height: 0; width:0; line-height: 0; padding: 0; mso-hide: all; height: 0; overflow: hidden;">
  <img src="<!--CONTENT_PICTURE//-->" width="1" height="1" style="display: none;" />
</div>
<!--<![endif]-->

We use a <div> with a view css commands, to hide the image in the desktop version of the newsletter, which is then enlarged to the correct size in the mobile version.
For Outlook you may wrap the code with if !mso.
When forarding an email, some code and styles might be striped. Set image size to 1x1 px, as the final fallback.

CSS

div[class="conpic"],
div[class="conpic"] img {
  display:block !important;
  max-height: none !important;
  height: auto !important;
  width: 100% !important;
  overflow: visible !important;
}

Best Practice: Convert Two-Column two Single-Column Layout

<!--CONTENT_BEGIN:0:1//-->
  <!--IF:ODD//-->
  <table class="outer" width="600" ... >
  <tr>
    <td valign="top">
  <!--ENDIF:ODD//-->

    <!--IF:ODD//--><table width="290" align="left"><!--ENDIF:ODD//-->
    <!--IF:EVEN//--><table width="290" align="right"><!--ENDIF:EVEN//-->
    <tr>
      <td>
        Content goes here ...
      </td>
    </tr>
    </table>

    <!--IF:ODD//-->
    <!--[if mso]>
      </td><td width="20"> </td><td valign="top">
    <![endif]-->
    <!--ENDIF:ODD//-->

  <!--IF:EVEN//-->
     </td>
   </tr>
   </table>
   <!--ENDIF:EVEN//-->
   <!--IF:ODD//--><!--IF:LAST//-->
      </td>
    </tr>
    </table>
  <!--ENDIF:LAST//--><!--ENDIF:ODD//-->
 <!--CONTENT_END:0//-->

Use a single table for each article and align each them with align="left/right".
Wrap the articles in a wrapping table. Use <!--IF:ODD//--> to open and <!--IF:EVEN//--> to close the wrapping table.
To avoid outlook quirks you can insert a table-cell between two articles for Outlook only.

Für Rückfragen stehen wir Ihnen jederzeit gerne unter support@eyepin.com zur Verfügung.