Help Center

How To Optimize a Website for Mobile Devices

Set up the view of the page on various devices in the Viewable Area

Tilda-made website layouts are automatically adjusted for tablets, smartphones, netbooks, laptops, and desktop computers.

You can additionally modify the paddings' sizes for mobile, adjust the block visibility for various devices, design your own responsive layout using Tilda's Zero Block editor, or switch off website adaptive mode for mobile.

Ссылки:

Adjusting Block Visibility
How to design different versions for a block on mobile and desktop
Read more

Adjusting The Paddings For Mobile
How to change the paddings' sizes for mobile versions
Read more

Your Own Responsive Website Version
How to design your own mobile version by using Zero Block editor
Read more

Switching Off Website Adaptive Mode
How to switch off the website adaptive version for various screen resolutions
Read more

Block Visibility On Various Devices

Viewable Area/Block Visibility is a setting that determines which blocks can or cannot be shown on certain types of devices. You can adjust this parameter in the Settings panel of any block.

Why you may need it and how it works

If a block looks good on desktop but not as good on mobile, you may want to set the block visibility to 980px or more. This way, the block will become desktop-oriented and will not appear on mobile devices. (русская версия отличается - If a specific block (such as a hero section) looks good)

After that, copy the block and optimize it for viewing on mobile by adjusting its settings (which may involve changing the image, font, etc.). Set the block visibility to "0-980px." As a result, you will get a mobile version of the block. font size???

In the end, those who access your website from a PC will see the desktop version and mobile users the mobile version.

Block visibility is a parameter that you can find in the Settings panel of any block and adjust to make the block appear or not appear on devices with a particular screen resolution. For instance, some blocks do not look good on tablets and others on mobile phones. (русская версия отличается - есть уточнение, что это именно range, that is, different values for parameters - и дублируется)

You don't need to change block visibility for all blocks. You can do it just for the blocks with a photo cropped wrong or if the block you've selected is not suitable for the mobile version.

Example

We have a cover that looks great on desktop, the text aligned to the left and the main object to the right. Now, let's adjust it so that it looks good on mobile devices, too. (русская версия отличается)

Check what the mobile website version looks like. As we see, the cover/photo gets cropped on mobile and does not look very good. (русская версия отличается)

To keep it from appearing on mobile devices, go to the Settings panel of the cover block and set the block visibility to "> 980px." Now, mobile users will not see it anymore.

Copy the block.

Adjust the block for the mobile version—change the alignment of the photo and text. (неясная русская фраза)

Now that we have set the block's visibility to "≤ 980px," it will not appear on devices with screens wider than 980px.

Done! Now the cover/hero section is displayed differently depending on the screen width.

Examples of screen width for various devices:

iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px

(отличается порядок версий)

Adjusting The Paddings For Mobile

In any block, open the Settings tab, click the icon near the "Top padding" and "Bottom padding" options, and specify the paddings for a mobile device.

Adjusting Responsive Design in Zero Block

You can adjust the block so that it is responsive for various devices by converting it to Zero Block with an option in the Settings tab of the block. This option is available in most blocks now/at the moment (уточняется, что это сейчас пока что в доступе или что уже есть???)

Once you've converted the block, you can manually adjust what it looks like for five screen types depending on the width range. Read more on how to adjust responsive design in Zero Block in the "Zero Block: How to Create a Custom Block" and "Zero Block: Responsive Design" articles.

Switching Off Website Adaptive Mode

If you switch off the adaptive mode, the page will be displayed on mobile just like on a desktop computer. To do this, you need to select the checkbox "Disable mobile view" in the Page Settings → Additional, and republish the page.

The website version adapted for mobile devices is on the left, and the website with adaptive mode turned off is on the right.