Responsive styling - Cascading Styles
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!

Cascading styles for responsive devices

The websites you make in BOWWE Builder are meant to be experienced by your target group regardless of their preferred approach to surfing World Wide Wave 😉

That means the website you provide should be displayable on a 4k high-end ultra-wide desktop as well as on a heavily scratched, 10-year-old smartphone. The size of the screen matters and in this tutorial, we’ll explain what to account for while creating your perfect website.

What are cascading styles?

Cascading styles are sets of rules that get applied for smaller devices, but not for bigger ones. They activate only once a certain window size breakpoint has been breached.

 

This allows you to basically tailor the design of your web page for smaller devices like tablets and smartphones. Those breakpoints can be seen and selected at the top of BOWWE Builder.

Once you select the breakpoint, the device will be emulated inside the BOWWE Builder and you may change the styles of your elements like the size of your fonts, or margins between elements to accommodate smaller canvas. The changes you make on a chosen device size will only carry over to the smaller devices and not go upwards (hence the cascading styles 😉).

 

Example: You set your text font size to 20px on a desktop. This without any changes will have the same size of 20px on desktops, tablets, and phones. Now if you were to select tablet horizontal and changed the size of the text font to 16px, then it would be applied to tablet horizontal and phones as well. However, this would not carry over to the desktop, since the desktop is higher in the cascading 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

  • Monitor  >1200px
  • Tablet horizontal 1199px - 992px
  • Tablet vertical 991px - 768px
  • Phone >768px
⚡ BOWWE Expert Tip:
We recommend starting with designing your page from the desktop level and going down with elements that you find necessary to update (not all elements need to be adjusted and not for every device size. Which styles and which devices require extra polish depends entirely on you and how the elements look on smaller screens). The exceptions are Micro Pages where the implemented “Mobile First” design flips the cascading hierarchy on its head and goes from Phone to Desktop.
❗ Important:

The cascading behavior only applies to CSS Styles and column settings, not to structure of the page. Dropping for example a picture on a phone will still include it on the desktop, since it is not a change in styles but adding an element.

⚠️Exception:

The only style that doesn’t behave cascading is the hide widget button. It only hides the widget on the resolution you have currently selected and will not hide this element nighter on lower resolutions, nor on higher. Those resolutions have to be handled individually on each resolution, but we also recommend hiding elements on a few resolutions and not on all, since invisible widgets that don’t appear on any resolution can be viewed negatively by Google algorithm.

Benefits of responsive styling

1
Increased accessibility

Responsive design ensures that users on different devices can access the same content and functionality, regardless of screen size or resolution.

2

Reduced time to create and expand a website

Responsive design eliminates the need to create and maintain separate versions of a website for different devices, which can reduce development time and costs.

3

Improved user experience

By providing a layout that works properly on different devices, responsive design improves website usability and enhances user experience.

4

Increased mobile traffic

With the increasing use of mobile devices to access the Internet, responsive design helps ensure that a website is accessible to a wider range of users, and can therefore increase traffic.

5

Improved SEO

Having a single version of your website can make it easier for search engines to index your content, improving your website's search engine optimization (SEO). In September 2020, Google made a monumental shift to mobile-first indexing for all websites. This wasn’t a gentle nudge but a clear signal that mobile-friendly websites are not just preferred; they’re prioritized.

Congratulations!

You already know how cascading styles work!