Why responsive email templates are a “Big deal” and things you should know when designing?
Usage of smart phone increases rapidly throughout the world
making the whole world a big network. Thanks to the mobility, now a day’s
people spend a lot of time with smart devices than computers or even laptops.
Recent survey statistic shows 80% of the people use smart phones on the go.
People mostly spend their time using social media and email
on their mobiles, also lot of companies now encourage people to work from home
and this increases the number of people who use mobiles to access their email
even more. Chances of opening an email from a mobile device is increasing
rapidly.
Now you have a better idea why you must consider optimizing
emails for mobiles, the next big thing is to design email templates that is
compatible and effective when it comes to small screens.
So what are the best practices for designing mobile friendly
email templates?
The content must be
clear
Smart phones has much smaller screens than a PC, so it is
very important to think about clear content. Text should not be too small or even
too big for the screen. Not only size that matters, you have to be vise with
choosing the correct font and colors too.
Go Single-column
Keep everything simple, use single column when it comes to
mobile. It enables the reader to go through the email very easily making it
interesting to read. In this way you also can be creative with the simplicity
of the layout. But this does not set limits to the design, you can still be
creative with other layout options as you wish.
Catching title
In desktops, images has the power to carry the message; but
in mobiles it’s the words. Keep in mind to grab the reader’s attention by using
a memorable punch line on top. Bigger bolder text will do the Job as long as
the message is loud and clear.
Bigger buttons
Have you ever thought why Android and iOS has bigger and
noticeable buttons for the main functions in their phones? Over 90% of smart
phones are using finger as the pointing device and who wants to click tiny
buttons using fingers? Apply the same method to the email templates as well.
Left aligned text
There are a number of reasons for aligning important
elements to the left-hand side of the content area. (Eye tracking research
suggests that users focus the majority of their attention on the left-hand side
of email content. No surprise since we read text from left to right. Certain
operating systems, will not scale content to fit the screen, therefore
displaying only the left half of an email. From an ergonomic perspective, the
majority of users will find it easiest to interact with elements in the bottom
left/middle of their hand-held screen.)
Enough with the design, let’s move on to developing
responsive emails.
Media queries
Developing emails will not give you a lot of trouble if you
know the basics of email development and more importantly Media queries. No matter the system you build the email you need to
use media queries to define how the email should look on a hand held devise.
Unlike in websites, it is not necessary to write whole lot of media queries for
tablets and smart phones, you only need to have one media query for all the
hand held devises.
Eg.
@media only screen and (max-width: 600px) {
table[class="hide"], img[class="hide"],
td[class="hide"] {
display:none!important;
}
}
In the example above we are telling some elements (Table,
Images and TD) with a class of “hide” to display:none on screens narrower than
600px. “!important” property ensures any inline style is overridden with the
new style. Using !important is indeed very important in responsive email
development as it is the key for the devises to identify the correct style to
use on devises.
Meta
Using the viewport meta tag is also an important to control
layout on mobile browsers specially iOS and Android devises. Don’t forget to
add the following Meta tag to the header section to control the mobile layout.
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
In conclusion
Building
responsive email is still a compromise. Working with different devises,
browsers and rendering engines gives us a hard time building responsive emails.
But the technology is growing rapidly and landscape mobile email development is
also improving with new trends. It is always good to experiment with creative
ways to improve responsive email design.
If you want to buy responsive email templates, here is a good template gallery.
Comments
Post a Comment