Take each section of your newsletter or email message and evaluate the priority for each section in a desktop versus email version. For example, the image, the name, and the link of your product are essential, but do you need to add the description? In this example, the description has been removed from the responsive email version.<\/p>\n
![](\"https:\/\/cdn.ofsys.com\/T\/OFSYS\/H\/684886\/9X1VSz\/responsive3.gif\")
<\/p>\n
Example : Beyond the rack<\/em><\/p>\n I usually suggest to assign a rating score of 1 to 3 to their content. Elements identified with a 1 or 2 rating are preserved \u2013 the 1s are mandatory and the 2s are lower priority and can be arranged at a lower hierarchical level (at the bottom of the post). The 3s provide no value and will be removed in the mobile version.<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n A picture is worth a thousand words\u2026 only if it is readable! In a responsive email, reduce the size of your images at 320 px. If the content is unreadable, you\u2019ll have two choices: develop a new image for your responsive version or change your main image using a larger font. In some cases, if you use banners with distinct areas (left text right images), you might think it is relevant to withdraw the left image and use only your right section.<\/p>\n Don\u2019t forget, you can use different images for responsive or simply adapt your design. Also, compress your images in your mailings to reduce their loading time. It is often forgotten but most people who open an email on their phone are on the LTE network, which is slower to charge. \u00a0<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n Once you have selected your content and identified the preferred method for processing your images, you just have to develop a design that fits. It\u2019s a good idea to use separate columns based on your content priorities.<\/p>\n For example, your level 2 rated content arranged in a column on the right, can be found at the end of your message. This solution frees up the entire width for your mobile version and your main content.<\/p>\n Example : Beyond the rack<\/em><\/p>\n \u00a0<\/p>\n Also, consider developing a separate display mode for your menu if it\u2019s not suitable or too broad for your mobile version. Here\u2019s an example of this type of scenario, and the mobile version displays the menu on three separate lines.<\/p>\n Example : Ontario Arts Council<\/em><\/p>\n \u00a0<\/p>\n Remember in your new design that your readers will click with their fingers, and they are not all alike. Develop a model that adapts automatically with responsive technology.<\/p>\n An automated email marketing platform like Dialog Insight has already developed several mobile-based templates. This way, you don\u2019t have to worry about making a responsive email version and your content will automatically adjust. The idea is not to increase your work but rather the effectiveness of your mailings.<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n This last step is crucial for all your email communications, including responsive email. Perform testing, make sure that you are able to click, view the message in every possible way, test each version and confirm if your clickthrough rate improves. There is no miracle recipe! If your results are conclusive, we strongly suggest you to create a guide that can share with all your colleagues who are also engaged in email communications.<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n Conclusion<\/strong><\/span><\/p>\n The good new is Dialog Insight offers ready-to-use responsive email templates. All you have to do is choose your favorite template, add your content and colors, and that\u2019s it!<\/p>\n If you need help to execute our advises, our team can help you plan your content and find an effective solution to increase your results without spending more of your time.<\/p>\n\n\nStep 2: Validate your images<\/strong><\/span><\/h2>\n
Step 3: Think of a new design for responsive email<\/strong><\/span><\/h2>\n
![](\"https:\/\/cdn.ofsys.com\/T\/OFSYS\/H\/684885\/r7mT5v\/responsive1.gif\")
<\/p>\n![](\"https:\/\/cdn.ofsys.com\/T\/OFSYS\/H\/684887\/3sgm5T\/responsive2.gif\")
<\/p>\nStep 4: Test and control the results<\/span><\/strong><\/h2>\n
![\"Whitepapper_dialog](\"https:\/\/www.dialoginsight.com\/wp-content\/uploads\/2023\/05\/icone_v3_livre-550x479-1.png\")
<\/figure>\n<\/div>\n\n\n\nYou want to know how to create really effective emails ?<\/h2>\n\n\n\n
We have created a complete guide on how to ADAPT emails to be responsive.<\/h3>\n\n\n\n