Style Independently is a feature that gives you more control over your design elements and how they are laid out across mobile and desktop devices. Because screen sizes between mobile and desktop can be dramatically different you have the flexibility to modify your screen design by toggling on 'Style Independently'.
Step-by-step Guide
To turn this feature on, click the “Style Independently” toggle underneath the mobile and desktop radio buttons on the left-hand menu and save your page.
When the page is finished saving, Style Independently will be enabled. Moving forward, any applicable edits that you make in the mobile view will be saved only for the mobile view. The same will be true for applicable edits made in the desktop view as well.
Style Independently supports a majority of device-specific style options, but it does not support everything. The following options are covered by the Style Independently tool:
The screen layout: For example, you may choose to use a split screen on your desktop device, but a full screen on your mobile.
The number of columns in a container: Because the desktop has a wider canvas, you may decide to include more columns in your container. For example, you might add four columns with a larger container in your desktop view, but two columns in your mobile view.
Background: You can control the colors and imagery of your background
Text Controls: You can modify the font, size of your text, and color
Buttons: You have control of the color and size of your buttons
Frequently Asked Questions
Q. Can the number of buttons or elements differ between mobile and desktop views?
A. Style independently does not support a different amount of elements for mobile and desktop views. Style Independently allows you to change the look and feel of elements between mobile and desktop views.
Q. When is the best time to enable Style Independently on a screen?
A. We recommend turning on Style Independently toward the end of the building process. If you know that your brand gets more traffic from mobile than desktop, then style your experience with mobile users in mind first. Then, towards the end of your process, turn on Style Independently and make desktop-specific style choices later on. This will reduce the number of small changes you’ll need to make once the feature is turned on.
Q. What happens if I disable Style Independently after making design edits with it enabled?
A. If you disable Style Independently after making changes on both views, one of the views will reflect either the mobile or desktop view randomly.
Q: What do I do if I want to make a device-specific style choice that Style Independently cannot support?
A: If you want more flexibility to optimize for mobile and desktop views, then you can insert a Traffic Split into your experience that will direct traffic based on device type. When you add a Device Split, you can style a mobile pathway and a desktop pathway separately. Screens on the mobile pathway will automatically show the mobile view and screens on the Desktop pathway will automatically show the desktop view.
Q: How does Jebbit know whether a user is on a mobile or desktop device?
A: We detect a user's device type based on the size of their screen. The cutoff between mobile and desktop is 800px. If a screen is larger than 800px height, then we classify that screen as desktop and serve desktop content. If a screen is below 800px height, then we classify that screen as mobile and serve mobile content.
Related Articles
Keywords: mobile, desktop, view, screen layout, style independently, design, screens