.

The increasing number of customers who use mobile devices makes it important to adapt email design to the narrow screens and different reading habits of mobile users.

For HTML 4 and CSS 2, the W3C Consortium offers a Media Query that was originally used for print layout. For more information, see http://www.w3.org/TR/css3-mediaqueries/#media0.


Media Queries​

Media queries allow designers to allow for differences in how different media types display files. It is also possible to specify automatic adaptation depending on the height and width of the end device and the colors of the display. For example, a black background color. The available media types are print and online. Currently, there is no option for mobile devices. Depending on the width of the device, information for the layout of the message is taken from the style sheets (CSS).

The information regarding the width and height of the display makes it possible for the email marketer to plan for optimized display of the email on a mobile device.

Specifically, an online version is created that scales the layout to the width of the device. The specific end device, for example, iPhone, or Android, and its characteristics can only be taken into account in terms of the width.


Media Query Limitations​

Unfortunately, not all email clients and devices support the use of media queries. For example, Gmail and blackberry devices do not support media queries.

For the marketer, this means that when designing an email with media queries, the email must also display correctly in the case that the queries are ignored. In this case, it is helpful to at least provide links to read online and read on a mobile.

It is not possible to create two separate versions of the message to be displayed according to need. Rather, the layout of the message must be designed so that the message can be correctly displayed as is.

It is necessary to pay attention to changes in size when choosing the right layout. Overlapping tables and numerous columns, which are often used in complex designs, cannot be scaled without compromising the display of the email.


Examples:

  • Images must be correctly displayed both in their original size and when scaled. The scaling is performed by the email client, and cannot be optimized with a graphics tool.
  • The layout should have as few tables as possible and no overlap. Otherwise, the correct order of the email is compromised during the scaling.
  • If some parts of the message are dynamically hidden by the mobile device, the recipient must still be able to read the message on other mobile devices (which ignore the queries).

For more information, please contact your customer service representative.


Media Queries and Mapp Engage​

When using a CMS system, the templates can be adapted to support automatic adapting to mobile end devices. The user does not need to have any programming knowledge.

For clients without a CMS system, the web designer must manually integrate the media queries into the HTML template. We recommend checking the display using the extra Mapp Engage function Message Rendering (which must be activated for your system). In this way, you can check whether the email is correctly displayed on all end devices.

Our customer service representatives can assist you with the development of scalable email messages.


Some screenshots of scaled newsletters:

Outlook

iPhone