Styling Mobile & Desktop Views

Style Independently allows you to apply distinct design updates for mobile and desktop devices. This feature empowers you to link and unlink individual elements between devices, allowing seamless design transfers when needed. With Style Independently, you can do things like: adjust column structures to accommodate the larger width of desktop screens compared to mobile; use different fonts for specific text elements; modify the size of buttons, and more!

1. Each element container has a device icon. When this icon is green, the element is linked across mobile and desktop devices, meaning Style Independently is off. This is the default setting.

2. Clicking the device icon turns it orange with a crossed-out symbol, indicating the element is unlinked and Style Independently is on. You can now make design changes to this element without affecting the other device.

Style Independently only applies to design changes and does not impact the content itself or the number of buttons on the screen. If you wish to differentiate between devices beyond design, you will want to use a device based traffic split.

3. After making a design change, a revert icon will appear next to the device icon. This icon shows there are design differences between devices. Clicking this icon will apply the styling from the other device to your current device, effectively undoing the independent styling.

A key benefit of Style Independently is that turning it off doesn't erase your work. Changes only apply moving forward, ensuring your previous design efforts are preserved.

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 width, then we classify that screen as desktop and serve desktop content. If a screen is below 800px width, then we classify that screen as mobile and serve mobile content.

• Experience Design

• Brand Design

• Mobile vs. Desktop

Keywords: mobile, desktop, view, screen layout, style independently, design, screens