Configuring Responsive Design
Responsive settings are to optimize the design and layout of a website according to the screen size and resolution of the device.
By setting it up, your website can be viewed comfortably from any device. In this article, we will show you how to set up Studio's responsive settings and some tips on how to set it up.
Tips: Auto Responsive
Using the AI feature, you can quickly and automatically set up responsive settings.
For more information, please see the article on the AI Features in Studio.Design.
Concept of Responsive Settings in Studio
Studio defaults to a PC screen size design. If you do not have responsive settings, its content and structure will automatically apply to tablet and smartphone screen sizes as well.
Therefore, you should first complete the design for the PC screen size, then adjust the layout for tablets, and then for smartphones, in that order, from the largest screen size to the smallest.
Proceeding in this order makes it easier to adjust the overall layout and reduces mistakes.
The order of responsive settings is as follows
Create PC size design
Adjust tablet size design
Adjust mobile size design
What You Can Do with Responsive Settings in Studio.Design
In Studio.Design's responsive settings, there are items that can be changed for each breakpoint and items that cannot.
Items that can be changed at each breakpoint (examples) | Size, Color, Orientation, Alignment, Show/Hide |
Items that cannot be changed for each breakpoint (examples) | Images, text wording, grouping structure |
Tips: If you would like to display images and text separately for each breakpoint, please use the display settings of the corresponding box. For detailed instructions, please see How to change the images displayed on PC and mobile.
Procedure for Responsive Settings
Follow the steps below to set up responsive settings. First, complete the default (PC size) design, and then adjust the design for each screen size in turn. Setting in order from the larger size to the smaller size will help stabilize the overall layout.
On the toolbar at the bottom of the screen, switch Device Size to [Tablet].
Select any box and change the size, color, orientation, alignment, etc.
Use the toolbar at the bottom of the screen to switch the device size to "Mobile".
Select any box and change its size, color, orientation, alignment, etc.
Point: For information on how to edit breakpoint values and viewing device choices, please see How to Set Breakpoints.
Highlighting Responsive Setting Items
Items whose values are overridden by responsive settings for each breakpoint will change the color of the frame in the right panel.
Applicable to tablet and smaller sizes: yellow-green
Applicable to mobile and smaller sizes: orange
Tips for Responsive Settings
Be aware of the following points for smoother setting.
1. Use a Size Unit that Varies According to the Screen Width
When specifying the box size unit, it is recommended to use a unit that changes according to the screen width, such as "%," rather than "px," which has a fixed size.
When using "px
Since all devices display the same width, the layout may be corrupted or overhang on devices with small screens.
The design does not switch flexibly when the site viewer changes the browser's display size.
When specifying relative units such as "%".
The size is automatically adjusted to fit the parent box and screen width, resulting in a layout that is easy to view on a variety of devices.
In addition to "%," [vw] and [em] can also be used depending on the application.
Tips: See the help article on size units for more information.
2. Changing the Orientation of Boxes to Match the Viewing Device
The best layout differs depending on the device used to view the page. On a PC with a wide screen, multiple boxes can be aligned horizontally to display information in a page in a highly organized manner. On the other hand, on a smartphone, where screen width is limited, the same boxes can be rearranged vertically for a more readable and organized display.
To arrange the boxes, select [Direction] from [Down], [Right], [Wrap], [Left], and [Top] for each breakpoint.
Example: How to arrange multiple boxes horizontally on a PC screen and vertically on a mobile size
Select the parent box one level above the boxes to be lined up.
With the screen width set to [Default], set the [Direction] arrow to [→].
With the same box selected, switch the breakpoint to [Mobile].
[Set the Direction arrow to Down.
For detailed instructions, please see I want to arrange the boxes horizontally / vertically.
3. Show/hide elements according to the viewing device
Displaying only the necessary elements for each viewing device will make the design easier to use. For example, you can show only the navigation menu on a PC and the hamburger menu on a mobile device.
To switch between display and non-display, use the eye icon on the right side of the Layers panel for each breakpoint. For detailed instructions, please refer to Setting Box Display by Screen Width and Breakpoint.
Checking Responsive Display
Settings can be checked in the editor or live preview. Prevent layout errors and mistakes by checking before publishing.
How to Check on the Editor
Switch devices by using the toolbar at the bottom of the editor screen.
Check by dragging the screen width in the editor to expand or contract it.
Checking with Live Preview
Use the Live Preview function to check the site in the browser.
Check by stretching or shrinking the width of the window in the PC browser that has the Live Preview open.
Open the Live Preview URL on a tablet or smartphone to check the display on the actual device.
Note: Checking Responsiveness in Live Preview
The display in the live preview switches according to the screen width of the device you are actually viewing. The breakpoint currently selected in the toolbar does not affect the display in the preview.
For example, if you select Default in the toolbar in the design editor, but view the Live Preview on a mobile device, the mobile design will be displayed.
Steps to Remove Responsive Settings
The style for each breakpoint you have set can be deactivated individually.
Toggle breakpoints in the toolbar.
Click the [Remove Override] arrow to the left of the item to which the responsive settings have been applied.
Related Articles
iPad Ipad