This article explains how your layout adapts to display just as clearly on desktop as on mobile. This is known as Responsive Design (mobile-optimized).
- Responsive Design
- General rules for custom pages
- Design tip
- Inside a text block
- For Smart pages
- Quick and easy responsive checks
Responsive Design
Responsive Design automatically adjusts how a web page displays based on the screen size of the device being used (smartphone, tablet, desktop computer, etc.).
The goal is to make your site work at any resolution. In other words, content blocks (text and images) resize and rearrange themselves to fit the available screen space.
General rules for custom pages
Custom pages are generally the ones that take the most time to set up and personalize. You'll also need to do a few small things to ensure a consistent display on tablets and mobile phones.
Default display without customization
If you don't customize the responsive display of your custom pages, the following content reading rules will apply:
- Content is read left to right;
- Then top to bottom.
Take the following example: a text block paired with a "TEXT" button (in blue) and an image block paired with an "IMAGE" button (in green). Following the rules above, the raw reading order shown by the red arrow is: Text > Image > Text button > Image button.
The default responsive display will therefore look like this:
That's clearly not consistent with the message I'm trying to convey!
Customizing the responsive display
You'll need to make an adjustment to group the text block with its button, and do the same for the image block so it stays with its button.
To group blocks, hold down the Ctrl key on your keyboard and click each block that belongs together. Once the blocks are selected, you'll see the option to group them in the left panel.
After doing this, you'll have a single block (as shown below). You can always ungroup them later if needed.
Here's the final result on tablet and mobile:
Much more consistent!
Warning: if you group all blocks into a single block (text + images + buttons), the general reading rules will apply within that block — as if you hadn't grouped anything at all!
Best practice: only group blocks that belong together 😉
Design tip
Block borders or separations can sometimes be invisible. Content then appears cramped — on mobile, elements feel squeezed together, which doesn't make for easy reading.
Here's a simple tip to add breathing room to your website and its responsive display.
Play with margins
Most blocks have inner and/or outer margins. You'll find these in the left panel when you select a block. Adjusting these margins lets you add some space between content elements!
Margins should be adjusted before grouping blocks for responsive display. You can always ungroup blocks, adjust the margins, and then regroup them.
Inside a text block
Once on the page, select the text block and drag it onto the canvas.
3. Add content
You can now add elements directly inside this block.
4. Adding an image
In the same block, click the image option in the editing toolbar.
Then click Upload > Choose a file > Send to server.
You'll be automatically taken to the image properties, where you can adjust its height and width. Click OK to save.
In this case, we don't recommend using the Image option in the left-hand menu, as images added from there will be centered in responsive view but not resized.
Viewing the page in desktop view
Viewing the page in mobile view
For Smart pages
Good news: you don't need to do anything for pages that use Smart pages (Blog pages, Photo Galleries, Calendar, Polls, and Directory pages)!
Their content is responsive by default and cannot be changed.
Quick and easy responsive checks
You've grouped your blocks, but you're not done yet. Now you need to check that everything displays correctly on a small screen. Good news — you can do this right from your computer, no phone required!
Follow these steps:
1. Save your changes
If you don't save, your blocks won't appear grouped. Don't skip this step!
2. Preview the page
There are several ways to do this. In general, you can preview the page by going to: Website > Menus and pages > "..." next to the page in question > View page preview:
3. Shrink the preview window (on your computer)
You can resize the browser window on your computer to simulate a mobile display. What matters most is reducing the width — the height doesn't matter.
To resize your page, see the screenshot below:
4. Refresh the preview after each change
This is an easy step to forget, especially when you're making multiple changes in one session. Always refresh the preview page!
Saving in edit mode isn't enough, especially if you already have the preview open in another tab.
There are several ways to refresh a page:
- Press F5;
- Click the refresh arrow next to your site's URL 🔄
You can of course also check the display directly on your phone. Just always remember to refresh the page.
Learn more:
Comments
0 comments
Article is closed for comments.