Skip to main content

over 3 years ago Syntax Podcast

Responsive Design Techniques

Wes Bos

Wes Bos Host

Scott Tolinski

Scott Tolinski Host

Topic 0 00:50

Cleaning house

Guest 2

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 responsive technique 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,

Wes Bos

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

Guest 2

Yeah. We had some you know, a play date with this some of Landon's, kindergarten friends. And so it was like, the testing Just man, we did a a crazy clean of our house. This weekend? This Saturday.

Wes Bos

all that stuff. So that was that was my weekend.

Guest 2

I'll help them know how you live. Hot mess. Yeah. Totally.

Wes Bos

like a proper Plug in Dyson, and I have to just do the whole, like, clean, change the filters, rid. And then the Roomba the Roomba stripped gears yesterday, so here I am trying to find a gear for it.

Wes Bos

My is so good. Yeah, it does.

Wes Bos

the Tyneco LogRocket,

Wes Bos

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

Guest 2

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,

Topic 1 00:11

Responsive design techniques

Wes Bos

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.

Topic 2 05:21

Responsive on devices

Guest 2

So that way when you use it on a mobile device or a tablet 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 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 future, the spicy,

Topic 3 02:21

Vacuum talk

Wes Bos

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.

Wes Bos

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 and,

Guest 2

So Our our Tenneco Tenneco, whatever you call that, has an attachment 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,

Wes Bos

Never ending. Anyways,

Wes Bos

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

Wes Bos

rid. Dyson filters just because you're 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, 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 Rid. It's a it's a pretty good one. It's not just your mobile first you're kinda but then our new house has

Topic 4 04:00

Responsive design talk

Guest 2

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 the flex box, the clamp, detailing and, like, getting into the the stuff that you don't ever get a chance to clean. So Yeah. The clean. The clean.

Guest 2

all that stuff here. We got all these different types of grid,

Guest 2

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.

Guest 2

That exists.

Guest 2

and responsive design techniques. So this is gonna be a fun one because, you know, really, when we think about responsive design,

Topic 5 05:04

Basic responsive technique

Guest 2

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.

Topic 6 00:23

Sponsors

Wes Bos

JavaScript session, replay, and FreshBooks Cloud Accounting. We'll talk about all of them partway through the episode.

Wes Bos

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.

Wes Bos

and desktop first. There's a lot more to it. We are rid. Sponsored by 3 awesome companies, Linode, Cloud Computing,

Topic 7 00:00

Transcript

Announcer

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

Share

Empowering developers for over 286196380530 milliseconds!