Responsive or Mobile Emails Archives - Email Uplers

How to Create A Responsive Email Template – The Only Guide You’ll Ever Need

Susmit Panda — Fri, 27 Sep 2024 11:23:06 +0000

So you’re into designing emails. To start with, take a look at these stats:

73% of brands prioritize mobile optimization for email campaigns.

3 in 5 people check their emails on their mobile phones.
43.2% of people delete emails not optimized for mobile.
iPhone enjoys the highest percentage of email opens at 28.4%.

The point? You should design emails for mobile first, and then for desktop.

“Smartphones and tablets can no longer be ignored by email marketers. They represent a massive part of all email interactions and revenue,” writes Jordie van Rijn, email marketing pro and founder of Email Monday.

But how do you design emails specifically for mobile? That’s what you’ll be learning in this comprehensive guide to responsive email templates.

Yes, it can be challenging to adapt emails to various screens. Besides, email clients can be very taxing. But don’t you worry! Because we will guide you from the other side of 3000+ templates/ month across 50+ ESPs, go figure!

So, we’ll get started in the following order:

What Is A Responsive Email Template? The Definition
Core Principles of Responsive Email Design
Benefits of Using Responsive Email Templates
Step-by-Step Guide to Creating a Responsive Email Template
Best Practices for Responsive Email Templates
Common Challenges in Responsive Email Templates
Responsive Email Templates by Email Uplers

What Is A Responsive Email Template?

A responsive email template is a pre-built or customized template that seamlessly adjusts to various devices/screen sizes without losing its quality. For example, here is a pre-live template we designed for Maven that looks equally good on desktop and mobile.

Image source

The mobile version of an email stacks the elements vertically. You can observe this in the email above. For example, the final call-to-action button is displayed above, rather than alongside, the image. Similarly, the website and the app download links also stack up on the smaller screen.

“Mobile devices give a very limited viewing screen, and the ideal design for mobile devices is one column,” says Carin Slater, Email and Content Growth Marketing Manager at Litmus. “But we don’t want to limit ourselves to single-column designs on desktop where we have loads of space. Enter media queries to let you stack content on mobile to make sure your content is optimized for the smaller screen.”

Later in this post, you’ll learn how to stack columns for mobile viewing as it is one of the most important aspects of responsive email templates.

“Responsive design offers us a way forward, finally allowing us to design for the ebb and flow of things.”
– Ethan Marcotte, inventor of the term responsive design

It is critical to appreciate that unlike responsive web design, support for HTML and CSS standards is not uniform across email clients. As a result, the reputation of email as a technology, moderate as far as technology goes, seems greater than great in light of the reputation of email clients.

For example, here’s how things can go wrong: This email appears flawless on desktop, but goes south on mobile.

Image source

“Goated” content?

So, when it comes to creating responsive emails, forewarned is forearmed.

Core Principles of Responsive Email Design

Below are five core principles of responsive email design:

Fluid layouts: An email should dynamically adjust to multiple screens and devices. A fluid or percentage-based layout makes this possible.
Mobile-first approach: Because the majority of email opens occur on mobile devices, a mobile-first approach is key.
Minimal design: A responsive email is clean, clutter-free, and focused on presenting urgent information in bite-sized form.
Testing: The pre-live email is made to pass through multiple checks with the help of email testing tools. It is tested on various devices, including smartphones, tablets, and desktops.
Client optimization: The email is optimized for various email clients, such as Apple Mail, Gmail, Yahoo, and Outlook.

Benefits of Using Responsive Email Templates

Imagine a scenario where one of your subscribers wants to open and look at a promotional email you just sent. The subscriber is on a crowded bus and they can’t open their laptop to check your email. So, they try the phone.

But your email doesn’t render well on the small screen. The user is having to scroll horizontally to read the content; the images are cut off, and in some places, they’re overlapping the text; but the text, too, is ant-sized.

The consequence? Your subscriber is frustrated and quits.

By the time they get home, they may no longer remember checking your email on the desktop. To sum it up, this is a horrible though preventable UX. Good UX is the number one benefit of a responsive email template.

But here are four more benefits as a direct result of good UX:

Increased accessibility: The more your email is accessible across devices and environments, the greater the scope of engagement.
Higher open rates: If you’ve convinced subscribers that your emails are responsive, it will lead to more opens across devices than when opened on one device only.
Higher scope of conversions: Urgent/time-limited campaigns will benefit from mobile-optimized emails by enabling users to convert on the spot, no matter where they may be.
Better sales: The point of email marketing, just like any other channel, is more sales. Responsive emails guarantee seamless UX, automatically resulting in more sales.

How to Create A Responsive Email Template? A Step-by-Step Guide

Let’s learn how to create a responsive email template.

