What is Responsive Design?
Responsive design ensures your website looks and functions well on all devices—whether it’s a phone, tablet, or desktop. Studio’s tools make it easy to create adaptable layouts without coding.
Creating a responsive website ensures your design looks great on all devices—from smartphones to large monitors. In this guide, we’ll cover tips for setting up responsive designs and checking your layout to ensure it’s ready for launch.
How Responsive Design Works in Studio.Design
In Studio.Design, the key to responsive design lies in breakpoints. A breakpoint defines a specific screen width at which the site’s design or layout changes. You can configure these breakpoints at the top of the editor and adjust your design for each screen width.
You can set up to five breakpoints, starting with a “base” size (typically for desktop) and cascading styles down to smaller screens like tablets and smartphones. This flow—starting with the base design and refining it for smaller sizes—is a foundational workflow for setting up responsive design efficiently.
Four Tips for Responsive Design
Tip 1: Plan Layouts with Box Structures in Mind
One of the app's standout features is its box layout system. Websites are designed by stacking or nesting boxes, which is also crucial for responsive settings.
Ensure the box structure remains consistent across all breakpoints. While you can’t create different box structures for each breakpoint, you can create separate boxes for elements like titles and show them only on desktop or mobile.
❎
✅
For example, you might prepare a title for desktop and another for mobile, depending on how the layout shifts.
Tip 2: Set Maximum Width for Content
Responsive design isn’t just about mobile optimization—large displays matter too. Without setting a maximum width, content can unintentionally stretch too wide on bigger screens, disrupting your design.
To prevent this, set a max-width for your content. The app makes this easy using section boxes. These boxes allow you to define a structure where a 100% width container holds a centered box (e.g., 1080px wide).
Note, if you need a full-width background, nest regular boxes and assign the nested box a width you want.
Tip 3: Use Sizing Units Effectively
Many responsive design issues come from improper use of sizing units. While everything might look fine in the editor, layouts can break on real devices because screen resolutions vary.
Here’s how to make better use of sizing units:
Unit | Behavior |
% | Scales relative to the parent box or page size, adjusting with screen size. |
auto | Automatically adjusts size based on the content within the box. |
flex | Distributes space dynamically between sibling elements. |
px | Fixed size that doesn’t scale, useful for maximum dimensions. |
Examples:
Use auto for height unless a fixed value is necessary.
Use % for scalable widths across breakpoints.
Use flex to keep text and images from overflowing their parent boxes in tight layouts. For example, if you have a box with an image of fixed width, you can set two text boxes next to it with “flex 1” and “flex 2.” This means the text boxes will share the leftover space in a 1:2 ratio, with the second box being twice as wide as the first.
Tip 4: Adjust Box Directions to Simplify Edits
When rearranging nested elements like text and images, you can either adjust the box structure or simply change the box direction. The latter keeps the structure intact, which is easier to manage in responsive designs.
❎
Dragging and dropping to rearrange alters the box structure
✅
Change the box direction to keep the structure intact
Checking Your Responsive Design
Using the Design Editor
In the editor, you can seamlessly adjust the screen width to preview how your design adapts. This helps identify layout issues or overlooked elements before publishing.
Testing on Real Devices and Tools
Use the Live Preview feature to view your site on devices like smartphones and tablets. This also allows you to test interactions like taps, which aren’t possible on a desktop.
For quick multi-device previews, browser tools like Chrome Developer Tools or extensions like Responsive Viewer are invaluable.