User interfaces are built on the latest in web technology and with this in mind, new APIs emerge with the promise of increasing the ability to solve old problems, including coverage for new user preferences, and all of this streamlining the work of who works with the frontend.
The actual scenario for Responsive Design
To better understand nothing fairer than understanding how things are currently done (from the developer's perspective). Well, it's 2022 and an ordinary Google search on "how to do responsive design" [ 3 ] has as main topics [ 1 ]:
Add responsive meta tags to your HTML document. Apply media queries to your layout. Make images and videos responsive, and finally, ensure your typography is easily readable on mobile devices.
Now, in Mozilla itself [ 2 ], which even you can consider as an extremely reliable source to delve into this and other subjects, we have that the term Responsive Design (Ethan Marcotte in 2010) describes the use of three combined techniques:
Fluid Grids (see Gillenwater for the original reference) — can be read in Fluid Grids (published 2009, A List Apart).
Fluid Images —allows an image to be scaled down to fit a flexible size column, preventing it from becoming distorted or pixelated if the column becomes wider than the image.
The media query (see Cameron Adams for more information) — allows different types of layouts to be available using only CSS
But we want an even more refined search for content published or edited in less than a year. So, you can find an article from web.dev (Google Developers, Una Kravets)[ 3 ] that gives a little introduction to what it means to use the term responsive design and gives us a careful look at how things are today.
Today, when using the term: “responsive design”, you are probably thinking of using media queries to change the layout when resizing a design from mobile size to tablet size to desktop size. But soon, this responsive design perception can be considered as outdated as using tables for page layout.
Building a new design perception
Well, so the responsive web is about the combined use of technologies that make modern use of CSS and HTML, creating elegant elements and useful designs for our end-user, regardless of the device being used.
But if the technology is stabilized and is considered modern, what are the novelties about? Well, the classic answer might come from the eternal cycle that exists to minimize the effort that technologies demand so that your skills continue to meet new devices and other needs.
In this manner, depending on your experience with software engineering, the term Design System may sound strange and may not be so present in your day-to-day. However, even though it is not the primary objective of his work, it ends up being important many times, even if subtly, in the decision-making of direct business interest.
So, take as an example Google's own Design System, better known as Material [ 4 ], which is the foundation for developing the best experience for users of Google's own products.
Material is a design system created by Google to help teams create high-quality digital experiences for Android, iOS, Flutter, and the web.
Well, at this point things should be a little better connected. We have on the one hand the practice of basing decisions and implementations on what current APIs (see Viewport [5] for more) offer us and on the other hand the continuous evolution of devices and the business decisions themselves.
Hence, the terms Component-based and Page-based arise, which are part of discussions for different development approaches. It came across that the APIs have limitations that, as put by Una Kravets herself, make it increasingly difficult to extract the best of what they propose to offer.
So, you can imagine that such issues technically affect the choice between development approaches (Component-based and Page-based), also affecting business performance in the end because it is in the general interest (or should be) that products continue to meet new requirements. devices and other technologies.
Conclusion
Since the term Responsive Design was coined by Ethan Marcotte in 2010, it has been possible to see numerous advances that in some ways were determined by the needs that users have as new devices are introduced into the routine.
Like many things in technology, today's APIs are modern, functional but lacking in much finesse. We are entering a world where micro and macro layouts are developed and current APIs do not have the (expected) ability to respond to the new needs required by components.
Links and tutorials
Visit https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design to learn about current responsive design techniques (Reference 2022)
web.dev — The new responsive: Web design in a component-driven world
References
[ 1 ] How to Make a Responsive Website in 3 Easy Steps (catswhocode.com) (may contain banners)
[ 2 ] Responsive design (developer.mozilla.org/)
[ 3 ] web.dev — The new responsive: Web design in a component-driven world
[ 4 ] Material — Design System da Google
[ 5 ] Viewport API — https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API#interfaces
[ 6 ] Cover image was taken from - 5 Reasons Web Components Are Perfect for Design Systems
Top comments (8)
So, let's redesign the architecture of the API we're using to fulfill the needs of modern software ridges.
I'm a newbie to all of this, can you explain how API is not able to catch up with evolving responsive design patterns? Also, which API?
Try also the full web.dev series web.dev/shows/designing-in-the-bro... - "Designing in the Browser - Designing in the Browser explores the intersection of design and front-end development, teaching you how to build beautiful UIs with modern web standards in mind."
Try also the full list of videos on YouTube youtube.com/playlist?list=PLNYkxOF... (hope this link work better for you than the single link for the unique episode)
Hello, there. Understand you and I am just writing a little about it and things related. But, much better than me talking and talking is Una Kravets in one of the series "Designing in the Browser"- https://www.youtube.com/watch?v=gCNMyYr7F6w&t=107s and also reading this article "content-visibility: the new CSS property that boosts your rendering performance" web.dev/content-visibility/ can also be more one option to help you to understanding it
Umm.. The video is unavailable.
Great article!
Thank you, so kind.
Thank you for including references as well. Great article!
You are welcome :)