Web 3.0: Component driven responsive design

Responsive web design is now a mature method to create layouts for desktop and smaller width screens.  We rely on media queries that detect the screen width to adjust the layout and widths of our pages and their components.

The issues we face with responsive web design is that we can’t always easily move a section of a page onto a new page without work to recreate its responsive behaviour within the context of the new page container. This is where a new method called responsive component design helps to address this specific problem.   

Responsive components are self contained parts of a page that are completely portable. You can move them to new pages of your site and they will adjust their layout and size based on the neighbouring components on the page.  Responsive design, by contrast adjusts the widths of components based solely on the page width. 

As of Q4 2021 responsive components are currently rendered using JavaScript.  I expect based on the technical community focus on this area, we will start to see native browser support for responsive components over the next few years. Much in the same way that responsive web design now has native browser css support using flex grid and flexbox, removing the need to use JavaScript for responsive layouts.

A challenge we face for native browser support for responsive components is the way that pages are rendered in the browser using a single pass. This has been a long standing approach to rendering pages.  We would need multiple passes at rendering content is we are to have elegant responsive component support using pure css only without JavaScript. Multiple pass for example could be triggered by rotating your device from landscape to portrait and the responsive components would adapt to the new width and their neighbouring components elegantly. If a component updates then the browser should only repaint that component and not the whole page.

There are a range of new screen types coming to market such as foldable screens and wearables.

Another development is that we will start to see better support for user preferences set in their operating system and in their browsers. According to the w3.org spec it will become common to completely customise the webpages based on user preference for the following preferences:

Prefers-reduced-motion

Prefers-reduced-transparency

Prefers-contrast

Prefers-color-scheme

Forced-colours

Prefers-reduced-data

 

Component driven responsive design is the method that we can use for design and development of pages that respond to a users screen size, platform, orientation, user preferences, and user experience.


Una Kravets @ Google Chrome Developers explains all the concepts above brilliantly with examples in the video below, 




Comments

Popular posts from this blog

Rant: Don't name your mobile app with a pronoun prefix

Why you should use rem instead of px in webdesign