DEV Community

Cover image for A Ridiculously Simple Way For Creating Responsive Web Apps
Domagoj Vidovic
Domagoj Vidovic

Posted on

A Ridiculously Simple Way For Creating Responsive Web Apps

I remember my first encounter with responsive design. Before any investigation, it seemed incredibly complex.

The same app runs and behaves differently based on so many types of user devices?

I have to cover all the screen sizes, from ultra-wide monitors, over laptop and tablet devices, all the way to the smartphones?

Mate, that must be a nightmare.

But honestly, it isn't. 

Responsive design is nothing more than a bunch of if statements.

Let's dive deeper into the topic.


Two Types of Design

Depending on what you create, you have two choices:

  1. Mobile-First Design
  2. Desktop-First Design

Mobile-First Design means that you first design and create software for mobile devices, and then extend it to desktop devices.

It assures that your core functionality will be available on a mobile device.

It's easy to add more functionality on the bigger screen, but it's hard to strip away functionality and keeping the core while going to a smaller screen.


According to this research, 68.9% of websites visit came from mobile devices.

If you're creating a consumer app, Mobile-First Design is likely to be your choice.

Complex B2B solutions require Desktop-First Design, and sometimes don't even have a fully functioning mobile solution - they're just too complex.

That's why I'll focus on Mobile-First Design in this article.


The Design

We'll keep this simple. Let's say that you have a number of items you want to display on your feed. It will look something like this:

Mobile design

Mobile design

We have two components here:

  1. Parent component, container 
  2. Child components, items 

If we ignore the CSS code for everything except the layout, it will look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>

  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr;
      align-content: flex-start;
      gap: 16px;
      padding: 16px;
    }

    .item {
      padding: 88px 16px;
    }
  </style>
</html>
Enter fullscreen mode Exit fullscreen mode

Can you see the meta tag, <meta name="viewport" content="width=device-width, initial-scale=1.0">?

It's incredibly important and there's no responsive design without it. Without it, your browser won't know the initial zoom and it will look really bad on mobile devices.


Doing the Magic to Make the Desktop Work

Just joking, this is no complex magic. As I've said, just a bunch of if statements!

We're trying to spread the items, keeping 3 of them in each row:

Desktop design

Desktop design

