Why Should You Focus Your Sleekbox Design for Mobile?

In This Lesson You Will Learn

• What are the benefits of using SleekBoxes for mobile.
• How do SleekBoxes work on a mobile device.
• What is Sleeknote’s attitude regarding mobile SleekBoxes.
• What should you keep in mind when creating mobile SleekBoxes.

Why should you focus your SleekBox design for mobile?

We live in a World where we can search for information from anywhere, at any time. Different devices give us the opportunity to engage with companies and audiences in various ways.

According to Think with Google, 27 percent of people only use a smartphone. That is nearly twice as many that only use a computer. This means that 1 out of every 4 people browses for information only on a smartphone.

A mobile phone is the most used device worldwide. With a couple of clicks, it allows us to get to information fast and comfortably.

Although the screen is smaller, the usage is much higher. So how should you use this to your advantage? By implementing SleekBoxes for mobile!

Are you worried about having a popup for a mobile device due to Google’s guidelines or because they simply seem intrusive?

Google has listed three examples of how a mobile pop up might hurt your ranking:

1. The pop up is covering the main content.
2. You have to dismiss the pop up before accessing the main content.
3. Having your pop up appearing similar to a standalone interstitial, but the original content has been inlined underneath the fold.

However, this is not how we work at Sleeknote!

SleekBox Attitude at Sleeknote

Many companies use mobile pop-ups that cover the main content on the page and have to be dismissed before accessing the content on the website.

However, this is not the attitude we approach popups with at Sleeknote. We aim to create small hidden gems for lead generation.

How? The answer is simple: we have limit lines that ensure a SleekBox teaser can’t be too tall and give you complete freedom of the size and the position of the teaser.

Therefore, you will not bump into any problems with Google’s guidelines. Let’s have a closer look at how this looks in practice.

SleekBox Teaser

A Danish bag retail company Helm has been using a mobile SleekBox for collecting leads. The SleekBox teaser on their website takes up a small space at the bottom of the page. The white font on a blue background states: win 1999kr bag of your choice.

From the first look, the teaser is not covering the original content and is not disturbing the visitor’s user experience. The text is short and precise, sending a clear message about the campaign.

So let’s see what happens when you click on it, because who doesn’t want to win a bag of their choice?

A larger SleekBox appears with fields to fill in. This is how Helm collects their leads with a couple of touches. Once you fill out your personal information, you are automatically enrolled in the competition and signed up for the newsletter as well.

With this small and non-intrusive teaser, Helm has been able to convert 16% of their mobile visitors into subscribers. That is quite impressive, isn’t it?

Small SleekBox Teaser

If you are still worried that the SleekBox is taking up too much space, you can use a small teaser instead. This enables you to take up even less screen space than the example I just gave you! So let’s see how it looks in practice.

A Danish private school called Herlufsholm has an Open Day event coming up. And they want to make sure people are aware of the news. Thus they implemented a small teaser to their mobile site. As you can see the position is in the bottom left corner, and the size is smaller.

When you enter this website on a mobile device, the SleekBox neither bothers you or negatively affects your user experience. By using the same color scheme as on the website, they blend in with the overall look and become more of a feature on the website, than an annoying popup. The position of the teaser can be adjusted based on your personal preference and the content of your website.

With the small space on a SleekBox, we encourage your message to be short and precise. Try to avoid images, in this case, less is better.

SleekBox Inheritance

If you’re already running a SleekBox for desktop, elements will automatically inherit styles onto the related elements on mobile. This means that if you change the background element on your desktop SleekBox, it will be automatically changed on mobile as well.

We understand that in many instances you may want to adjust the teaser for mobile in a different manner. You can do this by unlinking elements in the editor and breaking the link between element styles.

Let’s imagine that you want to shorten the message on the mobile view. You simply press on the text element and unlink it in the top right corner.

This way the style changes will only be applied to the currently active device. You can adapt the text to your preference, and use the base of your already existing SleekBox. The editor allows you to unlink any element, which gives you the freedom to best implement the teaser to your website.

Conclusion

Mobile devices are too important to ignore. And we, at Sleeknote, are here to help you make your SleekBoxes polite, while still charming enough to grab the visitors attention.

To wrap up what we learned today, let’s go through what you need to keep in mind when creating a mobile SleekBox.

1. The size and position matters. You don’t want to cover too much content on the site. Make sure you are positioned in a non-intrusive way.
2. Choose the right words. The space on the SleekBox is limited. Be short and precise.
3. Do not forget the user experience! Put yourself in the shoes of your customers, and adapt the SleekBoxes in the most polite way possible.

By remembering all these points, we believe you are all set for implementing a mobile SleekBox to your website!