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.
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.
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:
Place all important messages in the upper portion of the email if possible. No one likes to scroll down forever.
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.
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.
Design your buttons a little bigger so they easy to click without having to zoom in.
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.
Inquire today to see how we can help your emails become mobile friendly.
