Cascading styles for responsive devices
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
- Desktop >1200px
- Tablet Horizontal 1199px - 992px
- Tablet Vertical 991px - 768px
- Phone >768px
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.
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.
Custom breakpoints
There can be scenarios where your page looks great on the full HD desktop but the elements don’t fit on a 15’’ laptop. It’s a space between the desktop and the tablet resolution, where your page can vary drastically. Luckily you can account for those additional resolutions by adding custom breakpoints. They will function exactly the same as standard breakpoints in the way that styling elements in this resolution will overwrite the styling on higher resolutions and will assure your website is tailored to every device you can think of.
You can find the full list of breakpoints at the top of the creator, on the left of the standard breakpoint panel. There you will find a button to add a new breakpoint. Write down the width of the screen you are interested in styling and confirm it. Now you can choose this resolution from the full list and you can simply just apply changes to elements like before.
Benefits of responsive styling
Responsive design ensures that users on different devices can access the same content and functionality, regardless of screen size or resolution.
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.
Improved user experience
By providing a layout that works properly on different devices, responsive design improves website usability and enhances user experience.
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.
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.