After you’ve defined the goal of your email, planned the layout, and chosen a responsive framework (MJML or CSS), create the HTML structure.

Note: Although most modern email templates are created using div-based layouts, the responsive email we’re going to develop in this blog post is built using tables. Our process just shows the coding framework of a basic responsive email template. Practically, coding for responsive emails will vary depending on project specifications, compatibility constraints, and desired layout behavior.

1. Create The Basic HTML Structure

Start the basic HTML document. Because most email clients render tables more consistently, use tables for layout instead of divs.

So, here’s the basic HTML structure to begin with.

Copy Code




    
    
    Responsive Email Template

2. Create The Scaffold

In HTML email design, the scaffold is the foundational structure of the email. Think of it as the skeleton on which your email is going to be built.

So, in our next step, we’ll be adding the outer scaffold to the email as shown in the following code.

Copy Code




    
    
    Responsive Email Template

3. Add A Ghost Table

The term “ghost” table is used because it is specifically designed to only appear on certain problematic email clients, like Outlook. In these cases, the ghost application responds to conditional comments only. This ensures that it does not affect the email layout in other email clients.

So this is part of how to create a responsive email template in Outlook. In this code, the style=”display: none;” hides the table.

Copy Code

4. Add The Main Content Container

In this step, we add the main content container. The code creates a row in a table that contains a nested table; there is no spacing or borders, and the main content, represented in the form of a placeholder, is not yet defined.

Copy Code

5. Create The Heading

The following code creates a table row with a single cell that is centered and padded.

The H1 inside the cell welcomes the subscriber to the newsletter.

Copy Code


    
        Welcome to Our Newsletter!

6. Add A Full-width Image

In the following code, there’s a table row containing a single cell.

The image is centered within the cell. The placeholder scales to fit the width of the cell while maintaining a width of 600 px.

Copy Code

7. Optimize for Responsive Stacking

If you’re using two columns in your email, it’s critical to ensure what is known as responsive stacking.

Accordingly, in this step, we’re adding two equal-width columns. Each column has a specific heading and a paragraph of text. In the following code, the two columns will display side by side on desktop screens due to the 50% width assignment. But on smaller screens, the columns will line up vertically.

Copy Code


    
        
            
                
                    Column 1
                    This is some text for the first column.
                
                
                    Column 2
                    This is some text for the second column.

Note that role=”presentation” suggests that the table is not meant to display tabular data, but is rather a visual layout.

You might also use the following CSS to enable responsive stacking. We use media queries here, which allows us to apply styles based on the viewport size.

Copy Code

/* Base styles for the columns */
.column {
    padding: 10px; /* Padding around the content */
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
}

/* Media query for responsive behavior */
@media (max-width: 600px) {
    .column {
        width: 100%; /* Each column takes full width on small screens */
        display: block; /* Ensures they stack vertically */
    }
}

Note: Don’t stack every design element for mobile viewing. Be strategic. Responsive design is essentially about making use of available space; where space is not an issue, you don’t need to stack content.

8. Add Font Styling

Now we create a paragraph element that displays a thank-you message. The paragraph is styled with a font size of 16 px and a dark, gray color.

Copy Code

Thank you for subscribing to our newsletter!

9. Add Full-width, Padded Image & Text

Once again, we add a table row with a single cell that centers an image and a paragraph of text. The image scales to fit the width of the cell while maintaining a maximum width of 600 px. Just below the image, there’s a paragraph with additional text styled with specific font size, color, and is well-padded.

Copy Code


    
        
        This is some additional information.

10. Create The Footer

For the footer, we create a table row that contains the footer section.

In the following example, the footer section includes a copyright notice for 2024 and an unsubscribe link, which is styled in blue but not underlined.

Copy Code


    
        © 2024 Your Company. All rights reserved.
        Unsubscribe

11. The Final Code

Now, here’s the final code for our responsive email template.

Copy Code




    
    
    Responsive Email Template
    



    
        
            
                
                    
                        
                            
                                
                                     
                                
                            
                            
                                
                                    
                                        Welcome to Our Newsletter!
                                    
                                
                                
                                    
                                        
                                    
                                
                                
                                    
                                        
                                            
                                                
                                                    Column 1
                                                    This is some text for the first column.
                                                
                                                
                                                    Column 2
                                                    This is some text for the second column.
                                                
                                            
                                        
                                    
                                
                                
                                    
                                        Thank you for subscribing to our newsletter!
                                        Learn More
                                    
                                
                                
                                    
                                        
                                        This is some additional information.
                                    
                                
                            
                            
                                
                                    
                                        © 2024 Your Company. All rights reserved.
                                        Unsubscribe

Best Practices for Responsive HTML Email Templates

