Intro to Responsive Design in CSS
Being able to alter a webpage’s layout to fit a device is an important aspect of web development. In the modern world of technology, there are many ways to view the same site or application. Take for example Wikipedia. You can browse Wikipedia on your laptop, your desktop, a tablet, your phone, and much more. It’s crucial that the same information is visible across all of those devices. Certainly, you can’t format the same webpage on a 13 inch laptop as you would on a mobile device. As a developer, you should factor in the devices your users may be using.
I learned a lot about what it takes to make web pages responsive by following the YouTube channels of Kevin Powell and Web Dev Simplified. An important point that Kevin Powell makes is that plain HTML without CSS is already responsive. You can check this out quite simply by creating a basic HTML document. Don’t add any CSS and open up developer tools. From there, click ‘toggle device toolbar’ and you’ll see how your webpage changes depending on the device. Here’s what I did to demonstrate.
On mobile view it looks like this:
You can see that without any CSS, our text fits in the display, or viewport of both devices. However, when we add some CSS styling, this will change the display of our viewport and may lead to some formatting issues on other screens. Of course when we are building web apps we are not just going to use HTML. We want to add CSS to ensure our webpages look good. As we alter the sizes of our HTML elements through CSS, this is where we can run into cross-platform formatting issues. Let’s take a look at these issues before jumping into how to make our webpages responsive.
For purposes of this example, let’s say that we have an image and we set its width to 2000px. That will take up a large portion of the viewport on a desktop, but on a phone, part of the image will be cut off because the width is larger than the size of the phone’s viewport.
When we add fixed width, that creates problems with responsive design because as the screen size changes, the width in comparison to the screen will not. A better approach instead of using pixels is to instead use relative widths which will take the browser’s viewport into consideration.
If instead of setting the image width to 2000px, we instead set the image width to 100%, we now get:
We can see that by setting the width to 100%, the image’s width matches the width of the viewport.
Another part of responsive design worth mentioning is media queries. Media queries let you customize CSS based on screen size. Let’s say you have a CSS class that sets the width for an image at 50%, but on the phone, you want that same image to have a width of 100%. You can do this through media queries which let you change CSS classes based on certain conditions being met such as screen size changes. Let's take a look at how this works.
.image {
width: 50%;
}@media only screen and (max-width: 950px) {
.image {
width: 100%;
}
}
Here we can see that the media query will only work on screens with a width less than 950px which is most mobile devices. Inside the media query, we’re changing the width of the image class to 100%.
In this article, we only touched on a few aspects of responsive web pages. There are of course many more resources to check out of you want to optimize your app across platforms.
The main takeaways are that you should stay away from using fixed widths and absolute positioning. Take into account the impact your styling might have on the viewports of other devices. Use developer tools liberally to check your changes, and don’t be afraid to use media queries. I’ve attached some resources that have helped me, and check out Kevin Powell and Web Dev Simplified’s content.
Resources: