Topol PRO simplifies this with its adaptable design tools and robust visibility options. In this article, we’ll examine the key differences between desktop and mobile views and guide you through best practices for styling your templates accordingly.
Desktop vs. Mobile View in Topol PRO: A Brief Introduction
Topol PRO’s template editor is responsive by default, meaning all templates automatically adjust their layout based on the device on which they are viewed. You can simulate this view directly in our editor to see how your template will look on a desktop or mobile device.
To switch between these views, use the designated buttons just above the template. In addition to the buttons for switching between Mobile and Desktop view, you will also find an important "Show hidden" toggle next to them. We will discuss how to use this toggle later in this article.
For instance, a multi-column structure (like 2 or 3 columns) will stack into a single column on mobile devices to ensure readability.
However, this default responsiveness might not always meet your specific design needs. Depending on the device, you may want to display different content, rearrange elements, or even turn off responsiveness for specific structures. Let's explore all of these options in more depth and learn how to set them up efficiently.
Displaying a different layout on mobile and desktop devices
Switching between mobile and desktop views automatically rearranges blocks from rows into a single column (and vice versa) and adjusts their size, ensuring they always fit the selected screen.
However, in certain situations, you may wish to customize your email content. For instance, if your email has more than two content sections displayed side by side, rearranging them into a single column for mobile view might overly stretch the layout. In this case, you should display only the first one or two examples. Additionally, you could present a shorter description in mobile view while maintaining the full description in desktop view, or show a different image based on the device.
To achieve this level of responsiveness, follow these steps. We will create a template that displays different content based on the device it is viewed on. Let's get started!
1) This serves as our initial template, shown in a desktop view (as indicated by the Desktop button selected above the template).
It consists of two structures: one contains the heading and an introductory text, while the other features three columns in a single row, each containing a set of basic blocks stacked on top of each other, specifically a text block, an image block, another text block, and a button block.
2) Select each structure and duplicate it just below it by clicking the Duplicate button.
As a result, our template will look like this.
3) Select one structure from each pair (it is important to select the entire structure, not just the individual blocks it contains). Once selected, look at the bottom section of the Structure properties panel. You will see three toggle buttons:
• Hide on mobile: This will make the selected structure visible only on desktop.
• Hide on desktop: This will make the selected structure visible only on mobile.
• Lock the structure: This option is irrelevant to this topic; you can ignore it.
Select the first structure from each pair and mark it as "Hide on mobile." Select the second structure from each pair and mark it as "Hide on desktop." When you mark the second structure as "Hide on desktop," it will immediately disappear from the template. Don’t panic—it's still there; it has just become invisible because you are currently on a desktop. To see it again, you must toggle the "Show hidden" button at the top of the editor. When you do, all hidden structures (those set with "hide on desktop" when viewing on desktop or those set with "hide on mobile" when viewing on mobile) will reappear, but with lower opacity, indicating that they are hidden on the current view.
Do this with each pair of structures. Always set one to be "hidden on mobile" and the other to be "hidden on desktop".
Now switch to mobile view and see what happens. As you expect, structures marked as "hide on mobile" will now turn transparent, and structures marked as "hide on desktop" will switch back to full opacity.
4) You can customize structures to control how they will display on mobile or desktop devices. When configuring structures for desktop view, switch the editor to desktop mode. For mobile view, switch the editor to mobile mode. This allows you to see how your structures will look in that version.
It is a good practice to modify only the structures visible in the current view (mobile or desktop) and ignore the transparent ones. Then, switch to the second view option and apply the same rule.
In this example, we removed one column from the mobile version to shorten the email and adjusted the text accordingly.
To modify each column, use the Column's properties section of the Structure properties panel.
Once you modify the columns of your structures, feel free to turn off the "Show hidden" toggle. Now, try changing the view mode to see different template versions.
As a result, you get two distinct versions of your template, each tailored specifically for the target device.
Consider sending a template as a test email directly from the Topol application to your preferred email service provider (Gmail, Outlook, etc.), and view it on both desktop and mobile clients. Emails may look slightly different there compared to the editor, due to the way each email service provider handles email styling. These changes are often beyond our control.
Option to stack columns in the mobile view
One additional, but equally important feature is the ability to choose whether two side-by-side columns should be stacked into one column or remain side-by-side in mobile view. This option will effectively disable responsiveness for the given structure and maintain the desktop layout even on mobile, only making all blocks smaller to fit the mobile width.
This option is controlled by the "Stack columns on mobile" toggle, which is available when you select a structure to modify this way.
Ensure you are viewing your template in mobile view; otherwise, this option will not take effect immediately. When you switch it off, your columns will revert to their original side-by-side position as displayed in desktop view.
We understand that this workflow may take some time to get used to. If you feel lost, don’t hesitate to contact our support, which is always eager to assist you!