Responsive Design Fundamentals
Getting Started
As web development evolves, so does the way we build and design websites. With the constant rise of smartphones and other mobile devices, it's become increasingly valuable to ensure that websites look good and function properly on different screen sizes.
That's where responsive design comes in. Unlike other concepts, it's not just a buzzword that the industry likes to throw around. It's an aspect that every developer needs to get accustomed to, and starting early with it, can help you achieve mastery down the line, and contribute tremendously to future projects.
By using flexible layouts, media queries, and other techniques, responsive design ensures that websites are usable on any device, from desktop computers to smartphones.
Understanding the Basics of Responsive Design
Responsive design is all about creating flexible layouts that adapt to the size of the viewport. Simply put, the viewport is the visible area of the screen on which the website is displayed. We can achieve this through a combination of techniques, including media queries, flexible grids, and responsive images, to name a few.
Media Queries: Adapting to Different Screen Sizes
Media queries are a CSS technique that allows us to apply different styles based on the size of the viewport. We can specify a style that only applies to certain screen sizes, ensuring that the website will behave properly on multiple devices.
Logically, we should first familiarize ourselves with the syntax and see how we can apply it. Let's observe a simple syntax example of a media query in action where we reduce the font size on smaller screens.
@media (max-width: 640px) {
body {
font-size: 16px;
}
}
First, the media query checks the width of the viewport. If the viewport is less than or equal to 640 pixels, the styles inside the media query will be applied. Also, the font size of the body element will be set to 16 pixels.
We might face a challenge by trying to cover every screen possible. Typically, to avoid that, we use media queries to create breakpoints at common screen sizes.
/* Default styles for all screens */
body {
/* Add your default styles here */
}
/* Styles for mobile devices */
@media (max-width: 480px) {
body {
/* Add styles specific to mobile devices here */
}
}
/* Styles for iPads and tablets */
@media (min-width: 481px) and (max-width: 768px) {
body {
/* Add styles specific to iPads and tablets here */
}
}
/* Styles for small screens and laptops */
@media (min-width: 769px) and (max-width: 1024px) {
body {
/* Add styles specific to small screens and laptops here */
}
}
/* Styles for desktops and large screens */
@media (min-width: 1025px) and (max-width: 1200px) {
body {
/* Add styles specific to desktops and large screens here */
}
}
/* Styles for extra large screens, such as TV */
@media (min-width: 1201px) {
body {
/* Add styles specific to extra large screens, such as TV, here */
}
}
As you may have noticed, we implemented different ranges for each screen size. We have the default query set first, and subsequent ones that can contain varying styles like spacing, fonts, colors, and more, applying only to the specified ranges. With this approach our website we'll be apt to use it on almost all screens, from small mobile devices to large TV screens.
Note that when we use media queries we should adhere to a "mobile first" approach. This means that the styles for smaller screens are defined first, and then we tackle larger screens next.
CSS Grids for Responsive Design
CSS Grid is a two-dimensional layout system that allows us to create complex grid-based designs. By defining the number of columns and rows in your grid, as well as the size of each cell, we can use this approach to control the placement of elements on the page and ensure that our layout adjusts properly.
Grid templates are one of the approaches we can utilize. To get started, we need to set the display property of the container element to grid in our CSS document. Then, we can define the number of columns and rows in the grid using the grid-template-columns and grid-template-rows properties. Also, we can specify the size of each cell using fr units, which stands for "fraction of the available space."
Let's illustrate a basic example by creating a three-column layout.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 10px;
}
.item {
background-color: lightgray;
padding: 20px;
text-align: center;
}
The setup that we used will output the items arranged in a three-column grid, with each column taking up an equal fraction of the available space. Moreover, the grid-gap property adds some space between the columns and rows.
Interestingly enough, we can leverage the repeat function to specify the number of columns that we need. So, this means we can create grids with a fixed number of columns, but we can also use other values to create more complex grid structures.
Check out our in-depth guide with an alternative approach using CSS Flexbox.
Using Frameworks
As always, we can also turn to some framework options. These frameworks provide convenient solutions such as pre-built components and styles that can ease our overall process, and often include built-in grid systems, as well as other responsive features. Some go-to choices include Bootstrap, Foundation, and Bulma.
But sometimes convenience comes at a cost. One issue is that they might add extra bloat to our website, making it slower and less efficient. Another potential problem is that they might limit our customization options in terms of design choices while working within the constraints of the framework.
Finally, using frameworks also means that we have to rely on a third party for updates and maintenance. If the framework isn't maintained, or if it becomes deprecated, we may encounter functionality issues or security vulnerabilities.
Responsive Images
We should consider another vital aspect. By using the srcset attribute, we can specify different versions of an image for different screen sizes. The main benefit of this is eliminating the need to load bigger resolutions if there's no need for it.
<img src="small.jpg"
srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
sizes="(max-width: 1024px) 1024px,
(max-width: 640px) 640px,
320px"
alt="A beautiful sunset">
The browser will choose the best image to display based on the size of the viewport. So, if the viewport is 320 pixels wide, it will display the "small.jpg" image, or if it's 1024 pixels wide, it will go with the "large.jpg" image.
Find out more about image formats in our Guide to Graphics in Web Development
Final Thoughts
With these techniques, you'll have a solid foundation to start experimenting with responsiveness.
However, our field is constantly evolving, and there's always novelty on the horizon. Make sure to stay up-to-date, and don't shy away from seeking help if you get stuck. We encourage you to poke around Web Developer's community, and post questions about your concerns.
And remember, the key to success is having a good understanding of the core principles and a willingness to refine and iterate.