Did you know you can hide elements in your newsletter? That way you can make your newsletter suitable for both mobile and desktop! Isn't that great? I'm going to explain to you exactly how you do that.
Why do you want to hide elements for a certain device?
When you read an email on your mobile, there are a number of elements that differ from reading it on the desktop. Someone who handles email on mobile:
Is not always in a fixed location.
Is often easily distracted.
So keeping the reader engaged on a phone is a little trickier than on a desktop. A few more reasons why your newsletter may differ by device:
Call to actions should be easy to click on. After all, your customer has to navigate by hand.
The place on the screen where "the fold" is located differs when the user views the content in landscape or portrait mode. Make sure the desired call to action is always visible, even if it is a partial one.
Use a readable font with a minimum of 13pt. This is the minimum reading size for an iPhone. Smaller font sizes are automatically enlarged and can therefore affect the design.
1. Design your newsletter as you normally would
Of course you start with the layout of your newsletter in Reloadify. Are you satisfied with your newsletter? Great! Now you can see how your newsletter looks on desktop and mobile. Some elements will look great on your desktop. With the mobile view you have a smaller screen and some elements may be disappointing. It's best to disable these on mobile.
2. View your newsletter in desktop and mobile versions
Did you know you can preview your newsletter in Reloadify for desktop and mobile? When you click on preview in the upper right corner, you will see that your newsletter can be viewed on both desktop and mobile devices:
When you click on the mobile icon, you will see that your newsletter shows the mobile view. Are you satisfied with your newsletter? Send it! Still, I can imagine you'd like to adjust your mobile view. On desktop, you often see the Call to Action which is important. With the mobile view, you want to have the Call to Action directly in the image as well. For my newsletter, the desktop version looks like this:
And the mobile version looks like this:
The problem I run into here is that my 5% discount to the customer is not immediately clear on the mobile version. And that's exactly what I would like to highlight.
3. Adjusting elements for mobile or desktop
I'm not completely happy with the result, so I decide to hide the big 'welcome' on the mobile version. You do this by clicking on the Welcome block so that you see this:
Then you'll see the settings for this block on the right side of the email editor. At the bottom of that block you will find an option to hide the block you selected on mobile:
You click on the mobile icon in this case. Now when I want to preview my mobile version, I see the following:
Yes! 'Grab your discount' does now appear above the fold on the mobile view.
❗️ Because not every phone is the same the end result will differ per mobile. Good testing is key here! 🙌 Good luck!