How to create responsive websites adaptable to mobile devices?
BOWWE tutorials
Welcome to our collection of online lessons. We’ve created these to help you learn the best practices and get the most out of BOWWE. Come back here whenever you want!

Responsive web design. How to make a mobile version of your website?

What are responsive websites? In short, they are pages that adapt to the screen resolution regardless of the screen size. 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 with user-friendly interfaces for mobile devices.

 

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

Responsive design - principles of style inheritance

Responsive styling in CSS refers to the practice of creating styles that look good on different types of devices and screen sizes. With the growing number of devices and screen sizes, it has become important for web developers to create sites that look and work well on multiple devices.

 

To create responsive websites, you can use a variety of techniques - in this tutorial you'll learn the basics of inheritance.

Inheritance

Inheritance is the mechanism by which the properties of a styled element are passed on to its descendants. This allows you to set styles on a parent element and propagate those styles to its children. This saves the need to repeatedly set the same attributes on each element individually. The styles are applied in order of precedence, which you can check using the widget tree (which shows all the elements used on the page and their hierarchy) or the bar at the bottom of the page (which shows the element selected in the wizard and its ancestors).

If a child element does not have its own styles, it inherits the styles of its parents. The style imposed on the element lying lower in the hierarchy (child) will have a higher priority than the formatting given to its ancestor (parent).

Example:

 

A green font color has been set for this area. Inside it is a paragraph, on which no additional style has been applied, so it also has a green color - this property was inherited from its ancestor (the Area widget).

 

Inside the paragraph there is text with a given attribute of bold and background color, these are properties that have been assigned to this element and not received from the parent, so these properties take precedence over others. 

If there is a "collision" of properties (i.e. on the child and on the parent, the same property is applied, but with a different value - such as color), the property that was set on the child element takes precedence over the same property given on the parent element.

Example

A green font color has been set for this area. Inside it is a paragraph, on which no additional style has been applied, so it also has a green color - this property was inherited from its ancestor (the Area widget).

This paragraph has set blod text and background color to the child, but the font color is still that of it's parent. The additional styles of the child are simply added on top of the green font.

However inside this paragraph the font color is set to red and this child style is taking priority over it's parent

 

If there is a "collision" of properties (i.e. on the child and on the parent, the same property is applied, but with a different value - such as color), the property that was set on the child element takes precedence over the same property given on the parent element.

Changes and styles that you make to widgets in the view of one device will be transferred to all devices lower in the inheritance hierarchy.

 

Inheritance hierarchy:

  1. Monitor
  2. Tablet horizontal
  3. Tablet vertical
  4. Phone
In practice, this means, for example, that a style given to an element in monitor mode will overlap with corresponding elements in other modes, while a change made in the mobile version will not apply to the view of the page on a device higher up in the hierarchy.

Breakpoints

A site created according to RWD (Responsive Web Design) principles adapts to the resolution of the screen on which it is displayed. When styling your site in BOWWE, each device has dedicated breakpoints, where both the layout of the page and the appearance of graphic elements can change (they can disappear or adjust width and height). Breakpoints are related to screen resolution and allow you to adjust the style appropriately for the devices that Internet users use.

 

Breakpoints in BOWWE

  • <1200px Monitor 
  • 1199px - 992px Tablet horizontal
  • 991px - 768px Tablet vertical
  • >768px Phone

Remember about:

​​​​​​In a parent-child relationship, not all attributes are inherited between elements in the widget tree.
Here - you will find a full list describing the inheritance of attributes. We have included some of them below.

Inherited properties - passing from parent to child:

  • color
  • font-family
  • font-size
  • font-style
  • font-weight 
  • text-align

 

Non-inherited properties - not passed from parent to child:

  • background
  • border
  • margin
  • padding
  • width
  • height
  • position
  • display

How to adapt the website to mobile devices?

1
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.
2
You will develop a device selection panel where you can edit your website. Now select Tablet Horizontal.
3
The layout of the Creator has changed and now you can see how your page would be displayed on the tablet in landscape position.
The page on the computer 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 identically on mobile devices.
4
When you choose to view the Tablet page horizontally, 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.
5
After you’ve finished adjusting the Tablet Horizontal view, go to Tablet Vertical and recheck the page display. Make the necessary changes.
6
At the end, go to the Mobile view and repeat the process once again.
7
Click save to complete.

Congratulations!

Now you already know how to create responsive websites in BOWWE!