CMS Development

Nopti123
Member

Drag and Drop email

I am creating a drag and drop email exclusively consisting of images. 

 

Some images are using the layouts with two or three pictures side by side. 

 

This looks fine in the preview for desktop, but in the preview for mobile; the images are all one on top of the other and not side by side. 

 

How do I rectify this so it appears the same on desktop as it does on mobile?

 

Any ideas? 🙂 thanks in advance

0 Upvotes
6 Replies 6
jmclaren
HubSpot Employee
HubSpot Employee

Drag and Drop email

What you are describing is a responsive email.

That is normal expected behavior of emails on mobile. If the content stayed side by side, it would likely require zooming and panning around the email for the user to be able to read it. Similar to responsive web design, the general consensus is that adapting the email to the screen is a better user experience.

If this is undesired still, and if this is a drag and drop template you are talking about you can convert it into a basic email template and it will no longer be responsive.
Screen Shot 2019-09-19 at 9.20.13 AM.png

Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

0 Upvotes
Nopti123
Member

Drag and Drop email

Thank you for your response. How do I access the screen shot you have illustrated please?

 

Thanks again 🙂 

0 Upvotes
jmclaren
HubSpot Employee
HubSpot Employee

Drag and Drop email

The screenshot itself should just show for you. (if you are viewing my response in your email you should click the link to view in the forum)

I'm guessing you meant how do you pick whether it's a responsive or basic email. In the design manager, when editing your email,  make sure the inspector(the right side pane) is not selected on a specific module in the email, but just the email itself. click where it says "Responsive Email Template"

Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

0 Upvotes
Nopti123
Member

Drag and Drop email

Ah I see. I'm not in design manager (although I can access this), but when I search the individual email I have created isnt there. 

 

I'm guessing I need to learn more about design manager and modules and how to move to email here. Do you have any advice for further reading? 


Thanks

0 Upvotes
jmclaren
HubSpot Employee
HubSpot Employee

Drag and Drop email

Sorry I don't want to confuse you here. So now that I understand, you were using the new drag n drop email builder, and not the drag n drop template editor inside the design manager.

The drag n drop email builder that you were using does not support the ability to make non-responsive emails at this time.

If you are not well versed in email development using HTML, HubL and CSS, the design manager drag n drop functionality may not be as intuitive for you. Here's an overview of the design manager. It's primarily aimed at web developers who are already confident in HTML, CSS, HubL, and javascript, if you feel that describes you then I encourage you to proceed, otherwise I would encourage sticking to the drag n drop builder you were using previously. HTML Emails are very difficult, and the builder makes it dramatically easier.

I would also consider whether it's worth it for your email to be made non-responsive. Most of the time it's not.
Why responsive emails are important




Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

0 Upvotes
Nopti123
Member

Drag and Drop email

Thanks for your response. I'm not well versed in HTML, and I understand the importance of the email being responsive, however it would be nice to find a work around using the new drag and drop email builder (without needing a knowledge of HTML) to insert images in dual or triple column layouts (as they will each need a different CTA) without it appearing as a stack on mobile. 

 

I'm guessing this is not something I will be able to do in the drag and drop email builder. 

 

The only reason I would want to turn off responsive emails, would be purely to resolve this issue.

 

Thanks for all your help anyway 🙂