-
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:
-
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.
Inquire today to see how we can help your emails become mobile friendly.