To implement responsive design, consider the following responsive email campaign best practices:

Use a single-column layout within the range of 600 to 640 pixels to ensure readability on small mobile screens
Design your emails in portrait mode rather than landscape, as not all desktop users view emails in a full-screen window
Follow Apple’s guidelines by keeping links and buttons at a minimum size of 44 x 44 pixels
For iPhones, maintain a minimum font size of 13 pixels to prevent automatic upscaling that can disrupt the layout
Keep the email copy short and concise, placing important visuals above the fold. Ensure ample white space to provide a comfortable reading experience
Use the code mobilehide{display: none !important;} to hide certain content on mobile devices
Include small, responsive images with appropriate alt tags. For retina screens, use images at 2x resolution. Apply attributes like width:100%; and max-width:x;
Always test your emails across various email clients and devices to ensure proper rendering. Use web-safe fonts for correct text display on various email clients
Follow a logical visual hierarchy for mobile-friendly email design
While creating a responsive HTML email, don’t forget to provide a plain-text version of your email as many clients don’t support HTML
Make sure to optimize your emails for Dark Mode compatibility. You can learn how to do that by reading our post on Dark Mode in emails.

Common Challenges in Responsive Email Templates

Here are five common challenges HTML developers face while creating a responsive email template.

1. Inconsistent Rendering across Email Clients

Different email clients tend to render HTML and CSS differently. This results in inconsistencies in how your emails look. Here are couple of best practices to overcome inconsistent rendering:

Use table layouts rather than CSS-based layouts.
Stick to inline CSS for style since many email clients strip out the

This text is visible in all email clients.

This text is hidden in Outlook but visible in other clients.

3. Images Not Scaling

Images may sometimes appear large on small screens. You can:
- Use the max-width: 100%; property so that the images scale down proportionally in their container
- Set the height of images to auto so that the aspect ratio is preserved.
- Use srcset so that images scale according to different resolutions.
4. Limited CSS Support

Not all email clients support flexbox and grid. So it’s best to:
- Go with basic CSS properties like padding, margin, and font styles.
- Avoid advanced layouts and use fallback styles for unsupported properties.
5. Font Not Rendering Properly

Be careful with custom fonts that do not render properly on certain email clients. We’d recommend that you:
- Use web-safe fonts, such as Times New Roman, Arial, etc.
- Utilize the @font-face rule if you must have custom fonts.
“If you take email strategy and design seriously, it doesn’t take much to elevate you above everyone else, especially your competitors.”
– Jason Rodriguez, author of Professional Email Design

Examples of Successful Responsive Email Templates by Email Uplers

Here are four responsive email templates, straight from the house of Email Uplers.

1. Holiday Design Campaign

2. Email Automation Campaign

3. ESP Campaign

4. Dark Mode Campaign

In Closing: Not Just Our Emails, We’re Responsive Too

If you need help designing responsive email templates, get in touch with our template production team. All pre-live email templates are:
- Litmus-tested across 40+ email clients
- Checked for compatibility with your ESP
- Checked on multiple devices and browsers
- Fortified with appropriate fallbacks
Get more information on all things responsive on our dedicated blog.

The post How to Create A Responsive Email Template – The Only Guide You’ll Ever Need appeared first on Email Uplers.

Responsive Email Designs: Let’s Get Back to the Basics

Susmit Panda — Tue, 23 Jul 2024 02:22:00 +0000

Your target audience doesn’t care what you’re offering. They’re only interested in whether or not you’re giving them what they want in the way they want it.

You’re blasting out 2-3 promotional emails every week to all your segments. You might be generating opens too. But after that, there’s a prolonged, unexplained hush…

Many things could be getting in the way of your subscribers.

But if this is the general pattern of their interest in you, ten to one, you’re not giving them what they want in the way they want it.

Someone habitually checks their emails on their Samsung tablet. Another is hooked to their mobile phone; yet another won’t even check emails unless their Apple Watch alerts them with a notification.

And these three people may be on your contact list. Or it could be just one person viewing your emails on different devices at different times in different circumstances.

This is where responsive design comes in. Designing for devices. Designing for people. Email marketing and responsive design are intrinsically linked.

We’re an old hand at this, designing responsive emails for ten years now. By the end of this post, you’ll learn everything about responsive email design. Let’s get started.

What Is Responsive Email?
How to Create A Responsive Email?
Types of Responsive Email Designs
Advantages of Responsive Email Design
Get A Head Start!

What Is Responsive Email?

A responsive email is an email that is optimized for a variety of devices and screen resolutions, such as desktop, mobile, and wearables.

Back in the day, when email marketers sent fixed-width emails, mobile users had to swipe right and left to read the content.

Responsive design solves this problem by allowing users to view emails as and how they want it. Below is a responsive email in action.

In the above example, the two-column layout on desktop resolves into a single column on mobile, leading to better subscriber experience and strong brand impression.

Responsive design is a necessity, but it becomes more critical during one-off events and certain times of the year. Take the case of limited sale campaigns.

Limited offers, countdowns, back-in-stock emails, etc. require users to act fast. If these emails are only viewable on a desktop, what happens to those who receive them while on the subway, in a restaurant, or elsewhere?

Remember, two-thirds of your list likely includes these individuals.

During the holiday season, when people are mostly traveling, mobile and wearables are their sole entry points to the online world. If your emails are not optimized for these devices, you’re not just preventing revenue generation, but potentially ousting people from your list.

How to Create A Responsive Email?

To create responsive email designs, developers use fluid tables, images, and CSS media queries to ensure the content adjusts seamlessly across different screen sizes.

Media queries transform fixed-width tables and images on desktops into fluid elements that display properly on smaller screens.

Email layouts are created using tables within the email body. To achieve the desired design, tables are nested inside outer tables.

For example, consider the following code snippet.


    
    
    
           
               
               
               
           
           
               
                   Hello World

The above code will create a table containing an image and a text, nested within a larger table (600px wide), as shown below.

To make the table flexible, you need to add the class='wrapper' tag to the outer table:

The class="wrapper" is defined by the media query. Media queries use specified breakpoints to rearrange the layout based on the device’s screen size. 
In the example above, the media query applies to devices with a screen width below 600px. The class=”wrapper” ensures that the table aligns to 50% width for these devices. The final code will look something like this: 
@media screen and (max-width: 599px) {
              wrapper {
width: 100% !important;
}
          
           }
         
           .
           .
           . (Here come remaining CSS code for defining other
           . styles and header of your emails)
           .
           .
           .
         















          
              
          
                
                   
                          
                     
                
                
                     
                           Hello World









The use of !important is crucial because inline styles typically override styles defined in media queries. By applying !important, the styles within the media query can take precedence over inline styles.







Types of Responsive Email Designs 



We can broadly categorize responsive email design into the following subsets:



Scalable or mobile-first design
Liquid or fluid design
Spongy or hybrid design
Adaptive design, and
Responsive-aware design



Mobile-first or Scalable Design



In scalable email designs, the layout adapts seamlessly to various screen sizes, ensuring compatibility across different devices. They are also called mobile-aware designs. 



Note that in scalable design, everything scales proportionally to the screen size, but the layout itself remains unchanged. 



Liquid or Fluid Design 



Fluid email designs utilize percentage-based sizing, allowing the width of tables and images to automatically adjust according to the screen size of the device. 



Notably, fluid email designs are better suited for text-heavy emails. They don’t rely on media queries, and are not particularly suitable for complex layouts. 



Spongy or Hybrid Design



Hybrid design uses percentage widths and media queries, aiming for wider support across email clients. 



Hybrid design is not easy to implement as it requires extensive coding skills.






Adaptive Design



Adaptive design uses media queries to set specific breakpoints at certain screen widths. At these breakpoints, the email content is reformatted or rearranged to optimize for the screen size.



Responsive-aware Design 



Responsive-aware design uses responsive design only for the header, navigation bar, footer, and the recovery module while the rest of the email is mobile-aware. 







Responsive Email Design Best Practices



To implement responsive design correctly, consider the following responsive email campaign best practices: 



Use a single-column layout within the range of 600 to 640 pixels to ensure readability on small mobile screens
Design your emails in portrait mode rather than landscape, as not all desktop users view emails in a full-screen window
Follow Apple’s guidelines by keeping links and buttons at a minimum size of 44 x 44 pixels
For iPhones, maintain a minimum font size of 13 pixels to prevent automatic upscaling that can disrupt the layout
Keep the email copy short and concise, placing important visuals above the fold. Ensure ample white space to provide a comfortable reading experience
Use the code mobilehide{ display: none !important;} to hide certain content on mobile devices
Include small, responsive images with appropriate alt tags. For retina screens, use images at 2x resolution. Apply attributes like width:100%; and max-width:x;
Always test your emails across various email clients and devices to ensure proper rendering. Use web-safe fonts for correct text display on various email clients
Follow a logical visual hierarchy for mobile-friendly email design
While creating a responsive HTML email, don’t forget to provide a plain-text version of your email as many clients don’t support HTML
Make sure to optimize your emails for Dark Mode compatibility. You can learn how to do that by reading our post on Dark Mode in emails







Advantages of Responsive Email Design



The following are some of the main advantages of responsive design in email:



Responsive design enhances subscriber experience by increasing the scope of interactivity
Responsive emails lead to better engagement, potentially reducing the number of unsubscribes
Next to consistent design, responsive emails maintain brand consistency, eliminating UX disruptions across devices
Emails that are responsive have a higher chance of generating conversions than those that are not 



