![]() We also reset padding to zero on all MJML elements. This includes a new font and sets the font for any email that includes this file. In the common directory create the following files and paste the snippets: The email is built up of some reusable partials:Īlong with the main email itself that brings these together. If creating a new project you will need to add it to this array. ![]() This is a left over from the example project. If you have a look in you will see cuppas listed in the projects array. COMPILED_TEMPLATES - compiled HTML emails.common - partials such as headers and footers that can be re-used.This command also added these directories: We have an easy command to scaffold new project directories: yarn create-project "cuppas" We first need to a project/brand directory to house all it's emails. To keep it simple we will re-create the example one: A promotional email for Cuppas a fictional coffee shop. We now have a clean working directory to start building responsive emails so lets create one right now! Lets remove the demo files and initialise a clean Git repository: yarn clean-up Note:I will be using yarn but if you prefer, you can use npm cd mjml-multi-project/ We will do that by running the following commands: In a new working directory clone the MJML Multi Project by running the following command: git clone we want to initialise the project. I thought there had to be a better way? I looked for the answer which lead to the creation of MJML Multi Project which we will be using this today so let's get started. table ) we currently use in the web.Īnyway, as suggested in Campaign Monitor Responsive Email Design Guide, using media queries, you can hide an image and show another one as a background image instead.Up until recently I was coding emails without the aid of any tools or frameworks. When the device width decreases, we have to resize the container and force all the tables-columns to 100% width. The trick is the use of the table align="left" attribute that causes tables to align horizontally.Įvery element must have a specific width and their total must have the same value as their container. This has always been considered the best way to ensure client compatibility, but on the other hand the resulting code is very dirty and practically illegible. There are two easy ways to accomplish this:Įmail composition often requires you to use nested tables. It makes no difference whether you’re working with two columns, three or more: you will need to display them vertically instead than horizontally. Multicolumn layouts require your columns to be rearranged as device width decreases. ![]() You will need to resize images too (see the About images paragraph at the end of this article) and to adjust your font-size also, but there aren’t any other particular needs. To ensure your email resizes correctly, you have only to adjust table width: Effective mobile email design involves many elements including font sizing, layout composition and so on: these are very important tasks and we’ll cover them in an another article. Luckily, most mobile devices have a high compatibility with modern CSS rules, so we are able to tackle all these problems easily using media queries, making a large use of the !important declaration (to over-rule inline styles), and paying careful attention to the way your content is arranged.Ī mobile first approach to this kind of projects is very important and allow to avoid layout that can’t be properly arranged in small devices.Ĭonsider that even if, in this article, we will only address responsiveness issues, responsive mobile emails are not automatically good ones.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |