Make your email code responsive

If you are using an email platform and want to make the code that you export from Lucidpress responsive, follow the steps below:

Step 1: Create a desktop and mobile document

You will want to create a design the fits your intended screen size for both desktop and mobile. Typically, you should design the desktop version of the document, duplicate it, and then create a mobile version with the same content. The desktop version will typically be wider while the mobile version will be slim and the text large and easy to read.

Follow the below steps to create a mobile version of your document:

  1. Duplicate your file
  2. Name the duplicate "mobile"
  3. Change the size of the mobile version (Typically anywhere between 400-600px is suitable for mobile)
  4. Adjust your content to fit the mobile screen-size

While designing, you can add links to shapes and images so that the areas will be clickable in your email.


Here are some same sample templates to get you started:

Desktop template
Mobile template

Step 2: Create the embed code

In both mobile and desktop versions, click the share dropdown > embed in email > select “multiple-links” > export code

Step 3: Combine the code in a text-edit file

Open a text-edit file and add the following:

<body></body>

Paste both codes that you exported from your documents within the body code. (view example)

Step 4: Create your style code

Above the body code, create a style snippet.

Paste the following:

<style>
@media only screen and (min-width: 640px) {

.desktopview {
display:block!important;
}

.mobileview {
display:none!important;
}
}

@media only screen and (max-width: 640px) {

.desktopview {
display:none!important;
}

.mobileview {
display:block!important;
}
}

</style>

Step 5: Add the classes to your HTML elements for both desktop and mobile versions of the document

Once you have done this, add the classes to your tables in each version of your document as shown: (Add the mobile class to the mobile code and the desktop class to the desktop code)

Here is an example snippet of all the code put together.

Step 6: Paste the code into your HTML platform

As you test, you will notice depending on your screen-size with viewing on mobile or desktop, the content will automatically adjust to the different versions.
Blank_Print_Document__2_.png