You’re Doing Responsive Design Wrong

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. coined the term and defined it to mean fluid/flexible images/media queries in a May 2010 article in A List Apart. Ethan Marcotte responsive web design 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 , I will tackle the first two. basic responsive design principles 1. allow contents to easily adapt to the current viewport width used to browse the website. Uses % rather than px for all layout-related lengths. Fluid Grids and Layouts: 2. images behave differently than text content, and so we need to ensure that they also adapt nicely to the current viewport. Flexible/Responsive Images: 3. the ability to change styles on certain viewport widths(breakpoints), allowing us to create a different version of our website for different widths. Media Queries: 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. 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. Resolution switching: Screenshot from Jonas Schmedtmann Advanced CSS and SASS course In the example below, we use the to tell the browser the width of the image and it automatically decides which image to download width descriptor img srcset ”img/design-1.jpg 300w img design-1-large.jpg 1000w alt ”design” But 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. width descriptor 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. : 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. Density switching 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 to tell the browser the density of the image and it automatically decides which image to download. density descriptor img srcset ”img/logo-1x.png 1x img logo-2x.png 2x alt ”logo” 3. 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. Art Direction: Screenshot from Jonas Schmedtmann Advanced CSS and SASS course In this example, we see if the conditions of images inside the are not met, the device will be forced to use the image inside the 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 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. rem If you want to dive deeper into these concepts, you should take a look at the , I give all the credits to him. Advanced CSS and SASS… course by Jonas Schmedtmann