State of the art of Mobile User Experience
Over the last six years, mobile internet use has outgrown desktop internet use. This impressive growth shows the importance of having an optimal mobile user experience.
When it comes to emails, the outcome is not that different. Litmus reported a significant increase in mobile access vs. desktop vs. webmail in 2021 alone.
About 3 in 5 consumers check their email on the go (mobile), and 75% say they use their smartphones most often to check email. — Fluent “The Inbox report, Consumer perceptions of email” (2018).
According to data from MailChimp, “Launching a mobile-responsive email design can increase unique mobile clicks by 15%.”
The Mobile Experience is the gateway to staying relevant in the market.
Not all that glitters is gold.
Being aware that Mobile is the way to go when creating campaigns it’s not the only element that matters when starting designing for a new campaign. Offering responsive tools and can easily render to different sizes of screens is.
71,6% of consumers will delete emails if they don’t look good on mobile, while an average of 10% will read them anyway. — Adestra “Consumer Adoption & Usage Study” (2016). In the Adobe “Email Use 2017 — US Report” (2018), respondents are split about the most annoying aspect of reading emails on smartphones. Roughly 20% mention one not being optimized for mobile, waiting for images to load, having to scroll too much, or the font being too small as the most annoying.
So what is the reason marketers don’t optimize campaigns for different devices? In the 2019 Email Marketing Industry Census by Adestra we can get a glimpse of what doesn’t work when creating a responsive email campaign, for instance.
Mobile optimization in SDK
In March 2021 we launched the Mobile Design Mode in Beefree SDK.
We want to make responsive design one of your users’ experience pillars. End-users could switch between the traditional Desktop view vs. the Mobile view as quickly as a click.
The Mobile Preview revolutionized how your users could design and access responsive content without the need for two separate templates.
You could ignite this revolution by enabling a toggle straight from developers.beefree.io.
The usage of Mobile Design Mode also provided a qualitative improvement to the existing mobile options:
- Hide on mobile/Hide on desktop
Content property to hide a block when displaying the email/page on a specific device.
- Do not stack on mobile.
It manages the behavior of columns inside a row. That row will not be stacked on mobile devices when this setting is on.
- Reverse stacking on mobile
Stacks columns inside a row with a reversed order (i.e., from the outermost to the innermost).
Quick link list:
- Mobile Design Mode https://docs.beefree.io/mobile-design-mode/
- Mobile Optimization Options https://devportal.beefree.io/hc/en-us/articles/4403052381458-Mobile-Optimization-Options
Double down on Mobile Design Mode
Our next step was focusing on how to improve the way users apply different styles to mobile designs. When Mobile Design Mode was initially released, the “Hide On” block was the main feature used to create mobile-responsive designs. Although this type of feature is widely used to create separate, mobile and desktop experiences, we introduced it under a different scope: being able to change the type of content displayed on the device used.
But “Hide On” brought some challenges. There were issues when it came to a significant number of content elements, mostly tied to content redundancy, and a larger HTML output.
After some research, we found that the most requested mobile styles are:
- Different Text sizes for Desktop vs. Mobile
- Different Padding on Desktop vs. Mobile
- Alignment on Desktop vs. Mobile
All the settings above are essential to creating Mobile responsive campaigns.
Improved Mobile Design Mode means an improved mobile design experience.
By “Mobile Responsive,” we mean designing digital assets optimized for mobile devices. The reason is simple. Mobile devices have more restrictions in terms of usable “real estate”.
The new Mobile Design Mode lets your user have complete control over font size, padding, and alignment. Each aspect can now be controlled individually and tailored for mobile devices from the mobile content area stage.
Font Size, Alignment, and Padding are now “flagged” as editable elements on Mobile for the following content types:
- Title,
- Paragraph,
- List,
- Menu,
- Button,
- Icon,
- Form.
When the “ Mobile “ flag is highlighted, the content is explicitly rendered for mobile devices. This piece of content is styled separately from the desktop counterpart.
To improve the overall user experience, the font size (which was previously displayed in the content area, as shown below) has now been moved to the content sidebar.
Your users can track the changes performed in the Mobile stage from the history.
By improving the Mobile Design Experience of our builders, we aim to improve the design process, so your users can finally focus on content that converts.
Advanced Permissions & co.
With Mobile Design Mode, you will be able to have granular control over the way your users access the content. Mobile Design Mode supports Advanced Permissions to restrict access or grant it to a selected group of users. If you want to learn more about making the most out of Advanced Permissions, take a look at our previous article.
Mobile Design Mode also supports Content Defaults to have complete branding control (we talk about them here) and Custom CSS to style it in a way that perfectly blends into your application.
All these elements grant you the peace of mind you deserve.
Quick link list:
- Protecting your customers’ brand while making design available to all [PART 1] — [PART 2]
- Custom CSS https://docs.beefree.io/custom-css/
What are you waiting for? Get started today!
With these features, you can provide users with a more efficient way of working and give them more time to spend on what matters the most to them. Book a demo today and see for yourself how Beefree SDK can help your business.
