Responsive Web Design Fundamentals
Have you ever designed an app that looks beautiful on your desktop monitor, but explodes into a shattered mess the second you open it on mobile or a laptop? Unless you’re Pablo Picasso, that’s probably not what you intended.
Responsive design is the practice of styling content to automatically adapt to varying screen sizes, so that a user can interact with it regardless if they’re on a massive professional gaming display or their grandma’s iPhone 5.
Many modern CSS libraries, such as Material-UI or Tailwind, come with some built-in responsiveness. Still, you’ll find yourself having to make the occasional manual tweak, like changing the flex-direction of a container from row to column for mobile devices.
Instead of pulling your hair out the next time a div blows up your entire webpage, implement these responsive design fundamentals to ensure a pleasant and accessible user experience across all screen sizes.
1. Use rems or ems instead of pixels
Pixels are a fixed, absolute unit of measurement. They do not scale and they are not considered accessible. If a user zooms in or adjusts their browser font setting, pixels don’t change. Ems and rems, in contrast, are responsive units that the browser interprets into the equivalent pixel size. Their size is relative instead of absolute, and they scale with the browser depending on the size of the root or parent element.
One rem (1rem) is equivalent to the font size, in pixels, set on the root element: the <html> tag. The default is 16px. If you set a list item’s font size to 0.5rem, it’s the equivalent of 8px. Changing the base font size on the root element means every child element using rems also adjusts proportionally.
An em works similarly, except the base font size comes from the direct parent element instead of the root element. If you set the font size of a .header-container to 12px and the font size of a .header-container h1 child element to 0.5em, the latter will be the equivalent of 6px.
html {
font-size: 24px;
}h1 {
font-size: 1.5rem;
/* equivalent to 36px */
}.nav-container {
font-size: 16px;
}.nav-container li {
font-size: 0.75em;
/* equivalent to 12px */
}
2. Use Percentages For Sizing
Utilizing percentages instead of hardcoded pixels to define the height and width of child elements inside a parent element allows those children to resize themselves on the fly. If the parent element’s dimensions change, either from itself being responsive or a media query, the children maintain their proportional sizing.
.movie-card-container {
height: 500px;
width: 400px;
}.movie-card {
height: 50%; /* 250px */
width: 75%; /* 300px */
}
Percentages can also be used to set box-model properties like padding or margin. One caveat — stick with pixels for setting minimum values, such as min-height or min-width.
3. Implement Media Queries
Even automatic responsiveness has its limits. You’re still likely to encounter the dreaded phenomenon known as a break point — a screen size that throws a figurative grenade into your beautiful CSS. The good news is, break points are easy to fix through the use of additional CSS code known as a media query.
The below gif shows the aforementioned grenade in action. As the screen width shrinks, the app hits several break points. The track image overlaps the sidebar, the header never shrinks, the sidebar’s height extends downward, and before long the whole thing is a dumpster fire.
Media queries have simple syntax and can be added to the bottom of your CSS file. They look like this:
h1 {
font-size: 1rem; /* global style */
}@media only screen and (max-width: 480px) {
h1 {
font-size: 0.5rem;
/* style only implemented when screen width < 480px */
}
}
What does that do? As soon as the browser’s screen width dips below 480px, every h1 element will reset to 0.5rem. Any CSS written inside a media query wrapper will change the styling based on the conditions defined in the query. You can set media queries based on max-width, min-width, min-resolution, max-resolution, min-height, max-height, etc. You can even specify multiple conditions or a range.
Let’s fix our F1 Circuit Explorer site.
@media only screen and (max-width: 1550px) {
h1 {
font-size: 1.5rem;
} #header img {
width: 10%;
height: auto;
} #card img {
width: 75%;
height: auto;
} .circuit-list-item h5 {
padding: 0.25em;
}
}@media only screen and (max-width: 1000px) {
.circuit-list-item h5 {
font-size: 0.5rem;
}
}
There’s much more that goes into true responsive design, including a heavy emphasis on accessibility. If you adhere to these three techniques as a starting point, however, you’re well on your way to designing apps that look great across all screen sizes.
Happy coding!
Want to see responsiveness in action? Visit my personal website at www.gjeffgolden.com and resize to your heart’s content.
