What is responsive design? And why it is important?

Responsive design is a way to let a website scale its content and size based on the user's screen size.

But why?

• User experience: users access your site from a range of mobile devices, we can't know what screen size the user has.

• Better SEO rank: Google will give a higher score on your responsive site. See here

How do make your site responsive?

Use percentage for container width

The container will have 90% of the browser's width and it will adjust dynamically as you scale it to be narrow or wide with a maximum width of 500px. The second example use this min() CSS function, see MDN. This function takes 2 parameters, the first parameter takes minimum width and the second parameter takes maximum width. You also write one less CSS line!

.container {
    margin: 0 auto;
    width: 90%;
    max-width: 500px;
}

or

.container {
    margin: 0 auto; 
    width: min(90%, 500px);
}

Use clamp() function

This function takes 3 parameters - min, val, and max, check it out on MDN.

• min: minimum font size
• val(value): scaling size
• max: maximum font size

👇 The example below will make sure the h1 will have the smallest size of 2rem and the largest size of 5rem. 3vw is the size that will dynamically adjust font size based on the browser's width. Pretty cool, right!

h1 {
    font-size: clamp(2rem, 10vw, 5rem)
}

flexbox

Use flex-wrap property and set the value to wrap. This will allow you have multiply lines from top to bottom. More on MDN

main {
    padding: 30px;
    display: flex;
    flex-wrap: wrap; /* this!! */
    gap: 1rem;
    background: lightcoral;
}

section {
    background: white;
    flex: 1 1 200px;
    height: 100px;
}

grid

Let's break down repeat(auto-fill, minmax(150px, 1fr)):

• repeat() => this takes 2 parameters, number of columns and value(s). e.g.repeat(4, 1fr) or repeat(4, 100px 1fr)
• minmax() => this takes 2 parameters, minimum width and maximum width. e.g. minmax(200px, 1fr)
• Combine both of them => repeat(auto-fill, minmax(150px, 1fr)

auto-fill is a value that you tell the browser, "please take care of them for me"

There are two values that you can use for this, auto-fill and auto-fit. This article from CSS-Trick breaks it down nicely!

main {
    padding: 30px;
    background: lightblue;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

media queries

Lastly, the media queries!!! This allows you to change the value of a specific property based on the screen size. You can go crazy with this! 😁

e.g.

• flex-direction: column => flex-direction: row
• font-size: 2rem => font-size: 4rem;
• background: blue => background: lightblue;
• so on

@media screen (min-width: 500px) {
    .something {
        /* do something */
    }
}

Recap

There are many smartphone users in the world and the number will continue increasing! Make your website responsive is important and your visitors will have flowless experience while browsing your website!

Thank you for your time! 😊