Need A Head Start?



Designing responsive emails is hard. Email rendering is complex because you need to get your email pass functionally more or less unaltered through your ESP, email clients, different operating systems, web browsers, and devices/screen sizes. 



In fact, there are potentially 300,000 renderings for every email you send, go figure! 



So, by the time an email reaches the intended inbox, it has gone through several conflicting environments, rendering layers, and platform turbulences. Yes, Gmail and other clients are slowly starting to support renderability, but the fact remains that email is an open platform with no universally accepted coding standards. 



We couldn’t go beyond the basics of responsive email in this blog post. But if you want to understand it in depth, head to our series on responsive design.  
The post Responsive Email Designs: Let’s Get Back to the Basics appeared first on Email Uplers.



Interactive Email QA Checklist to Keep your Emails on Track
Kevin George — Mon, 11 Apr 2016 10:44:43 +0000
Email marketers spend plenty of time to craft an interactive email that not only delivers the message in a beautiful way, but also renders well across all devices. If you want to amp emails, adding interactive elements to the template is a great way of doing so. However, many a times their effort fails as they leave their subscribers disappointed. So, what is the best way to be assured that your interactive emails are doing wonders in the subscribers’ inboxes?
Be patient, before we move on to our main matter, it is crucial to first understand what interactivity is all about.
Understanding Interactivity in Emails
Email marketing has evolved manifolds, considering many email clients have started supporting the interactivity. Interactive animation makes emails look vibrant with ample effects like: flip & scratch effect, menus, GIF, accordions, etc. that helps boost CTRs. The advent of Interactive emails has actually given subscribers an opportunity to take action within the Inbox.
But for that it is vital to send interactive mail that glides well with the email client. We’re all aware of the feeling of receiving an email which appears to be broken. No wonder it is one of the most pertinent reasons why subscribers get pissed off and unsubscribe. For that, it is crucial to create an interactive email QA checklist that keeps your interactive emails on the track.
To check that all the best practices are in place, Email Uplers with their zeal have come up with an email QA checklist to make your interactive email templates and campaigns heavenly that will not only boost open rates, but also maximize lead generation.
Interaction Testing

You will have to manually set up email clients to test the interactivity.
See Apple Mail, Thunderbird, Outlook on Mac, iPhone, Android Native app and other devices that support interactivity to check the working of the animation you have provided.
Prepare the list of email clients who are in your subscriber list and do not fall in the above list. Check for fallback on each of those email clients.
Check for message to be displayed on supporting email clients, as well as for fallback message to be displayed on email clients that does not support interactivity.

Formatting
Please perform the below formatting test with interactivity and without interactivity (on fallback).

Are colors and fonts displayed correctly? (Alignment, size)
Are there any odd line breaks in content? Particularly Brand Name or Product Name Format testing via Litmus or Email on Acid and manual testing in Hotmail, Outlook.com, Outlook, Gmail, Yahoo, Apple email and Live.com
Make sure there are no elements with default alignment.
Ensure you have included width for each .

Content
Please perform the below Content test with interactivity and without interactivity (on fallback).

Is there contradictory content / content that don’t make sense?
Are names, dates, places, numbers and addresses correct, if used any?
Are the brand names and trademark signs correct?
Is an unsubscribe link included?
Is view email online link included?
Is send to friend link included?
Are any incorrect sequences of special characters present (such as & instead of &); if so are they replaced with codes?
Spacing within words is consistent and natural across the email or not?

Images
Please perform the below images test with interactivity and without interactivity (on fallback).

Are all pictures displayed correctly? (Alignment, size, none missing) The height and width should be in proportion.
Is Alt Text given correctly for all images (including logo)? Alt text for interactive elements as well as for fallback elements.
Ensure the border around images are NONE.
Check if background images are used and visually consistent across all email clients (if not its recommended to have fallback color)

Links
Please perform the below link test with interactivity and without interactivity (on fallback).

Do all links open in a new window and go to the right page (or depending upon client requirement) with interactive as well as fallback elements?
Do all links have the correct color? (Ensure the color remain same after a click – except Gmail)
When viewing in a browser, does the page appear correctly, including any personalization?
Do links go to the correct landing page (if provided by client)?
If no links information provided, make sure # tags are provided to all the places where links should be there
All logo (header as well as footer) should have linked

Creating and following an interactive email checklist is a critical step that needs to be taken before sending out your email campaigns. Going with this email checklist will help you send blunder safe interactive emails that make subscribers happy 
The post Interactive Email QA Checklist to Keep your Emails on Track appeared first on Email Uplers.



Defeating Gmail with Responsive Code – Hybrid & Spongy comes as a savior!
Kevin George — Fri, 25 Sep 2015 14:21:40 +0000
Responsive is quite in the vogue. With most subscribers reading emails on the go, it is quintessential to send out emails using media queries that render well across the devices irrespective of the screen sizes.
For most marketers that has a user base viewing emails in native apps on Android and iOS, responsive fetches amazing results. However, media queries are a problem when your user base is viewing emails using third party applications. As they have no or minimal support, these emails don’t render well on these email clients or third party app.

If your user base is relying more on the third party apps, there is a workaround to using media queries which is now known as hybrid coding technique or spongy technique of coding. With this approach, the email renders just like the responsive version in the third-party apps as well however, this method does have some limitations and it would not be as good a responsive email as developed using media queries.
So, what is the great fix?
The logical solution to fix the rendering issue is to use min-width and max-width to enable movement. However, this workaround will not work in Outlook, but luckily there are few solutions that can help you in fixing this problem as well.
You need to create a table that is 100% wide with a max-width of your desired size on Desktop.

@media screen and (min-width: 601px) {
 .container {
width: 600px!important;
 }
}
Apple Mail, which doesn’t respect max-width, create a media query to limit that table’s size on desktop

This is used for conditional CSS for Outlook to force it to collapse borders on all tables and prevent unwanted gaps
In Body Margin: 0; padding: 0;min-width: 100%;
We also have Margin: 0 auto;set here to center our table in Yahoo in Chrome. Though this use of margin is for Yahoo typically, we always capitalize Margin so that Outlook.com won’t strip it out.
Under the body, first we have a 
tag, to center its contents.


border=”0″ >








[content goes here]








A conditional table for Outlook that is hidden to all other clients. We need these because we’re using the max-width property which Outlook doesn’t support. Therefore we need to create special Outlook-only tables with explicit pixel widths to contain everything in Outlook.

Single Column Layout:
For full-width banner you just need to give class in td of image & define class in style, Change the max-width according to your email size.

Two Column Layout:







[column to go here]



[column to go here]







These conditional columns are important, because without them Outlook will not let our two floating tables sit neatly side-by-side. As Outlook doesn’t support max-width either, these columns help restrict each column to the correct size.

Font-size: 0to get rid of any gaps between our columns inside this cell.


Text-align: center stack in the column center on mobile


We’re using a width of 100% up to a max-width of 300px so that this particular column will be 100% wide on viewports that are smaller than 300px wide.


We are going to get two columns to float side by side on desktop, but stack in the center on mobile, is by using a combination of text-align: center and display: inline block. You can choose from left, center or right text alignment, and your inline-block divs will obey.

–> Set vertical-align to whatever you like, it will acts like valign=”top”

Three Column Section


style=”text-align:center;font-size:0;”>





[column to go here]



[column to go here]



[column to go here]







–>Now add the following CSS to give some additional padding to this row, as well as set up all the properties we used in the two-column layout to make our columns behave how we want them to. It will also set up our styles for the div columns that we are about to add, which will be 200px wide in this case.
Two Column (Inverse)

dir=”rtl”>





width:500px;”
dir=”ltr”
>
[Content Goes Here]









width:100px;”
dir=”ltr”
>
[Content Goes Here]











The post Defeating Gmail with Responsive Code – Hybrid & Spongy comes as a savior! appeared first on Email Uplers.



10 Hacks: Coping Mechanism for Mobile Emails
Kevin George — Thu, 23 Apr 2015 14:47:07 +0000
“Mobile email will account for 15 to 70% of email opens, depending on your target audience, product and email type”, says the Ultimate Mobile Email Stats for the year 2015. That’s plenty!!!
With the ‘mobile everything’ mode on since quite a while now; ignoring development of emails to be viewed in a mobile environment would be blasphemy to the email gods. With the ever evolving mobile email layouts adding to the mobile viewing experience, the play safe rule of fixed width layout cannot suffice. The success of your email campaign would be judged a lot from the aftermath of your subscriber’s mobile email viewing experience. Developing emails with this inescapable detail is a need for email marketer today and we bring you 10 effective hacks towards designing emails for mobile devices divided across 4 major heads: Email Layout, Email Design, Email Copy and Images.
EMAIL LAYOUT

A maximum fixed width between 600 and 650 pixels works best for the best cross-overs on email clients. Such a width may miss on a few smaller screens, but can shield issues with all major smartphone and tablet screen sizes. In order to serve narrow screens, email designers can choose to add 300 pixels of minimum width.


The easy to design and maintain – linear layouts can come in handy as they are as simple as it can get! Marketers can avoid complex multi-columnar layouts as they cannot deliver impact across the different viewing environments. Focus on single column layout to avoid distractions in your email design also aiding to retain the reader’s attention towards CTAs.


