How to design your email so it looks good on both a desktop and a mobile device

[Grace_R]

There are certain tasks that I do solely on a desktop, and others that I use my smart phone for. Booking airline tickets? That's a job for a desktop. Browsing my emails? I often pull out my phone for that. And I know I'm not the only one. Therefore, when designing your emails, it's important to ensure they will look just as good on a mobile device as they do on a desktop.

Rest assured that every Constant Contact email template is mobile-responsive, which means your email will automatically adapt to the size of the screen it's being displayed on. Still, there are things to keep in mind while designing your email. To learn more, take a look at our best practices. Once you've designed your email, you can preview it to see how it will render on a mobile device.

Need some encouragement or advice before you send? Visit our Campaign Feedback board to share your email template and get feedback and tips from other members of the community.

[DavidFischerSolutionsForGrowth]

As Grace stated, all Constant Contact email templates are mobile responsive, and the preview feature is great to see how your email will look both ways. It helps to look at every email you design in the mobile preview because even if the email is responsive and looks good on a mobile device, sometimes there are small things you notice on the mobile view that can be adjusted. For example, an image may look fine on a desktop, but on a mobile device appear very large.

To correct that, you have to reduce the image’s resolution. To do that, go to the edit screen - edit-transform-resolution (remember to check the “lock” box). Reduce in small increments and you may find that using percentages is easier.

Once you reduce the image, make sure it appears the same in the desktop view – not blurry. (If blurry, you have reduced the image too much.) Then check the mobile view to see if it appears smaller and the way you want it to. This can be particularly important if you have a row of images or logos in the desktop view and you don’t want one image to appear larger than the rest in the mobile view.

I hope this shows how important it is to check the email draft in both desktop and mobile views and adjust if necessary. If you have any questions, please let me know. I am always happy to help.

[TraceyLeeDavis]

I'll piggyback on Grace's best practices and David's great advice in regard to images. I often see people adding graphics that have a lot of text on them in emails. While there are a number of issues with using text-heavy graphics in emails, in regards to being mobile-friendly, the graphic won't adjust its dimensions on mobile. So text that was readable on a desktop might not be readable on a mobile device. It's best to have any important text be actually typed out in the body of your email so that it can be reformatted as needed in the mobile view. 

[user56603]

I would actually really love to prevent my emails from being mobile-responsive. Almost 100% of our emails are read on desktop, and the layout we want gets very skewed on mobile screens. Is there a way to turn off mobile-responsiveness? 

[Caitlin_M]

Hi @user56603. All templates and emails created in the editor are mobile responsive and this cannot be turned off. 

[user56603]

Got it! We'd really love for this to be considered as additional functionality in the future. The editor is great most of the time, but it does limit our options because of the way mobile responsiveness changes the layout. I think being able to turn off mobile responsiveness is something many of us would appreciate. Thanks!