Layout types in web design
How to implement adaptive layouts for an optimal experience
This is a basic primer for new designers, aspiring front-end developers, or new no-code users on layouts and flex-box. Whether you use design software, code, or no-code platforms, layouts are the foundation of your design experiences. Let’s get to some of the fundamentals.
Types of layouts
Fixed layouts
A fixed or static layout is built at one specific size. It has a defined pixel value, and is a less common way to design nowadays due to negative impacts on seo and user experience.
Fluid responsive
Fluid-responsive interfaces scale grow or shrink to fit a user’s device. They are sized based on a percentage value, so they resize proportionately.
Adaptive layouts
Adaptive layouts can use a blend of fixed and responsive layouts, that adjust at specific breakpoints (media queries). Overrides are defined at certain sizes to optimize interfaces for specific devices.
How to make this work for you
When developing a user interface it’s usually best to blend all three of these concepts together, based on what your design is trying to achieve. This lets you design for different considerations for mobile, tablet, and desktop experiences.
Implementing adaptive layouts
Media Queries
In CSS you have a default style, and you can override your default based on a specified breakpoint. With bootstrap we saw a preference for mobile-first design, where the default was designed for smaller screens, and overrides set at larger breakpoints. These are user defined, so you can also set defaults at larger screen sizes and adjust for smaller screens as necessary.
To specific a breakpoint in CSS, you create a media query and add CSS inside of it. Check out the example below for a breakpoint set at 600px and up. Any code inside of the curly brackets, where it says to “ENTER CODE HERE” will be specified for screens larger than 600px, unless otherwise overridden at the next breakpoint.
@media only screen and (min-width: 600px) {ENTER CODE HERE}
Flex-box
CSS flex-box is a flexible box model that unlocks even more functionality. Flex-box has specific properties set at the container and element level, that lets items dynamically update, based on their parent container.
Almost every design and no-code platform uses flex-box for responsive design, if you now how to use auto-layout in Figma, you have a working knowledge of flex-box.
Understanding css flex-box concepts
Flex containers
Think of a flex-container as the frame/div/container that elements are inside of. You can define this at the page-level, or for a container nested inside of another layout type.
Flex-direction
There are four directions that items in a flex-box container can be ordered.
Row containers have child elements ordered from left-to-right. Row-reverse is the opposite, right-to-left (otherwise known as rtl).
Column containers are ordered from top-to-bottom, and column reverse layouts are ordered from bottom-to-top.
Flex-wrap
Flex-wrap is a property that lets child items wrap to multiple rows within a container. By default, flex-box items scale to fit on a single line.
Align items
Flex-containers can be aligned in a few different ways, the most basic are at their beginning (flex-start), in the middle (center), at the end (flex-end).
Other options include: items touching the edges of a container with even spacing between each (space-between), half spacing before the first item and after the last item, with even spacing between all other elements (space-around), or even spacing between the container and all elements (space-evenly).
Gap spacing
Between each element in a flex-start, center, or flex-end container, a user can define gap spacing. This is a set amount of spacing between every element, so you don’t have to set margins on individual elements inside of a container.
Elements inside flex containers
You can think of elements in flex containers as individual items, or flex-containers nested within a parent flex-container. These can be referred to as child elements, children, nested items, etc.
Order
Think of order as a number value that defines where things are shown in a flex container.
By default this is set by where the child element is in the layout. Adding order (a number from 0 up in css) is the first way order is determined, then the child elements placement in a row.
This means if the third item in a container has an order of 0, and everything else has an order of 1, the third item would be shown first (within the defined flex-direction).
Flex-grow/Flex-shrink
Elements in a flex container can grow to fill their parent container. Setting a flex-grow number is the proportion at which the element grows to fit their parent container. Unlike order, flex-grow cannot be set to 0, this value has to be 1 or more.
Align-self
Items inside of a flex container can have their alignment individually overridden using the align-items settings mentioned above (flex-start, center, flex-end, stretch)
Making this work for you
I hope this article is helpful to understand different layout types, properties available to designers and developers, and a bit more detail on CSS flex-box. This is a high-level explanation of key concepts that can be blended together to build responsive design experiences. Please feel free to comment with any questions if there are any details I can provide, or if any of the concepts I covered here are unclear.
