responsive, adaptive and fluid design

• responsive: you create one flexible layout,

• adaptive is making dedicated layouts for specific screen sizes. a lot more work

• fluid: is a subset of responsive design where you prepare for 6 common screen sizes and users will get layout based on breakpoints. More advanced fluid design implementations use CSS functions (like clamp and min) to automatically calculate things like font sizes and padding relative to screen size.

webflow implements fluid design.

Some base knowledge: use rem instead of pixels for size and spacing values
(rem = root element font size which is usually 16px by default.)

relative paddings
https://www.youtube.com/watch?v=2IV08sP9m3U
instead of setting breakpoints and manually changing the value for each breakpoint you could use min(). it returns the smallest value

.container{
padding: min (5em, 8%);

in this example it will prob start using 8% when you get to around mobile screen sizes.

responsive font sizes
none of the css units used for font-sizes are responsive on their own.
font-size: 10vw
you can try using vw but you have to keep in mind on screens the text can get way too big and on small screens they get way too small. we need to set a min and a max size.
we use the clamp function where you pass it a (min, preffered, max) values.
font-size: clamp (1.8rem, 10vw, 5rem);
one more problem for this is that this way the font size doesn't scale when zooming in and out.

font-size: clamp(1.8rem, calc(7vw + 1rem), 5rem);
this way the font will also scale with zooming, will require some trial and error.

Example implementation in webflow: https://www.youtube.com/watch?v=D5ropQnqYt0
The Lumos webflow framework implements fluid fonts that are also accessible, meaning they work well when users zoom or change the font size of their browser.

responsive images
for SEO reasons it is recommended that images have a set height and widht. to prevent Cumulative Layout Shifht (CLS).

max-widht: 100%;
height: auto; /*image resizes on smaller devices*/
aspect-ratio: 1 /1;
object-fit: contain;

inert attribute
common solutions for showing a hidden hamburguer menu (like for nav) is

• display: none -> display: block doesn't allow transitions (animations)
• positioning absolute out of view and transition the menu in. or use a fade in transition

the problem with this is that the hidden menu is still in the accessibility tree and the elements are tabbable. The solution for this is using the HTML inert attribute