|The rules are changing for email marketing creative materials (i.e. fliers, newsletters, announcements, etc.). The one-size-fits-all approach is not the best practice anymore. Now you may need to adopt the responsive email design method. You can design your email to automatically reformat and resize to optimize for whatever screen size your recipient is using to read your email. You also can make sure the main call-to-actions of your email campaign are easily found. In addition, you can alter other elements including text size and color, images, backgrounds, and more.
|Since more and more email is being read on mobile devices, companies are striving to find ways to make them appear as sharp and professional as possible in that environment. In web design, there has been a movement towards responsive design which allows you to create one website that reformats itself for optimal viewing on different devices. The same process can be applied to email design however, like many things pertaining to email what might seem easy on the surface can include numerous technical challenges.
||The way responsive design works is by checking the width of the device’s viewport by using a line of code within the head tag called a “media query”.
Media Queries are used to find out the current max resolution of the screen, and they allow you to use a different CSS for this state than a normal CSS. This is what is called responsive design it discovers what resolution the visitor currently has and responds to this by the use of Media Queries.
In the past the only way we could adapt a website to any resolution was to use a fluid page design but media queries allow you to do much more. With media queries you can hide the sidebar of the page on smaller screens to show more of your content or you can increase the size of the font on bigger screens.
|What this does is check to see if the screen width is less than 480px wide (which is equal to an iPhone in landscape orientation) and then activates a set of specified styles that would be listed within the curly brackets. As an example, if you wanted to target tablet screens you could have another media query that looks for a max-width of 768px. In addition you will need to set the Viewport Meta Tag, which means adding another line of code to the head tag.
So, do you need to be using media queries?
Studies show by June of this year, more people will read email on a mobile device than on a desktop computer or webmail client. So, you want to make your emails as readable as possible on these small screens. The simplest approach that has become the minimum standard for developing mobile-friendly emails is to use a font size large enough to be readable on both desktop and mobile browsers but it can be difficult to create one design.
|The biggest advantage of using responsive design in emails is the ability to set different font sizes for different screens. This is most beneficial in text-heavy emails like newsletters.
The most basic use of responsive email design is your email layout. Let us say your typical email format is a 3-column layout. Using responsive email design, you can now design two other versions: a two-column layout for tablets and a one-column layout for mobile devices. This will ensure your reader is always seeing the most important parts of your email, no matter what size screen they are using.
This all sounds great and interesting, but remember you need to plan. If you have to go back and retrofit media queries into an email that was not designed for it you are going to find yourself redesigning, rebuilding, and rethinking what you have already completed. Also, even with proper planning you are going to find yourself putting in more time into design and development than you normally would for a simple email. So be prepared.
Another item to remember is you still have to create it the old way. If you did not know, Gmail strips out any stylesheet information you put in the head tag and this includes media queries. So, to accommodate for Gmail (and other email browsers that do not support this) you need to cover all your bases and still build the email using inline styles in combination with classes and ids that we can call with the media query. This means that even when you are using media queries you still have to go through the trouble of making sure your email works on mobile screens without them.
There is a lot more to say on this topic, and we will in upcoming newsletters. For now ask yourself this — is responsive email design right for your company?
The answer to this will depend primarily on three considerations:
Audience: If a large portion of your audience is reading email on a mobile device, responsive design may be a good idea.
Budget: Additional design and development time will be required.
Content: Text-heavy newsletters will benefit from responsive design, while with graphic heavy emails it may be easier to design one email that reads well across all devices.
*Did You Know — Morgan Stanley’s analysts believe that, based on the current rate of change and adoption, the mobile web will be bigger than desktop Internet use by 2015.