When creating a website for users to view, you want to make sure that the page looks great and intuitive regardless of the users’ devices.
Your website may look astonishing on the computer but does it look just as good on a mobile device?
Looks nice and clean, with simple keyframe animations. But how would it look on a smaller device such as a smartphone?
If you have a website that you want to inspect on a different size resolution, you can use the Google Chrome developer tools and toggle the device toolbar.
Neat feature from Chrome but as you can see, the end result of the website at smaller resolution is quite poor:
The website may look fine on a bigger screen, but it should also accommodate for smaller screens like smartphones or tablets.
To help combat this problem, I will be going over the basics of breakpoints and media queries.
Breakpoints are often broken down into several sections of different screen resolution. These points can be designed specifically for phones, tablets, computers, or large-sized screens in general.
For example, the appropriate screen resolution for phones can range from 400 ~ 600 px, tablets from 900 ~ 1200 px, and computers and other screens at 1200px or higher.
Defining the correct breakpoints for your website depends on whether or not the website followed the Mobile-First Approach or the Desktop-First Approach. Both of them have their pros and cons but require a lot more in-depth explanation. If you want to read more about the two types of approaches, this article differentiates the two approaches well.
Once you’ve identified the desired breakpoints for your website, we can then go ahead and use media queries to make the website more responsive.
Simply put, media queries are CSS techniques that help specify conditions for which you want changes to occur. Let’s take a look at some of the CSS for the website shown above:
.header {
height: 85vh;
background-image: linear-gradient(to right bottom, #2998ff,
#5643fa);
background-size: cover;
background-position: top;
position: relative;
}This is the CSS for the header element that encompasses the entire website above. If we wanted to add a condition for some of this header’s element to change, we can add a media query to do so with the @media syntax in the same style.css file:
@media (max-width: 900px){
.header {
background-image: linear-gradient(to right bottom, red, orange);
}
}In this example, we are specifying that if the maximum width of the screen 900px or less, we want to access the header element and change the background-image linear-gradient colors to red, orange. The transition would look like this:
As soon as the resolution width hits 900px, the background linear-gradient turns into orange/red color scheme, indicating that the media query is taking effect.
Note that in the media query, we only specified the changes we wanted, instead of rewriting the entire .header style.
Using this logic, we can apply different changes to the website.
First, here are some of the original CSS code we will change:
.heading-primary-main {
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
animation: leftEntrance 1s ease-out;
}.heading-primary-sub {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 17.5px;
animation: rightEntrance 1s ease-out;
}.header {
height: 85vh;
background-image: linear-gradient(to right bottom, #2998ff,
#5643fa);
background-size: cover;
background-position: top;
position: relative;
}.btn{
text-transform: uppercase;
text-decoration: none;
padding: 15px 40px;
display: inline-block;
border-radius: 80px;
transition: all .2s;
position: relative;
}
We will make changes to the above code to better fit the smaller resolution screens. For this particular example, we will use a 600px breakpoint:
@media (max-width: 600px){
.heading-primary-main {
font-size: 40px;
font-weight: 200;
letter-spacing: 30px;
} .heading-primary-sub {
font-size: 15px;
font-weight: 500;
letter-spacing: 15px;
} .header {
height: 65vh;
} .btn {
padding: 10px 30px;
border-radius: 60px;
}
}
The changes above are mainly decrease in font-size or height to accommodate the screen resolution change.
With the above media query, the website will change as it reaches the 600px breakpoint:
You can very clearly see the changes apply once the screen resolution reaches 600px.
This is of course a very basic example of responsive design; the possibilities are endless.
Regardless of the approach you take, whether it’s Mobile-First or Desktop-First, you should always keep responsive design in mind when creating your website.