A hybrid of flexible and responsive layouts – also known as the flexbox solution, can help solve the non-compatibility issues surrounding media queries. Widely used email clients such as Gmail for Android and iPhone, Mailbox & Yahoo don’t support media queries. The flexbox approach is much regarded as the future of layouts has some wonderful features that can allow delivering beautiful emails in mobile viewing environment.


EMAIL DESIGN

Amending white space at 15% provides the eye a room to relax around the text and images.Some email clients scratch out paragraph and margin spacing from the code; bunching all the text spaced neatly. Instead, code your emails using tables and utilize the power of padding in order to add the extra space. This would help your mobile readers to seep in the message well.


Utilize highly contrasting colors to ensure that the message is readable under any viewing environment ranging across various screen resolutions and screen brightness preferences. Testing visual accessibility of various colors using different tools/software can be of tremendous help while choosing the colors in your email design. Remember, maximum visibility and readability is the goal!

EMAIL COPY

Even though many mobile devices automatically resize tiny text; utilize fonts at a larger size. Create mobile-friendly emails by assigning percent or ems units for font sizes instead of assigning point sizing to them. This allows the font to scale as per the various mobile screen size requirements. Utilize bullet points and keep your email copy concise and focused so that the readers can quickly reach the CTA, thereby earning higher CTRs.


CTA buttons must be at least 40 x 40pixels for mobile emails as they have to be easily clickable on a finger touch. Place the CTA at a prominent place within the email, say at the top: to be loud and clear. See to it that your CTA communicates well and helps the users to head where you want to lead them.

IMAGES IN COPY

Use the best applicable type of image in your email based on your requirements. If small image size and crisp colors is your need JPGs can serve well where as a GIF image would suit best if your email is required to render animation. PNG images are opted for transparency in emails but otherwise JPGs can be the best file types as the images render sharp and load quickly under this email file type. Ensure shedding the image’s Meta informationsuch as color profiles, creator information, etc. before including it in your email.


Utilize maximum and minimum width size for the images in your email. This will do the same thing for images as well – adjust them for the screen size. Adjust the percentage size as per the space around to ditch the image popping out beyond the email width. Using 100% min-width image will make-do with almost all email clients but includinga min-width: 100%; can avoid faulty image rendering in mobile emails, if any.


Setting Alt Text for all images is imperative for reasons such as image settings across various email clients, poor bandwidth, etc. Under such circumstances, in order to ensure that the value of your message stays unaffected, Alt Text comes of help. Creative use of alt text in emails can help in conveying the reader what they are missing out on.


Design your mobile emails using the above email hacks and provide a superior inbox experience to your readers. Do let us know in the comments below if the above hacks help! 
The post 10 Hacks: Coping Mechanism for Mobile Emails appeared first on Email Uplers.



WEARABLE Technology: EMAILS wrapped around the wrist???
Kevin George — Wed, 18 Feb 2015 11:50:15 +0000
With the advent of latest technological evolution aka wearable gadgets from top to toe, perusing for the best user experience becomes inevitable! Screen sizes have been on a reducing spree – making it all the more difficult for marketers to achieve their goals.

This landscape shift arriving at wearable technology, mainly smart watches, goes beyond regular size combinations and shapes! This post reflects upon the need for changes in email design and copy for such a ‘twist around the wrist’ viewing environment!
The twisty thing about wearable technology is…

… that they are all generally very small devices and thus the resolutions can feel very tiny. The varied shapes and sizes of these devices poses a challenge to the digital marketers, forcing them to go beyond rectangular size combinations, as some smart watches have a round screen as well. Designing marketing emails for such a varied array of resolutions can be tricky, and we have just the divine tips for the same in what follows!
BUT BEFORE THAT…

Is there really a need to optimize emails for smart watches & other wearables?
As much usability and ease these wearable pieces of technology bring to our lives, the use of its various functions is not clearly defined yet. The masses would be able to accept smart watch as a comfortable email viewing environment or not; is still debatable and something that time would only tell! Other reasons behind such skepticism are: undeveloped browsers and operating systems for wearables, very few devices having standalone native browsers, incompatible media queries, etc.
But that being said, the global wearables market is expected to grow at a compound annual rate of 35% over the next 5 years and hit 148 million units shipped in 2019; optimizing marketing emails for wearable technology viewing environment can thus not be ignored!
GO THROUGH THE FOLLOWING TABLE..

..to understand the specifications for various wearable devices!




Sr. No.

Name
Subject Line Characters
Message Characters
Email Actions Supported



1


Apple’s iWatch


12-20 characters


25-35 characters (inbox view)


Read, Flag, Mark as Read/Unread, Delete




