Responsive Design Techniques

Welcome to Syntax, the podcast with the tastiest web development treats out there. Today, we've got 1 on responsive design techniques for you, different ways that you can approach making a website responsive.

Rid. It's a it's a pretty good one. It's not just your mobile first and desktop first. There's a lot more to it. We are rid. Sponsored by 3 awesome companies, Linode, Cloud Computing, LogRocket, JavaScript session, replay, and FreshBooks Cloud Accounting. We'll talk about all of them partway through the episode.

My name is Wes Boss, a developer from Canada. With me as always mister Scott Tolinski. How are you doing today, Scott? Rid. Hey. I'm doing good.

Just man, we did a a crazy clean of our house. This weekend? This Saturday.

Yeah. We had some you know, a play date with this some of Landon's, kindergarten friends. And so it was like, I'll help them know how you live. Hot mess. Yeah. Totally.

And so we were just we were like, let it let's just whirlwind it. Let go as fast as possible. And and let me tell Man, it was, it was the clean of a lifetime, and now our house, it feels so nice because I was like, all day on Sunday, we were just like, Oh, we don't really have to do very much today. We can, like, focus on detailing and, like, getting into the the stuff that you don't ever get a chance to clean. So Yeah. The clean. The clean.

My is so good. Yeah, it does.

My job in our household is I'm the guy who cleans the cleaning stuff.

And More often than not, it's me my wife being, like, the vacuum like, with the tiny co vacuum, you know, that thing this thing sucks. Like, it like, not in a good way. Oh, you don't like it? Oh, no. Well, I, like, took it apart, and I was like, it's because it's, like, literally no air is getting through. This thing is full of of of dust. Like, the the whole vacuum head was jammed full of, like, random stuff that we sucked up from the kids. And So, like, every every couple of months I have to go and we have the Roomba, the Tyneco and, like a proper Plug in Dyson, and I have to just do the whole, like, clean, change the filters, all that stuff. So that was that was my weekend.

So Our our Tenneco Tenneco, whatever you call that, has an attachment that cleans the filter. So it looks like one of the yeah. So I I bought that thing on there, and I clean the filter

before using it every time. That's that's what I do too every now and then. You can hear it. Like, if somebody's using it And you can hear it. You can, like, know. Okay. And, like, it comes with 2 filters, which is awesome. So you can just constantly have a good one.

But then there's also, like, rid. There's, like, a HEPA filter in it as well, which is the air coming in. That thing needs to be cleaned and then, like, the basket. It's a lot of work. That's one thing with the Dyson that we didn't have to do that often is To, like Oh, really? Stop and clean it because it's it's, like, it's plugged in. The motor will just work harder to get past it, whereas the The battery one is very sensitive to that. Otherwise, the the battery will just drain so quickly if you don't have that thing cleaned. We had the battery one the battery Dyson before, And we had to clean ours somewhat regularly, but the cleaning process for the filters was that you had to wash the filter. And then you had to wash the filter and then wait for it to dry. And then, like, 24 time. Yeah. You're like, alright. I'm whatever I wanted to clean. You know? I'm almost at a point where I wanna just buy 2 of those rid. Dyson filters just because you're you're kinda but then our new house has central vac, which is like so, like, we're in the Spot where we're just like the Dinoco is good for little stuff, and the central vac is good for that. And the Dyson is very portable, but heavy. And rid. And then the Roomba the Roomba stripped gears yesterday, so here I am trying to find a gear for it.

Never ending. Anyways,

Yeah. Vacuum talk. Let's talk about responsive design. Yeah. Let's talk about responsive design. So I broke this episode, the show notes up into almost like a, A sandwich menu. We got the basic, the classic, the flex box, the clamp, the testing future, the spicy, all that stuff here. We got all these different types of grid, and responsive design techniques. So this is gonna be a fun one because, you know, really, when we think about responsive design, I I know a lot of people for a long time have just said, you know, it's just it's breakpoints. We either do it mobile first, and we do it this way. We do it that way, and we that's That's the technique we've learned and we've done. But there's a lot of options out there. So I I felt like it was a good idea to talk about maybe some of The different options you have available to you at different use cases, there's some of the pros and cons, maybe what the modern versions of all this stuff is, and then maybe some future stuff And even some testing stuff as well. So, let's get into it. The very first thing is the basic responsive technique That exists.

Some people might think it would be media queries, but in reality, the most basic level of technique you can have to have a responsive website.

And for those of you who don't know the words responsive web design, a responsive website is a website that responds to its container or its viewport.

So that way when you use it on a mobile device or a tablet or even a watch, whatever, the website is going to shrink to the size in which the user is trying to access it rather than,

what's the older technique that used to be called adaptive design? Oh, no. What was the one where you had a mobile app? Yeah. It's like a name for that. M I don't know. It was just called this m. Or you just had 2 websites, a mobile website and a a desktop website, and that was Pretty popular early on. In fact, you still see some