The code looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>

  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr;
      align-content: flex-start;
      gap: 16px;
      padding: 16px;
    }

    .item {
      padding: 88px 16px;
    }

    @media (min-width: 992px) {
      .container {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
  </style>
</html>
Enter fullscreen mode Exit fullscreen mode

We're finally here, introducing @media queries. 

Let's read this in a simple, already familiar way:

if (screen width is bigger or equal than 992px) {
    apply styles in the same way as before
}
Enter fullscreen mode Exit fullscreen mode

And that's it! Nothing more than this! The styles here will affect only screens wider than 992px.


How About Tablet?

You can combine media queries with logical operators. 

Yep, you can do something like:

@media (min-width: 768px) and (max-width: 991px) {
    // styles
}
Enter fullscreen mode Exit fullscreen mode

And those styles will affect everything in range from 768px to 991px.

Remember, this is nothing more than an if statement.


How to Cover All Devices

Media queries are much more than just min-width and max-width.

You can check stuff like orientation, aspect-ratio, and much more.

You can use logical operators like or, not, and all the others.

But to be honest, what you've read in this article is enough for an amazing and simple start.

You probably won't need most of the other queries anyway. Maybe in some rare scenarios. By then, your knowledge about queries will be so powerful that complex queries will be a joke!


Loving my work? Feel free to buy me a croissant. It's an incredible boost to my motivation.

Check out the bottom of the originally published article on Medium for the best course around responsive web.

Discussion (27)

Collapse
gunsyx profile image
GunsyX

You're literally defining media queries, where's the ridiculously simple responsive design part? This is bs, stop clickbaiting on DEV

Collapse
dannyengelman profile image
Danny Engelman

Give the guy a break, GunsyX.
Simple applies to the author, not the technology

Collapse
aquacalc profile image
Nick Staresinic

Your first sentence might have been the springboard to some constructive criticism; but you had to follow it with an insult that produces heat without light. (Reminds me of Iron Mike's popular quote about social media.)

Collapse
reikrom profile image
Rei Krom

That's just the effects of using a clickbait title.

If you're intentionally misleading and tricking people, expect them to be annoyed which in this case is reflected in the comments.

One should be nice to their fellow man, but also can't let people do annoying stuff without some sort of consequences.

Collapse
gunsyx profile image
GunsyX

Then focus on the first part? 😂 The first part was the criticism, the second part was the aftermath of me wasting 4 minutes on this article hoping for gaining at least something useful out of it when the title promises something extraordinary. Clearly a clickbait article, called it for what it is. Reminds me of people with unnecessary superiority complex.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

The title says "Creating Responsive Web Apps"; those responsive apps are created with media queries.

What did you expect?

Collapse
gunsyx profile image
GunsyX

The title says "A Ridiculously Simple Way For Creating Responsive Web Apps"
Responsive Web Apps in general are only created with media queries, but you mentioned a 'ridiculously simple way' to achieve that instead, but wheres that? You literally just defined media queries, like no sh*t, that's not what anyone's here for.

Thread Thread
domagojvidovic profile image
Domagoj Vidovic Author • Edited

While media queries are incredibly simple, people think that they as well as responsive apps are something complex.

I introduced a mindset that media queries are nothing more than a bunch of if statements - something most people find simple.

This article won't magically create responsive apps.

Thread Thread
djblairq profile image
djblairq

You keep saying "if" statements....yet I see no "if" statements in the code.

I understand where GunsyX is coming from but I'll take a different approach than he. The title "A Ridiculously Simple Way For Creating Responsive Web Apps" implies that there is some sort of new WAY that is ridiculously simple, compared to the normal way of creating responsive web apps. A title more like "Creating Responsive Web Apps is ridiculously Simple: here's how" might be a little less misleading. I as well read the article thinking that I was going to read a new way. A ridiculously simple way. But instead just read about the normal way. Which is, yes, ridiculously simple. :-)

Collapse
gradosevic profile image
Goran Radosevic

I believe the future is without media queries at all. Today we can make responsive layouts with grid using minmax in grid-template-columns.

Example

display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

Collapse
forbidd3n profile image
Chris Tang

I'm agree for the title was a bit misleading, was thinking if there are something out of the box aside from media queries.
Perhaps you could look at the new way of CSS function instead.
Something like:

.container {
  width: clamp(400px, 75vw, 1140px);
}
Enter fullscreen mode Exit fullscreen mode

That will simply clamp the .container with desire width together with its minimum 400px and maximum 1140px values. And the best part here is you can get rid of media queries, of course this is just a simple example.

Reference: clamp() CSS function

Collapse
synapse709 profile image
Tim Titus

"According to this research, 68.9% of websites visit came from mobile devices." - I'm really tired of people quoting this. Just because everyone spends the majority of their web time on a few social sites does not mean that 68.9% of your traffic will come from mobile. If you're building a SAAS business or anything not specifically targeting a mobile audience then just start with the desktop, then @media for mobile as needed for every single pixel width until things are comfortable.

Collapse
jwp profile image
John Peters

Very nice article. I discovered this same thing. Nowadays I only use the Grid, Viewport configuration, and media queries as shown here. It took me a long time as a newbie to dial-in the three parts. Tx.

Collapse
devparkk profile image
Dev Prakash

Thanks

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

No no, thank you for reading!

Collapse
arafatweb profile image
Arafat Hossain Ar

Awesome post, thank you!

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

So glad to hear that it's helpful! 🚀

Collapse
jwp profile image
John Peters

Thanks

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Next time too!

Collapse
devonkiss profile image
Devon Kiss

Well, at the very least this article will inspire some good conversation in the comments below! That has to be worth something. Way to get yourself noticed Domagoj Vidovic. Good article in my opinion.

Collapse
mhmoudalaskalany profile image
Mahmoud Alaskalany

great post keep up the good work

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Thanks mate! I definitely will 💪

Collapse
dotorimook profile image
dotorimook

I am wondering is there a nice way to set font-size for various size of screen in addition to this post. Thank you for the nice post!

Collapse
donalfonsnisnoni profile image
Don Alfons Nisnoni

Clickbait

Collapse
tsunade01 profile image
Jessica Ramos

Awesome Post. Thanks for sharing.

Collapse
shayarisoft profile image
Shahzil malik

Nice Article Bro

Visit Best to get images dp and others.

Collapse
talorlanczyk profile image
TalOrlanczyk • Edited

Great article
Small note
About the grid per device
You can use this one line css
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
This will change the grid by itself without media