#Mjml desktop breakpoint mobile code#

Now based on past experiences, we all know that these so-called plugins that export code from designs are a scam and they don't really do a great job.

#Mjml desktop breakpoint mobile generator#

We found this plugin for Figma called Marka Email Generator Plugin. So we started to look online for a few solutions and we came across one. We wanted a smooth workflow where neither the designers nor the developers would work too hard on a simple email. But what we realized was that as the number of types of emails increased it would be very hard for the designers and developers to collaborate. Sure we would ask the engineers to code it for us. Hence we decided not to go in that direction. Email building tools are extremely limited when it comes to customization. Now we did not want to use a tool like MailChimp to create emails as we did not want to compromise on the design aspect.

Manually coding it using a tool like MJML.

Using an email builder like MailChimp or,.

So in my experience, there are two ways to go about designing and shipping emails to users. Students have to pay a subscription fee to access all the content the platform offers. The company hires educators who teach the classes LIVE and students can watch them at their own convenience. Unacademy is an online learning platform where students in India can study for various competitive exams such as UPSE, IIT JEE, NEET, Banking, CA, and more.

without using paid and complex third-party tools.Īlright then, let’s get started.

with a smooth workflow between designers and engineers,.

This article is mainly for anyone, especially designers who want to create stunning-looking emails,

Illustrator: For the various illustrations that I used in all the emails.Engineers: To test if the emails end up looking exactly as intended on every device and breakpoint.Senior Designers and stakeholders: To get timely feedback on my designs and the design direction.Product Managers: To understand the list of emails that had to be designed and the content of every email.I was the sole designer on the project and handled everything from start to finish along with other people.

This is more where I talk about the process we followed to design and ship beautiful-looking emails. I’m investigating further, but so far it seems like an isolated issue.Now even though this article is related to design, I am not going to be talking about UI and UX design. For some reason, using your method or mine, a linked image is not clickable. My only issue came with Outlook 2013, the bane of my email-building existence. Support for opacity is lacking for some email clients, but the fallback is just to have the original image show up with the background image behind it, never to be seen by those clients that support but not opacity. Lastly, the swapped image had to have the same width/height ratio, otherwise it would be cut off based on the original image’s dimensions.īackground-image: url(“images/hero-mobile.png”) !important This also meant adding a background-size:cover to the span tag to make sure the swapped image filled the space. One problem I ran into was dealing with fluid images that were 100% width and auto height, so I decided to use opacity:0 instead of display:none on my img tag and left out the width and height for the span tag. I found this one recently and put it to use on a few client email templates where the header image containing text looked too small on mobile, so I swapped out another image with larger text. Thanks for all your great HTML email insights, Geoff.

Put a background image on the span and position it.

Inside of the media query (which will trigger on iPhones and similar hand-held devices) we will set up the image swap. only screen and (max-device-width: 489px) This image is the default image, and will appear on all desktop clients as well as all Gmail clients. All of the magic is accomplished through CSS. Īs you can see, this technique requires no inline styles. Gmail ignores the style block (and all media queries), so all Gmail users will see the “desktop” or default image. This swap should work for all mobile devices in their native apps, as well as all desktop and webmail clients. You can use it to show a cropped version of an image for mobile users or show one offer to desktop users and another for mobile users.Ĭheck out the code for our bulletproof image switch below.

Being able to switch images for mobile is a handy trick to have for a number of reasons.