Responsive design is not just about the web that automatically adjusts to different screen resolutions and resizeable images, but designs that are crucial for web performance.
In my short journey of working with HTML and CSS, interactions with other developers, I found out that these two words — flexibility and responsiveness have often been used interchangeably to illustrate the core of responsive web design.
Ethan Marcotte coined the term responsive web design and defined it to mean fluid/flexible images/media queries in a May 2010 article in A List Apart.
There are lots of great articles out there about responsive design, what it is, key concepts, principles, and great philosophies surrounding it. In this article, we will not spend time on those but rather look at great techniques that allow us to implement responsive web design more efficiently.
Below are the basic responsive design principles, I will tackle the first two.
1. Fluid Grids and Layouts: allow contents to easily adapt to the current viewport width used to browse the website. Uses % rather than px for all layout-related lengths.
2. Flexible/Responsive Images: images behave differently than text content, and so we need to ensure that they also adapt nicely to the current viewport.
3. Media Queries: the ability to change styles on certain viewport widths(breakpoints), allowing us to create a different version of our website for different widths.
Fluid Grids and Layouts:
How and Why You Should Use ‘rem’ Units in Your Projects.
I was so amazed when I realized I can simply change the width, height, padding, margin, and literary any element you could apply pixel unit to with just one adjustment on my media query at the same time instead of writing hundreds on lines of codes in media queries. It’s amazing, yea right!
Now let’s see how this awesome technique works. First understanding how the rem unit works is the key to mastering this simple yet powerful technique.
The rem unit is always in relation to the root font size, so if we set the root font size, other measurements can easily be changed on our page.
html {
font-size: 10px;
}Now, note the default browser font-size is 16px but we are setting ours to 10px for easy calculations. So 10px equals 1rem, 45px will be 4.5rem. All we have to do is simply divide all the pixels by 10 and that’s our rem.
The only problem is by setting our root font-size to 10px we override the browser font size setting. Some users with bad sight do manually change their browser font size settings to have a bigger font size.
Setting the 10px font-size on our root removes the ability for these people to see our website properly because they can no longer change the default font size.
It will remain 10 pixels no matter the user’s default font-size, this is a bad practice. That is why we’re going to set our font-size to a percentage, which will translate to a percentage of the font-size given by the browser.
We are counting on the fact that the default browser font-size is usually 16px, and that remains the absolute default.
So let’s do simple math, if we put 100% here, this would mean that the root font size is 16 pixels.
All we have to do is to divide what we want which is 10, by 16. 10/16 * 100 = 62.5%.
Then that will translate to 10pixels which is what we want.
html {
font-size: 62.5%;
}This technique is widely used in the CSS developer community because it’s so simple and yet so powerful.
Flexible/Responsive Images
The main philosophy behind responsive images is to serving the right image to the right screen size and device using different techniques in HTML or CSS so users do not have to download images that are way too large for their devices.
It’s okay to have flexible images that scale nicely with the viewport width, but responsive images take things to a whole new level and that’s because responsive images are not just an aspect of responsive design but even more importantly of web performance.
As developers, we really have a responsibility here and responsive images help us solve these problems.
While it may be okay to send a 1mb image for the hero section to a desktop computer, it is not okay to do that to a phone, which may have a slow or expensive data plan somewhere in the world like where I am, Nigeria.
So instead of sending 1mb to whatever device is consuming the page, it makes more sense to send the 1mb image to a device with a large screen that needs the image and a much smaller version of the image to a device with a small screen that doesn’t need such a large image anyway. Not many developers out there know and take this even seriously.
There are mainly three use cases where it makes sense.
Resolution switching: Here all we do is to serve up the same image for a smaller screen but with a smaller resolution. So basically, the same image but a smaller version for a device that doesn’t need such a big image.
Screenshot from Jonas Schmedtmann Advanced CSS and SASS course
In the example below, we use the width descriptor to tell the browser the width of the image and it automatically decides which image to download
<img srcset=”img/design-1.jpg 300w, img/design-1-large.jpg 1000w” alt=”design” >But width descriptor is not enough to decide which images to choose, so we add sizes attribute. Sizes are used to inform the browser about the approximate width of the image at different viewport width.
<img srcset=”img/design-1.jpg 300w, img/design-1-large.jpg 1000w” alt=”design” sizes=”(max-width:900px) 20vw”, (max-width:600px) 30vw, 300px” >It’s a good practice to have a fallback, just in case the browser does not understand ‘srcset’.
<img srcset="img/design-1.jpg 300w, img/design-1-large.jpg 1000w" alt="design" sizes="(max-width:900px) 20vw, (max-width:600px) 30vw, 300px" >
<img src="img/design-1-large.jpg" alt="design">2. Density switching: This is a special case of resolution switching but where the screen size does not matter but a screen pixel density does instead. Pixel density is the number of pixels found in an inch or a centimeter. Now, what matters to us is what there are low-resolution screens and high-resolution screens.
Screenshot from Jonas Schmedtmann Advanced CSS and SASS course
Low-resolution screens are just typical PC screens, if we say an image is 100 pixels high, they will actually use 100 physical pixels on the screen to display these 100 pixels that we specified.
High-resolution screens are the ones found in all modern smartphones and even some computers already have them, like the MacBook with retina displays. These are high-resolution screens and can be called 2x screens because they use two physical pixels to display one pixel of our design. This implies that if we want our image to look sharp on high-resolution displays we should use 2x the image size we are serving the low-resolution displays.
In the example below, we use the density descriptor to tell the browser the density of the image and it automatically decides which image to download.
<img srcset=”img/logo-1x.png 1x, img/logo-2x.png 2x” alt=”logo” >3. Art Direction: This happens when you don’t just want to serve the same image but in a smaller resolution, but a whole different image for different screen sizes.
Screenshot from Jonas Schmedtmann Advanced CSS and SASS course
In this example, we see if the conditions of images inside the <source> are not met, the device will be forced to use the image inside the <img> tag.
<picture>
<source srcset=”img/logo-small-1x.png 1px, img/logo-small-2x.png 2x” media=”(max-width: 600px)”>
<img srcset=”img/logo-1x.png 1x, img/logo-2x.png 2x” alt=”logo” >
</picture>In conclusion, resolution and density switching is when you want to serve the same image but with different resolutions. And art directions is when you want to serve a completely different image.
Using rem units in my daily web design projects has helped reduce the lines of codes I write in media queries and has given me so much control in my responsive design experience.
If you want to dive deeper into these concepts, you should take a look at the Advanced CSS and SASS… course by Jonas Schmedtmann, I give all the credits to him.