Say Farewell to Responsive Email Designs and Hello to a Fresher Approach!

Litmus guys, demonstrate exactly what we mean:


In addition to our commercial projects, PSD2HTML are always engaged in research… we’re a little bit nerdy like that. One thing we’ve noticed recently is that when it comes to table-based coding for HTML email templates, things are changing. Here’s what we’ve found out.

You Don’t Need a Responsive Email Design Version

If you want to bring an email template to life, all you need is a desktop version of the layout. Before you shut down this post in complete horror and disbelief, please bear with us. It’ll be worth your while, we promise!

Obviously, the recommended width is 600px. You can also provide the 320px wide mobile version of the template, but actually it’s not really necessary.

Yes, you did read that right. Responsive design is not required to create a responsive email. A pro HTML email developer knows all the tricks of the trade when it comes to design techniques, such as image scaling, navigation, font size alteration or content swapping. So actually, you don’t need to pay for a separate responsive design version of your email. Pretty cool, eh?

Of course, this has some appealing implications. You’ll save money and you’ll also save a lot of time. However, it might be a little scary to take it on trust… which is precisely why we’ve prepared some examples below to show you exactly how it all works.

Clever Responsive Emailing in Action

Here are some basic examples of responsive content behavior on mobile devices, featuring a screen width of up to 500px, which is fairly typical of most smartphones.

1. Standard Scaling


The standard scenario on smaller browser screens is that content elements positioned side by side realign in the same order, within a single column. As a result, newsletters adapt to small screens really well, providing better readability. For example, at PSD2HTML, developers can easily implement any sequence of the content blocks. Here are all possible variations:


2. Inverse Scaling


With inverse scaling, it’s all about getting compact. You can apply this to elements that are already positioned one after another (an image and its description). The height of the content block decreases, the image shifts to the left and the description goes beside it.


3. Images for Retina Screens


To get sharper, high pixel density pictures, your images should be twice as big. CSS properties will compress them to the necessary size, which will get perfect results.

4. Responsive Menus


Responsive email design creates new challenges for HTML email developers. Some newsletters are more complex and require careful handling when it comes to navigation. In short, there’s no universal solution. Depending on the design, our team always picks the most suitable unique menu scaling option for each template.


5. Hidden Design Elements


If you don’t actually need to display all the information for your mobile users you can always keep things clean by hiding images, texts or whole content blocks.


6. Table Scaling


You can transform complex tables with multiple rows and columns into easily-digestible lists, displaying all the relevant information.


7. Fluid Images


Fluid images cleverly adapt to the width of the screen in question. They’re a great way to showcase your finest visual assets and draw user attention straight to your featured products. Also, don’t make the mistake of forgetting about animated gifs. They provide an eye-catching way of grabbing attention whilst highlighting product features.

8. Image Clipping


Sometimes fluid images might look a little small. In this case the developer can simply crop the image using the CSS clip property. Simple! Depending on the image, you can effectively crop it any way you like. Image center…


Leave the right side…


Or the left side. Nice.


9. Image Replacement


It’s also a good idea to show different images for smartphone users. The big advantage? Faster-loading images which download even when internet connection is poor.


Email Design Templates to the Extreme!

As you might imagine, there are plenty more responsive email design techniques; some with limitations and frustrating little nuances. This is where email coding experts such as PSD2HTML can help. Since 2005, we’ve created thousands of awesome email template projects. Our approach is to ensure that no matter how complex the content, the newsletter will rock, regardless of the device it’s viewed on.

Don’t worry about creating a specially optimized version of your newsletter… you really don’t need to! Our developers will take your desktop designs and hand-code them into sleek responsive templates. And if you’re having trouble with some existing responsive versions of your designs, we’ll be happy to have a look at them for you.

It’s time to flick the responsive version of your newsletter template in the metaphorical waste-paper bin and skip to the more effective approach. If you’re still unsure, challenge us with a fancy email design and we’ll show you how it’s done!

Less Time, Less Effort, Less Spend

We have some even more exciting news for you. The biggest price meltdown is here! You can order the highest-quality desktop HTML email template for just $79, which is $120 off the regular price! PSD to responsive email coding is available for just $99, saving you an unbelievable 150 bucks!

This smoking hot offer ends August 31, 2015, at 9 pm UTC, so don’t miss out! Start a rocking email campaign today!


About the Author: Dmitriy Romasko is the Team Lead and trainer for the HTML Email department at PSD2HTML. He is a big fan of newsletter template coding. Dmitriy has over seven years of experience, and he is passionate about responsive email solutions, web design, and online marketing.

All posts Back to top