Jebbit experiences can be viewed on any device type, so Jebbit gives you the option to optimize the style of your experiences for mobile and desktop devices separately. Whether you intentionally optimize content for devices types or not, Jebbit experiences are responsive so the content will always try to fit within a user's screen in the most optimal way possible.
By styling independently, you are able 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. 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!
Toggling Between Mobile & Desktop
Open up the Screen Editor by clicking on any screen from the Builder Map view.
Within the Screen Editor, locate the 'Mobile' and 'Desktop' toggles on the left hand menu.
This toggle is meant to give you a glimpse of how your content will look on both mobile and desktop devices. By default, any changes that you make on the mobile view will be automatically applied to the desktop view.
You will note that individual elements can now be linked or unlinked by clicking the device icon — you can make changes to both screen views simultaneously, or just to one using this feature. Simply hover over each element to determine whether they're linked or unlinked, then toggle between mobile and desktop views to make independent changes.
Style Independently: Mobile & Desktop
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.
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.
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 styling independently is that turning it off doesn't erase your work. Changes only apply moving forward, ensuring your previous design efforts are preserved.
Frequently Asked Questions
Q. Can I have different layouts on mobile and desktop?
A: Yes! You have the option to toggle between different layouts for both mobile and desktop designs. You can also control the layout of individual elements by linking or unlinking changes.
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.