In this tutorial, you will learn about the fundamentals of creating a responsive website design.
Fluid Grids and Layouts
To create a fluid grid we will need to use relative units rather than absolutes. This means you will be working with percentages, em, and rems, rather than pixels for all layout-related lengths.
In modern fluid grid design, there are three main techniques of creating a fluid grid:
- Float Layouts: Boxes placed side-by-side using floats. Grids build upon floats, like the popular Twitter Bootstraps Grid, used to be the defacto approach to create responsive grids for a long while. With the advent of flexbox and CSS grids, this approach will likely fall out of favor by designers, towards more modern approaches.
- Flexbox: Boxes are placed in a one-dimensional row. The difference in a flex-box grid is that the container can alter the child elements width/height to best fill the available space. When the viewport size is changed, a flex container will expand or shrink the child items to prevent overflow.
- CSS Grid: CSS grids provide a full 2D grid.
Flexible and Responsive Image
Images will not scale automatically when the viewport changes. When you create a responsive design you will need to ensure that images adapt nicely. One method of making an image flexible is to specify the dimension in percentages.
As image usually take up the most amount of page weight so you will want to consider image optimization based on viewport size.
Media queries allow the styles to be changed based on breakpoints. Each breakpoint you define in your CSS will usually be related to a device. A basic common breakpoint guide is mobile is anything less than 640px, a tablet is between 641px to 1007px and a desktop would be anything over 1008px
In a mobile-first approach, you might write a call to action component that displays full-width on mobile, e.g. width: 100%. You could then write a media query to change the width of the div to 50% if the viewport ever exceeds 641px.