What is responsive web design? CSS
Responsive web design is the concept of designing website user interfaces that adapt to fit different screen sizes like mobile phones, tablets, laptops and desktop computers. Responsive web design aims to ensure that a website is usable and looks good on any screen size.
Responsive meta tag
The first requirement for a responsive website design is to stop mobile browsers from automatically shrinking your desktop layout to mobile screen sizes resulting in tiny unreadable text. You do this by placing the following meta tag in the head of your HTML file. This sets the device's virtual viewport width to be the same as the device width and sets the zoom to none.
<!-- shrink-to-fit=no was previously required because of iOS 9 but is apparently no longer required, here it is for completeness -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
CSS media queries
Responsive web design can be implemented with CSS @media queries to check the width of the user's window/viewport and apply different styles depending on the user's window/viewport width. Your CSS rules that apply depending on the window width go inside your @media queries. These styles only get used if the condition of the query is met. If the condition is not met, they are ignored. Responsive web design typically involves writing multiple @media queries to check if the window/viewport width is greater or less than several different values. Mobile first web design uses min-width media queries and avoids max-width media queries.
The different window/viewport width values you check against are referred to as "breakpoints". You can have any number of breakpoints and you can have breakpoints at any width. At first you might think of having a breakpoint for each device's actual screen width, however it is better to decide your breakpoints based on your own website user interface and content. For example, if you resize your browser window and notice your navigation links wrapping at a certain screen width, you could set a breakpoint just before that width to adjust the CSS before that happens. By choosing breakpoints based on your content you ensure that your user interface will behave as expected on any screen size.
Responsive images
To make your images responsive to various window/viewport widths, you can simply set a max-width of 100% in the CSS for your images. This means they will never be wider than their parent element. You may therefore also need to set a max-width of 100% on the parent element.
max-width: 100%;
}
Flex
CSS flexbox offers a way to easily align items and wrap them when needed. You can set flex-wrap: wrap; to have your elements automatically wrap for smaller windows/viewports. You can also easily change the flex-direction between row and column within your media queries. For example you may set the flex-direction of an element to column on mobile devices and row for larger devices.
.class {
display: flex;
flex-direction: column;
}
/* styles for slightly larger devices */
@media (min-width: 600px) {
.class {
flex-direction: row;
}
}
Why use responsive web design?
More than half of all Google searches are now made on mobile devices. This means that it's more important than ever to have a responsive website design to ensure that your site is mobile friendly and accessible. The ratio of desktop to mobile users varies depending on your sector but in general, mobile usage is growing. Google also checks if your site is mobile-friendly and Google is more likely to show sites in search results that are responsive, so by optimising your site for mobile, you're also improving your SEO.
Thanks for reading.
Ryan
Published on 12 Jul 2022