2


Samsung Gear S


30-45 characters


55-80 characters


Read, Forward, Reply, Delete, Open on Mobile




3


Motorola Moto 360


26-40 characters


50-75 characters


Read, Reply, Open in Phone, Archive



4
Pebble Steel
12-18 characters
35-50 characters

Only able to read email notifications




Source: Return Path
KEEP UP!!

Tips to optimize MARKETING EMAILS for smart watches & other wearables!



The most important content must go higher up in the email as recipients would scrutinize the value of email content in comparatively smaller character count and time duration as against all the other email viewing environments. Also most smart watches tend to truncate long messages and you definitely do not want your recipients using their ‘delete’ option! Remember, above the watch fold it is!
Focus on the first few words of your email subject lines as the entire range of smart watches supports anything between 12-18 characters to 30-45 characters in a subject line and you want to play safe with the lower limits as well! It is important to frontload the subject lines with the most interesting elements in the beginning that piques interest. This will leverage the most from wearables as well.
Make sure to include a pre-header summary above all the other text in the email. A pre- header summary that is not the same as your email subject line can giveaway more information in the preview itself as the notifications in most smart watches pull from the first available parts of text. This is your window to generate the reader’s interest, make the most of it!
A minimalistic email design would be more ideal for smart watches as there is not enough room to showcase a lot on that small a screen. Everything placed on that screen must be visually pleasing, making design aesthetics a crucial component to email for smart watches. A little play of colors to pique interest backed by large fonts and objects alongside using white space aesthetically would do wonders to your email design!
Include only the content that you think would appeal to your recipients with an email copy that shouts about the value of the content in it! The good thing about the current smart watches in the market is that they do not provide the option to ‘Mark as Spam’ as yet, make the most of it by being as relevant as you can!



Chances are that the out of trend retro text versions of emails may make a comeback with the increase in use of smart watches. That being said, ‘tis better to be safe and optimize your emails for the wearable device viewing environment and reach out to EVERYONE on that email list!
The post WEARABLE Technology: EMAILS wrapped around the wrist??? appeared first on Email Uplers.

Sr. No.	Name	Subject Line Characters	Message Characters	Email Actions Supported
1	Apple’s iWatch	12-20 characters	25-35 characters (inbox view)	Read, Flag, Mark as Read/Unread, Delete
2	Samsung Gear S	30-45 characters	55-80 characters	Read, Forward, Reply, Delete, Open on Mobile
3	Motorola Moto 360	26-40 characters	50-75 characters	Read, Reply, Open in Phone, Archive
4	Pebble Steel	12-18 characters	35-50 characters	Only able to read email notifications

Responsive or Mobile Emails Archives - Email Uplers

How to Create A Responsive Email Template – The Only Guide You’ll Ever Need

What Is A Responsive Email Template?

Core Principles of Responsive Email Design

Benefits of Using Responsive Email Templates

How to Create A Responsive Email Template? A Step-by-Step Guide

1. Create The Basic HTML Structure

2. Create The Scaffold

3. Add A Ghost Table

4. Add The Main Content Container

5. Create The Heading

Welcome to Our Newsletter!

6. Add A Full-width Image

7. Optimize for Responsive Stacking

Column 1

Column 2

8. Add Font Styling

9. Add Full-width, Padded Image & Text

10. Create The Footer

11. The Final Code

Welcome to Our Newsletter!

Column 1

Column 2

Best Practices for Responsive HTML Email Templates

Common Challenges in Responsive Email Templates

1. Inconsistent Rendering across Email Clients

3. Images Not Scaling

4. Limited CSS Support

5. Font Not Rendering Properly

Examples of Successful Responsive Email Templates by Email Uplers

1. Holiday Design Campaign

2. Email Automation Campaign

3. ESP Campaign

4. Dark Mode Campaign

In Closing: Not Just Our Emails, We’re Responsive Too

Responsive Email Designs: Let’s Get Back to the Basics

What Is Responsive Email?

How to Create A Responsive Email?

Types of Responsive Email Designs

Mobile-first or Scalable Design

Liquid or Fluid Design

Spongy or Hybrid Design

Adaptive Design

Responsive-aware Design

Responsive Email Design Best Practices

Advantages of Responsive Email Design

Need A Head Start?

Interactive Email QA Checklist to Keep your Emails on Track

Understanding Interactivity in Emails

Interaction Testing

Formatting

Content

Images

Links

Defeating Gmail with Responsive Code – Hybrid & Spongy comes as a savior!

10 Hacks: Coping Mechanism for Mobile Emails

EMAIL LAYOUT

EMAIL DESIGN

EMAIL COPY

IMAGES IN COPY

WEARABLE Technology: EMAILS wrapped around the wrist???