13.1 Getting started with mobile designs - Video Tutorials & Practice Problems

<v Michael>In the introduction, we talked about</v> how our technique for doing this responsive design is mobile media queries. So let's take a look at what a media query actually looks like. Let's open up our CSS file here. And we're just gonna put this at the bottom. Lee, is that right? <v Lee>Yeah, after all the other stuff.</v> You can actually also put this in another style sheet and load it independently but we're gonna keep it all in one, to make things easier. <v Michael>Should I have a comment</v> for like media styles or something like that? <v Lee>You can, but I mean it's pretty clear</v> what it looks like when you type this out. It looks pretty different from all the rest and it's easy to... If you need to search and find this section, just search for @media. <v Michael>All right. Well, so let's show how it works.</v> So there's a special declaration called @media. It's interesting, right? We haven't seen this before, have we with an at sign? <v Lee>Nope.</v> <v Michael>Okay, so this is new.</v> And can be @media. And ordinarily, with the CSS rules, we just have the curly braces but here, we're actually gonna have something extra. Right? We're gonna- <v Lee>Right.</v> Give it a max width. <v Lee>So there are a lot of values</v> that can go into this media query into this property field here. That you can have like max width and min width so that it can actually stop at a certain point as well, these styles. But right here, what we're just gonna do is do a very simple media query. If you want more information, you can check this out online and see the vast universe of options that is out there. <v Michael>Yeah, we've got a link in the book.</v> <v Lee>Yeah, so what this is doing is it's saying</v> when the browser window is less than 800 pixels, apply all of the styles that are inside of this, and we'll start adding some. <v Michael>So one for the HTML tag.</v> We're gonna get rid of the box shadow and then remove the padding. So that's just getting rid of this, right? <v Lee>Yeah.</v> <v Michael>Stuff around it. Okay.</v> And then we've also got something for the posts. <v Lee>Yeah. We're just gonna hide the post aside.</v> <v Michael>Okay, so it'll hide this thing on the side.</v> Like that? <v Lee>Mm-hm.</v> No, this is on the index. It's actually... It's this. <v Lee>It's on both.</v> <v Michael>Oh, it's on both.</v> <v Lee>Yeah.</v> <v Michael>Okay.</v> Remove that with display none. (mouse clicks) <v Lee>So let's talk about why we're doing these things.</v> <v Michael>Okay.</v> <v Lee>So the problem here is that</v> your browser window on a desktop is landscape. It's like a rectangle that is wider than it is tall. Most mobile phones are portrait in the way that they're normally used. Meaning, that they're taller than they are wide. <v Michael>Right.</v> <v Lee>Right.</v> So we need a way to fit our landscape website into this portrait space. <v Michael>Got it.</v> <v Lee>And so we have</v> to think about things that take up a lot of width in landscape so that we can either make them smaller or get rid of them for the portrait size. We also have to think about things that are side by side in landscape, and think about putting them on top of each other for portrait. There's a whole variety of different portrait sizes. This used to be a lot easier when there was like iPhone and you know, just a couple other competitors that had pretty much the same screen size, but these days there are so many different screen sizes that are out there that you can't reliably just target specific sizes with styles because you just end up having so many different media queries and so many different exceptions to make it work. So in general, the best idea here is to determine a break point, which just means the point where you want these media styles to apply, which are 600 pixels. <v Lee>So just determine it-</v> <v Michael>Or 800 pixels?</v> Yeah. <v Lee>So determine that break point.</v> And then below that, just design everything to be responsive so that it can fill-up the screen nicely on all of those different screen sizes. <v Michael>Okay.</v> Well, so we can get a first cut of testing this just by looking at this page here, <v Lee>Yep.</v> <v Michael>and</v> put it in the window to resize. Right now, it's bigger than 800 pixels across but if I do this, see it should... We're looking for these shadows and padding to disappear, and this to disappear. So we shrink it down. Aha! <v Lee>There went.</v> <v Michael>There you go.</v> Yeah, looks a lot better. <v Lee>So...</v> We hit that break point and the styles got applied. These styles that are in a mobile media query like this have very high specificity, so they'll overwrite a lot of things. And that's one of the reasons why you wanna have this way at the end, too, so you don't want to have media query stuff just willy-nilly in your code, because, you know, they do have high specificity. It's not like attacking something with like an ID. So you could accidentally override it if there's other stuff below it. But the problem here, Michael, if you keep scaling this window down... <v Michael>Yeah.</v> <v Lee>Is that...</v> different browsers have different minimum widths. So this is a real good way to like check and see the basics of how your responsive styling is working. It's giving you an idea about what it'll look like, but it's not perfect. So there are some techniques that we can use that we'll cover that let you have a better approximation of what your site would look like on different mobile devices. And then the other thing is you're looking at this, there's actually a school of design thought that says that you should be looking at this size screen first in designing your website, and then scaling up to the the full desktop version. That's called mobile-first design. And it's a totally valid way to approach this. The real question is "Where are most of your customers gonna be coming from?" Are they gonna be looking at your site on a phone or are they gonna be looking at your site on a desktop? For something that's like a blog, you actually might have like the majority of your users coming to your site on a mobile device and you actually might wanna think about how it looks mobile first. If you're designing a course for programming that requires people to be in front of a computer and like a terminal, you're probably gonna have a lot less people coming on mobile devices. <v Michael>Yeah.</v> Now one thing I noticed here, Lee, is that if we look at the logo here, it's kind of pushed off the side, and things like the heading here, I think... You know, the nav links don't look... I guess they're looking okay but- <v Lee>Yeah, this is-</v> <v Michael>This isn't ideal though.</v> <v Lee>Right, this is an artifact of us</v> removing the site padding. Remember we had put a negative margin on the logo to kind of pull it to the left <v Michael>Oh, right.</v> because we had that there, and we wanted it the exact corner? We'll actually deal with fixing all these little problems later in this chapter as we apply more mobile styles to whole site. <v Michael>Okay, great.</v> So you mentioned that this is not the preferred way in general, to look at something with like the mobile media queries, right? <v Lee>It's not that it's not preferred,</v> it's something in the middle. It's like- <v Michael>It's not exact.</v> <v Lee>It's like a quick way.</v> <v Michael>Okay.</v> So like, if you're working on something that just has a responsive design after a certain point, it's an easy way to see like, "Oh, all the stuff is kind of in the right place," but what you're not gonna get are the little details. So there will be differences once the screen is even smaller, there will be little differences in like layout that you're gonna have to go in and tweak and fix. So you always do need to end up checking it on mobile devices. Otherwise, you're gonna end up with little problems. <v Michael>Okay, and so there's a way to do that. Right.</v> And various browsers have ways to support this. <v Lee>Yes, exactly.</v> <v Michael>In Safari,</v> we've already enabled our developer tools. If you haven't done that, figure what is it, <v Both>It's under Preferences.</v> <v Lee>And then, Advanced.</v> <v Michael>Advanced, yeah.</v> And so then, Show Develop menu in menu bar, which we've got right here. And then we can say Enter Responsive Design Mode. Like that. <v Lee>There's a shortcut</v> for it, too. <v Michael>Oh, yeah. Was it-</v> <v Lee>It's Option+Command+R.</v> <v Michael>Option+Command+R.</v> Yeah, cool. Does it toggle? <v Lee>Yeah.</v> <v Michael>Yeah. There we go.</v> <v Lee>So then, this lets you choose</v> a variety of different screen sizes and devices. <v Michael>And we can really see now</v> that the menus are just completely broken on mobile. So that's great that we'll be able to fix that. So this is iPad. Is this a rotated iPad? <v Lee>Yeah. It's horizontal.</v> <v Michael>How do we get the vertical iPad?</v> <v Lee>You know, I don't know if you can on this.</v> I think it might just be to show you like... Honestly, you could just use one of the other iPad ones, like a smaller iPad, might be a different resolution. I don't know if you can turn it. <v Michael>Interesting.</v> <v Lee>Try that little dropdown</v> where it says Safari iOS 10 iPad. No. And what about the 2X? I mean, obviously, that's controlling the zoom, but... <v Michael>Yeah.</v> All right. <v Lee>Yeah.</v> <v Michael>So I guess it's pretty much the same as iPhone,</v> but probably good to check it separately. All right. Well, so that's good. We can get a good look here. And so this is what we're gonna be using as we go through the different changes, we're going to test it using this. What is it called? <v Lee>The responsive view.</v> <v ->[Michael Yeah, the responsive view.</v> <v Lee>Also, another thing to note here</v> is that your inspector still works. So this might not look like a normal browser but you can actually inspect elements and move stuff around. <v Michael>Oh, cool.</v> <v Lee>Yeah, for this though,</v> I would pop out the inspector, which we haven't done before, but it's the... Oh, no. Open it up again. <v Michael>Right.</v> <v Lee>It's the icon that's right next to the close button.</v> <v Michael>Oh, like this.</v> <v Lee>Yeah.</v> <v Michael>Huh!</v> Cool. <v Lee>Yeah.</v> All right. <v Michael>All right, now that we know how to see in mobile</v> and have seen one of these basic media queries, we're gonna take a look at a more systematic approach to doing mobile adaptation.