How to Optimize a Website for Viewing on Mobile Devices
Set up the view of the page on various devices in the Viewable Area
Viewable Area 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.
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.
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.
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.
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.
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.
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.
As we see, the cover 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 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
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
