Building responsive sites and apps

In 2020, 83 percent of adults in the United States accessed the internet through their mobile phones. Thus, its important to make sure that apps and websites we build are accessible, readable and user friendly on devices with screens of all sizes — a concept called responsive design.

We can achieve responsive design through CSS, particularly through the use of media queries, which specify how content should be displayed on a screen of a certain size. Through this approach, every user receives the same content, but our CSS tells the browser how to style it depending on the screen size.

To illustrate this, I’ll take the example of an app that I wrote for the web — an interactive single-page app that helps users find the best-matching Ina Garten recipes based on time, course and ingredients.

Here’s what it looks like on a standard desktop web browser:

Obviously, if I were to load this page on a mobile browser, the content would be very difficult to read and interact with:

To make the experience better for a mobile browser while keeping this look for web browsers, we can manipulate the CSS for this app. To best set ourselves up for success, we can write our CSS like this:

#container {
padding: 1rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
height: auto;
opacity: .95;
width: 100%;
}
#footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
background: white;
opacity: .95;
padding: 1rem;
width: 100%;
}
body {
background-image: url('https://www.hamptons.com/gallery/article/19912b.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: white;
}
body { font-size: 100%; }
body {
margin: auto;
font-family: Didot, Times New Roman, Times, serif;
color: #484848
}
img {
max-width:30%;
height:auto;
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
.intro-card {
animation: fadeIn ease 1s;
text-align: center;
background: white;
border: #3e71de solid 3px;
padding: 1rem;
width: 50%;
margin: 1rem 2rem;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
button.main-button {
animation: fadeIn ease 1s;
border: 1px solid #3e71de;
background-color: white;
color: #484848;
font-family: Didot, Times New Roman, Times, serif;
display:inline-block;
padding: 2px 6px;
font-size: 100%;
border-radius: 3px;
margin-right: 2px
}
button.main-button:hover {
border: 1px solid #3e71de;
font-family: Didot, Times New Roman, Times, serif;
background-color: #3e71de;
color: white
}
p {
animation: fadeIn ease 1s;
}
h1 {
text-align: center;
color: #3e71de;
}
h2 {
text-align: center;
color: #484848;
}
h3 {
color: #3e71de;
font-style: italic;
}
h3.title {
color: #3e71de;
font-style: normal;
}

This setup is important because we have established the sizes of our main container elements — namely, “footer” and “container” — to adapt to the size of the screen. We have our “intro-card” adjust to take up 50% of the container width. This will stay constant regardless of the size of the screen and adjust automatically.

However, the font size is still a problem. To make different rules for the display depending on the screen size, we start by writing a media query.

@media only screen and (max-width: 980px) {
}

This specifies that for screens under 980px wide (tablets and mobile phones), the rules we set inside the curly braces will apply. This is called a desktop-down approach — our rules for small screens will be based relative to the rules we’ve set for large desktop screens.

Because we’ve set up our CSS to be relative to the container, the only thing we need to do is to make the font size bigger — that text is hard to read on the small screen! We’ll have the font display three times bigger than the font we see on our desktop.

@media only screen and (max-width: 980px) {
body { font-size: 300%; }
}

Now, when we land on our page while using a desktop browser, our app looks the same as above:

But on a mobile device, it’s much more readable!