BOWWE University

Websites responsiveness. How to create a website adaptable to all mobile devices?

What are responsive websites? In short, these are mobile pages - they adapt to the screen resolution on which they are displayed regardless of their dimensions. To illustrate this, let's take an example: responsive pages are displayed correctly on both a few-inch smartphone and a monitor with 4K resolution.

Having a responsive website has become extremely important now when most web traffic comes from mobile devices (smartphones, tablets) of all sizes. It is so important that even Google positions responsive websites higher!

BOWWE allows you to quickly adapt your website to any device. In this tutorial, you will learn how to do it easily.

How to adapt the website to mobile devices?

After starting the BOWWE Builder, you will default see the appearance of your website in the desktop version. When you are done building the website in the desktop version, click on the screen icon in the sidebar to the left of the SAVE button.

You will develop a device selection panel where you can edit your website. Now select Tablet Horizontal.

The layout of the Creator has changed and now you can see how your page would be displayed on the tablet in landscape position.

What to do when the desktop webiste looks different than on mobile devices?

This is perfectly normal and you have nothing to worry about. The values you've given to all the widgets on the desktop version of the website will probably not display as well on mobile devices!

Adapting your website to mobile devices:

1

When you choose to view the Tablet Horizontal, be sure to give them new values to make everything look the way you planned. Edit widgets in precisely the same way you edited them in desktop view.

2

When you change the Tablet Horizontal view, go to Tablet Vertical and recheck the page display. Make the necessary changes.

3

Only at the end, go to the Phone view and repeat the whole process once again.

4

At the end, click SAVE and PUBLISH.

The fastest way to create a responsive website
The principle of style inheritance.

Building responsive websites in BOWWE is based on the principle of style inheritance.

How does the principle of style inheritance work?

The style inheritance rule says:

Any changes and styles you make to widgets in one of the devices' view will be transferred to all devices lower in the inheritance hierarchy.

Here's what the style inheritance hierarchy looks like:

Desktop
Tablet Horizontal
Tablet Vertical
Phone

In practice, this means that:

All styles given to widgets in the Computer view will be transferred to the versions: Tablet Horizontal, Tablet Vertical, Phone.

All styles given to widgets in the Tablet Horizontal view will be transferred to the Tablet Vertical, Phone versions.

Any styles given to widgets in the Tablet Vertical view will be transferred to the Phone versions.

Any styles given to widgets in the Phone view will not be transferred to any other versions because the Phone is at the bottom of the hierarchy.

For this reason, building websites in BOWWE should always start with the desktop version and then easily model it on the versions of individual mobile devices. It's effortless because the vast majority of widgets automatically adapt to a changed device. Usually, only a small number of them will require editing. This way, you can create a website that is suitable for all devices in the fastest way!

REMEMBER!

If you started building the website from the smartphone version, each of your changes would affect the already created mobile version after switching to the desktop version. Eventually, you would have to do the same job again.

Congratulations!

You already know how to create responsive websites in BOWWE!

Dedicated to you

Didn't find the answer?

No matter what your problem is. We are here to help you find a solution.

LET'S TALK

BOWWE University

Websites responsiveness. How to create a website adaptable to all mobile devices?

How to adapt the website to mobile devices?