Solved

Design looks good on Apple mail but bad on Gmail

  • 30 May 2022
  • 1 reply
  • 933 views

Badge +1

Hello,

 

I have been dealing with some issues trying to design our first emails with the platform and I was wondering if you could help me or put me in contact with someone who can. 

 

We designed a newsletter just like the image I'm attaching in this post and these were the issues we found when visualizing the design on Gmail:

 

- The header misplaces all the buttons and sorts them in a column instead of a row. Also the logo appears duplicated, when there is only one image.

- The footer, which has to look very small, makes the letters bigger on mobile. Also the buttons on the footer are sorted in a column instead of a row. Also, the footer is aligned to the left when the design is messed and has to look centered.

 

We can only see the correct newsletter design on Apple Mail (desktop and mobile), but it looks bad on Gmail (desktop and mobile).

 

I've tried the technique I've seen on some forums that recommends disabling optimizations but that doesn't work either. Is there any way that we can see the same EXACT same desktop design on mobile but maintaining the button options?

 

Thank you so much!

icon

Best answer by David To 31 May 2022, 20:06

View original

1 reply

Userlevel 7
Badge +60

Hello @nuria-gim,

Welcome to the Klaviyo Community!

I think it’s helpful to first understand that emails will typically render differently based on a number of things. Most notable, the inbox provider you’re using, the device you’re viewing the email on, and the medium (browser, app, etc) you’re viewing the email from. Any combination of these along with some other known rendering quarks - such as Outlook - may cause your emails to look different from one another. For this reason, we typically recommend using tools such as Litmus or Email on Acid which are email preview tools to allow you to view how your email will appear. You can then use these previews to help guide how to design your emails to appear as consistant as possible across the all mediums.

Essentially, various aspects being reorganized to appear in columns rather than rows and your font changing size are all attributed to viewing the email on mobile. I believe taking a look at our Optimize Your Emails for Mobile Help Center article and some additional Community posts I’ve linked below could be helpful to wrapping your head around the behavior you’re describing:

If you need more technical help or assistance designing your emails, I would suggest speaking with some of our Klaviyo Partners who specialize in email designs. You can find a list of our accredited Klaviyo Partners through our Partner Directory.  

I hope this helps!

David

Reply