Device mode allows you to make your website responsive by having it automatically adjust its layout and styling, depending on your visitors' screen width. There are four screen sizes to choose from: "desktop" (1280x768), "tablet landscape" (1024x786), "tablet portrait" (768x1024), and "phone portrait" (375x559).
Each of these represents a width-based break point. Break points are like "thresholds" that you can use to apply styling changes to your website -- when a user's browser width hits that specific threshold, you can specify specific changes to take place. For example, you can specify that the font size of all your paragraph text becomes smaller when the user's screen width hits 768 pixels wide.
If you're new to this concept of responsive design, you might want to take a look at this article, which provides an overview of the idea and some best practices for making your TIME Sites website mobile-friendly.
Designing Responsively vs. Designing for Specific Devices
It's important to understand that the different device modes in TIME Sites do not necessarily correspond to actual real-world phones and tablets. Rather, they are screen widths that we've chosen because they are generally representative of that category of device.
Because of the huge range of mobile devices and screen sizes that users may have, it's unrealistic to design for specific devices (the width of one person's tablet may be the same as another person's phone, for example.)
This illustration shows the broad range of different screen widths of some of the most common phone and tablets. As you can see, it would be nearly impossible to specifically target every device with your design:
For this reason, it's best to remember that your goal as a web designer is to make your layout responsive, rather than optimized for a specific phone or tablet. Focus on making your design usable and attractive as it gradually gets narrower, rather than fixating on specific devices.
Switching between Devices
Open the Device Mode tool by clicking on the icon in your top toolbar.
The device mode is set to "desktop" as default.
Each time you choose a new device, the TIME Sites studio will automatically resize, giving you a preview of what your site will look like at the chosen screen width.
Designing by Device
Once you have a device selected, you can begin making changes to the styling of elements on your page. The changes you make while in this mode will be applied only when the user's browser is at this width, and below. (The changes will not be visible if the user's browser is wider than this.)
There are two important things to remember when working in device mode:
Your changes will cascade downwards. In other words, the changes that you make will apply to the current screen width, and all screen widths below it. For example, if you choose "Tablet Portrait" and decrease the size of a text heading, that change will apply only when the user's width is 768px or less. (You do not have to reapply the change in "Phone Portrait" mode, since that is a lower width.)
You can edit the styling of the elements on your page, but you cannot change the structure of the page. Styling mean colors, typography, borders, dimensions, positioning, backgrounds, filters, and transforms. If you add new elements, delete elements, change text copy, or rearrange the order of elements on the page, your changes will apply to all devices. Note that this also applies to inline text styling -- if you want a font size or style to change on a smaller device, make your change at the element level or via Global Styles, not inline.
The easiest approach to ensuring your site is responsive is to design it the way you want it to appear on desktop first, then check and see how it looks on each of the smaller screen sizes, and make adjustments to the styling where necessary.
Device Mode and Global Styles
You can also edit your global styles on a per-device basis. From within the global styles panel, use the Device Mode button to choose a device type, and edit your styles:
As with inline editing, any changes you make to your global styles while in a device mode will cascade downwards to all smaller device sizes.