Responsive design is a method used to adapt the way the message is displayed to the device your contact is using.
Mobile devices are smaller than desktop or laptop computers, and therefore you need email messages to adapt to the different width.
Text becomes easier to read, buttons and links are easier to click on, and images become as wide as the device allows them to be.
Things become more complicated in email compared to the web because we are deal with a vast array of email clients (Outlook, Gmail, AOL, etc.) that don’t appear to follow a common standard.
Let’s look at how responsive design works in email.
This is a standard message hand-coded with no mobile optimisation. Here is how it looks in a desktop email client:
And here is the same message opened on a mobile device:
We have exactly the same message in desktop and mobile. If you test the message on a mobile device you would notice how hard it is to read (for example the text is too small), how difficult is to click a button or a link (the buttons are too small for the finger to click on it)… and you’d find yourself needing to zoom in all the time. Not an ideal situation.
Here is the same message, rebuilt and sent to Gmail:
The result is a readable email, with buttons and links that are easy to click on and no horizontal scrollbars.
How to ensure your email is responsive
First of all, all email campaigns and landing pages created in Wired are responsive as default, this means you don’t need to do a huge amount of work to make sure your content looks good on different devices.
There are a few ways to improve this though, we recommend testing your email on different devices, and you could make a few tweaks if required:
Showing different content on mobile and desktops
Sometimes, it makes sense to change the content you see on mobiles versus desktops, for example, if you have a very large image in your content, this will be difficult to read on mobiles. You could insert a smaller more concise image into your email for mobile versions only.
Use the Desktop and Mobile toggles to show or hide different content on these devices – it might look odd inside the editor as you’ll have duplicated content but don’t worry! The right version will be displayed (you can always test it to check).
Changing image width on mobiles
You may also require additional control over your images on certain devices. Depending on the structure of your email, it is sometimes more user friendly to ensure the images in your email are full width on mobile devices, this prevents your images looking misaligned or showing gaps on the sides of your images. Check the box for each image to update this.
Turning off stacking
As mentioned above, all campaigns and pages are fully responsive, which means that your columns stack under each other. There may be occasions where stacking isn’t preferred, and in this case, you can turn stacking off the row.
You have the ability to invert the columns' stacking order on mobile.
If your email or landing page layout has alternating content, you can turn on reverse stacking to ensure that, on mobile, images are consistently displayed above their accompanying content.
To turn on reverse stacking, click on the row in your email, and under the 'Row Properties' panel on the right-hand side, switch on the toggle for 'Reverse stack order on mobile'.
Remember: You can preview your email whilst designing to see how it will display on mobile devices. This is an important step before hitting send.