One stylesheet, every screen
Have you seen websites that scale differently based on screen size? That’s accomplished through responsive web design. Below you’ll seen an example of a website that was created with responsiveness in mind.
Prior to the modern era of website design, developers would build multiple versions of the same site. The mobile version would usually be placed under a sub-domain such as m.dinocajic.com. The mobile version would contain code that’s separate from the website that’s viewed on a desktop computer. There are a couple of issues with this approach:
- You must maintain two separate code bases
- The number of screen resolutions has increased indefinitely. Creating a separate version for each screen size is impractical.
If the website was designed with responsiveness in mind, the website should work across any screen size. The developer will also maintain only one code base.
There’s rarely going to be a situation when a responsive website is not necessary. Responsive design should be in the front of your mind each time you start designing a website.
Media Queries
How can the developer use CSS to make responsive web applications? After all, it would be poor design to just set percentages for height and width and allow the content to shrink accordingly. Let’s try that approach. We’ll create two div elements that are displayed next to each other.
<div>
The text inside this container will shrink and
expand based on the user's screen resolution.
</div>
<div>
While this might work on some larger screen sizes,
it will not work properly on smaller screen sizes.
</div>
Before we start creating CSS code, it’s important the we add one additional tag to the HTML document. That is the viewport meta-tag. The viewport is the browser’s content area. The mobile browser will attempt to display the desktop version of the site when viewing the website on a mobile device without the viewport meta-tag. The mobile browser will scale everything to fit the screen. So, we’ll need to let the browser know that the website is responsive and optimized for mobile environments. Add the viewport meta-tag to the head section of your HTML document.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Chapter 2-38</title>
</head>
Now we can proceed to creating the CSS code. The div tags are styled to have a 10px padding, a light blue background color, a 5px margin, to occupy 45% of the screen real-estate, and to be displayed as inline blocks.
div {
width: 45%;
padding: 10px;
background-color: lightblue;
display: inline-block;
margin: 5px;
}
So far so good. The two containers look great. Let’s try reducing the screen resolution slightly. Once we get to a certain point, the containers will stack on top of each other.
This is expected behavior but there is a lot of extra space to the right of each element. How can we change the width of the container once it reaches a certain screen resolution? With media queries. Media queries allow for different styles depending on specific size break-points.
Media queries are added to the CSS document directly with the @media keyword. We’ll start by adding the @media keyword followed by the break-point. When the screen is 400px or less, display a red-ish background.
@media (max-width: 400px) {
body { background-color: salmon; }
}
As soon as the screen is larger than 400 pixels, the background color will go to the default browser color. If we wanted to provide the user with a different background color for each screen resolution, we could add additional media queries for each specific range.
@media (max-width: 400px) {
body { background-color: salmon; }
}
@media (min-width: 401px) and (max-width: 899px) {
body { background-color: lightblue; }
}
@media (min-width: 900px) {
body { background-color: cornflowerblue; }
}
The first media query changes the background color to a type of red for screen resolutions that are smaller than 400px. The second media query targets screen resolutions between 401px and 899px. The background color will appear light blue. Finally, for all other larger screen sizes, the background color changes to a darker blue color.
To load different stylesheets based on specific screen resolutions, you can directly add the media query to the link tag inside your header.
<link rel="stylesheet"
media="screen and (max-width: 400px)"
href="mobile.css">
<link rel="stylesheet"
media="screen and (min-width: 401px) and (max-width: 899px)"
href="tablet.css">
<link rel="stylesheet"
media="screen and (min-width: 900px)"
href=“desktop.css">
You’ll just have to create the three different stylesheets in order to get them to load. The @media keyword is not necessary inside the individual stylesheets.
Let’s revisit the example where we had two div elements on the single page. Without media queries, at certain screen sizes, the div tags would stack on top of each other without filling the entire screen.
Let’s apply a media query to change the width of the div at the breaking point. When the screen resolution is below 750px, the div will turn back into a block and will span the entire width of the screen. All other properties will remain inherited from the default div styling above the media query, such as padding, background-color, and margin.
div {
width: 45%;
padding: 10px;
background-color: lightblue;
display: inline-block;
margin: 5px;
}
@media (max-width: 750px) {
div {
display: block;
max-width: 100%;
}
}
Think About the Smart Phones
Smart phones have taken over the world. If your website is not mobile friendly, you’re losing out on a massive market. Search engine providers like Google will punish you for not having a mobile friendly website. Regardless of your content, your site is likely to suffer in the rankings. With such an emphasis on mobile phones, it would almost make more sense to design a website for the smartphone market and not worry about the desktop market, rather than vice-versa.
Responsive design is not mobile design though. Ideally, your website will function across all web-enabled media. With that said, extra attention should be devoted to mobile screen resolutions. Not only are their screens smaller, but their processors are slower. Your website should look good and be fast.
Some designers even take the mobile-first approach where they design the website for the mobile market first and then modify it as the resolution increases. We’ll focus on the large resolution websites first and work our way backwards. Ultimately, it’s up to you to decide on your developmental approach.
Responsive Design is Crucial for SEO
If your website is not responsive, not only will your site likely discourage repeat visitors, it will not rank highly on most modern search engines. Search engines make revenue through advertisements. However, when users are displayed search results, they will not only see ads, they will see organic search results too. Let’s walk through a scenario to see how a search engine might behave if your website, and a few others, are not responsive in design.
The user might search for a term like cookies. The search engine displays a couple of ads and usually the top 10 search results. The user will either click on the ad or on one of the organic results. If the user clicks on the ad, the search engine company will charge that company a small fee. But why do search engine companies care about responsive design?
If the user instead clicks on one of the organic results and does not have a good user experience on the site, he or she will likely back out of the website and click on the next website. If the next website provides an equally unsatisfying user experience, the user will back up again and try the next result. He or she will repeat this process until one of two things occur: either the user will find a website that they’re satisfied with, or they will leave that search engine and try a different one. The second scenario is what search engine companies are afraid of. The less visitor they have coming to their search engine, the higher the chance that the ads that they are displaying will not get clicked. That is why they push for high user experience on each site that they display. The faster a user can find a website related to their needs, the higher the chance for that user to return to that specific search engine, and the higher the chance that he or she will click on an advertisement.
CSS Series
Continue your CSS Learning.
Layouts that just click into place
Part nine of our CSS fundamentals series tackles page layout. Compare Flexbox and CSS Grid, control stacking with positioning, harness media queries, and craft responsive, gapless designs without heavy frameworks.
One stylesheet, every screen
CSS — P10: Responsive Web Design
Part ten of our CSS fundamentals series unlocks responsive web design. Learn mobile-first thinking, fluid grids, flexible images, and breakpoints with media queries and container queries—empowering sites that adapt flawlessly from tiny phones to ultra-wide monitors.
Catch bugs before they hit the browser
Part eleven of our CSS fundamentals series focuses on testing. Explore cross-browser checks, responsive breakpoints, automated visual-regression tools, and unit snapshots with Playwright or Jest. Build a safety net that flags layout shifts and style regressions before users ever notice.