Background & Overflow: Mobile Layout

[00:00:00]
>> We talked about our designs, we wrote our semantic HTML. Now what do we do?
>> Create the mobile.
>> Create the mobile layout, right? Are you guys getting this now? Okay, so the next thing to do is create the mobile layout. The mobile layout is going to be this weird side-scrolling kind of thing.

[00:00:18]
So as you think about this and you wanna approach it, so first of all, if you can get just the card layouts done, that is totally awesome. If you can't figure out how to make them go horizontal and have the scroll bar, don't worry about that part. You should at least aim to get the card layout done.

[00:00:39]
The next thing to do would be to get the cards to layout across the page and a default looking scroll bar, okay. And then the last thing to do would be to see if you can actually style the scroll bar. And I've given you a hint for that in the hints and spoiler alerts section of the webpage if you wanna take a look at that article and figure out how that styling works.

[00:01:04]
All right, so this one's a little bit trickier than the one that we just worked on. So let's think through this in a little bit more detail. So what we have going on here is we have a series of cards, right? We have card one, card two, and so forth on down the screen.

[00:01:23]
Each card has a layout, and then we have a layout for all of the cards. So, we actually have two problems that are going on here. We need to do a layout for each card, and then a layout for all of the cards. So let's start with the layout for the individual card.

[00:01:42]
And the way that we're gonna set that up is as follows. Let's start with our card. Now what we're gonna have to do is put that number next to our headline. And as we can see in our design here, that number is big and it's got a fancy boarder on the bottom, and it needs to go next to that headline.

[00:02:06]
So how are we going to go about doing that? Here's how we can do that, we can set this up to display grid and then we can say that our grid template columns. And remember what I told you here, you don't have to always say FRs. It's not always FRs is the right answer.

[00:02:27]
Often it is because we want four equally sized columns to equally sized columns. But here we want one narrow column for our number and one fat column for everything else. And so the way I set this up was I did 30 pixels for one column, that will be the number.

[00:02:48]
And then next to that, you probably would say, well, 1FR or something like that. But I did this instead. I did minmax 250 pixels, 600 pixels. So, what does that mean?
>> Anywhere between the range.
>> Right, don't go any smaller than 250, don't go any larger than 600.

[00:03:15]
So, that'll give us a little bit of flexibility here. Now, our page looks kind of weird [LAUGH]. What's going on here? I've given it two columns, right, I gave it 30 pixels and the fat not one and if we take a look at the markup for one card just focus on one card.

[00:03:36]
Here's our div with a number, here's our h2, here's our class our card image and here's our paragraph, right? So this is gonna distribute, the number goes in the first column, the h2 in the second column. That's what we want. Then the image goes in the first column, and the paragraph goes in the second column.

[00:03:58]
That's not what we want [LAUGH] okay. So now we have to tell the image where we want it to go, in fact all of these things. So what we might do then at that point to get this layout working is as follows. I actually did this, grid template rows, repeat, 2, auto.

[00:04:27]
And what that does is, it will separate us into two rows. And again, automatically, it's gonna make more than two rows for us. But ultimately, what this will do is we can have our number occupy the first column, and then everything else will show up in the second column in the same row.

[00:04:47]
So let me show you how that works, for our number where is that going to display exactly?
>> First row.
>> First first column, first row, right. Where's our card-image going to display?
>> Last row, last column.
>> Two-three, right? So there it is. There's our headline, there's our image, now our paragraph is displaying over here where in that first column again, right?

[00:05:33]
So,
>> Shouldn't we just hide the paragraph?
>> Sorry.
>> Shouldn't we just hide the paragraph, cuz it's not in the screenshot? Yeah, that's right we're heading paragraph in this one so card p display none. Let's talk about that display none here for a minute. [LAUGH] Okay display none good thing or bad thing, go [LAUGH]

[00:06:02]
>> Good, great, bad.
>> Great, okay, great, bad.
>> Potentially problematic.
>> Why would you say great thing?
>> Cuz often it's removed entirely from the DOM, it's not being displayed at all, so it doesn't have anything to do, like none of its margins, borders, paddings stay behind.

[00:06:19]
Whereas if you were to set something as invisible, it's position and everything would stay there, sorry, invisible. But if you were to have it.
>> Yeah, visibility, none, yeah.
>> Right, so display none removes all that as well. So it's not part of the layout.
>> Sweet.
>> Anything hidden is still available to a screen reader though.

[00:06:36]
>> Yeah.
>> Or anything.
>> Accessibility.
>> Yeah, anything tackled this way will still be read by a screen reader.
>> I think that's true, yes. You were gonna say bad, is that the reason why?
>> Yeah.
>> Okay?
>> Accessibility, if it's not shown on the screen, but then it's still being used by screen readers and people using that, then it might not be the experience that you want them to have.

[00:06:56]
>> Absolutely true, and what would happen if I had 500 paragraphs on the screen?
>> Screener's never getting through.
>> Screener is probably never getting through it but also we start to wind run into performance issues, right? So anything that we hide here is actually still being loaded by the browser, but then not being displayed.

[00:07:16]
So if I had one megabyte images times 50 of those, and I just said display none. I've downloaded 50 megabytes of information that I am not even going to use in the display. So ideally what you're gonna do here is you're gonna come in with some kind of solution, where you're loading in only the information that you need to display on the page.

[00:07:35]
But with HTML and CSS, we can't do that. This is the best solution we come up with with just HTML and CSS. Makes sense, okay? So that's why we're doing that today.
>> I have a question related to the screen reader. If it is out of topic, stop me.

[00:07:50]
>> Okay [LAUGH]
>> No wait, when we make this comes off and.
>> Yeah.
>> Hey, what about the screen data so do you have any work on it. But I am so so far I have not even gone through one single screen reader accessibility thing but in our development time, we dedicate so much time for the screen reader.

[00:08:12]
>> Right.
>> Then how do I balance that? Is it like a best practice to have a screenreader, but no one has used it for multiple years?
>> Yeah.
>> But you dedicate your time on that.
>> Right.
>> Do you have any perspective on that?
>> As always, this goes back to user research.

[00:08:32]
So what is the percentage of users who are using screen readers on your site? What are the readers specifically that they're using? And I think you're gonna find that there are some that are very popular that you absolutely need to get to work, and there are some that are not very popular that you probably can let slide a little bit more.

[00:08:50]
But a lot of this goes back to legal as well, because you work for target, that's a very large company and they have to have an accessible website. So yeah, so it depends and it depends on legal things on which I am not a lawyer, and this is not legal advice [LAUGH].

[00:09:08]
And then there's there's the whole concept of like, how do we deal with development time? This is actually the same question we used to have with Internet Explorer six or something, right? How much time do we spend supporting Internet Explorer 6? [LAUGH] It used to be that you could spend 20% of your development time on every other browser and 80% on Internet Explorer 6.

[00:09:32]
So how critical was that? So at some point you do have to call, these are our edges. This is what we're going to do, however that math is done, yes.
>> Just note we've got it this is addressed a little bit in our we have a couple accessibility courses.

[00:09:46]
>> Excellent.
>> And also adding an enterprise accessibility course soon.
>> Perfect, yeah, so there are accessibility courses and who will know much more than I do about how this stuff works. Okay, so broadly speaking then, with just this little bit of grid that we've added here, we've got our cards kind of displaying as we want to.

[00:10:08]
The chunks of information are in the right spots. Now we just need to tweak these a little bit to make them prettier. So let's go back and do that. So, for my card. I have a column gap as well, column gap 1 rim. Okay, here for my number font family.

[00:10:36]
Spell it right yes var decorative Okay, and my font size var h4. I want it to be about that big. I reduced the lined height to 0.7, that was through exhaustive testing. The color is var green. The font size, look at that, I put font size in twice.

[00:11:15]
I started with h4 and then I made it an h2. So there we go, h2. Text align center. Okay, and then comes the fancy text part of this. So, back in my base I have the fancy text styling here find it, okay. I'm gonna copy the fancy text styles and I'm gonna paste them here into number, okay.

[00:11:52]
So not so good, right, the fancy text styling here is very separated from the number. So we need to fiddle around with these numbers a little bit. What I found was 20% for the background position was a good spot and the background size was 100% to 20%. So that looked pretty good there, okay?

[00:12:25]
Somebody had mentioned, it was Ben, said our card image, we're gonna need to give that image treatment thing to it again. So .cardimg, we set the width to 100%. The height to 100% and then object fit, cover to get it to fit there on the screen my card h2, so a lot of this stuff is just fiddly styling now, right?

[00:13:02]
Card h2, we have a font-size of var h4. That looks like it doesn't quite work anymore, but let's stay with it, add a margin of zero. Okay, yes, the highlight there is in the wrong spot, be patient. Don't panic, because we're not really quite done yet. So what we've done here is we've styled up this card, okay?

[00:13:42]
Now we need to put all the cards in a row. So how would we go about doing that?
>> On the wrapper, I tried display flex, but I'm not sure if that's where you wanna go.
>> Yeah, so that's one way of doing it. You could definitely do display flex on that wrapper.

[00:14:02]
I always like to go to my HTML and flatten it out like this. So there's all my cards, and there's the wrapper. So you could definitely do this with Flexbox. You could also do this with grid. I think I did it with grid, but, Flexbox would be a totally legitimate answer as well.

[00:14:19]
So here we have our wrapper to ram, one ram, a little bit of padding, get it off the edges of the page, margin zero auto. You could also do your max width here. 1200 pixels. All right, and then we're gonna, I use display grid, but again, you could do this with Flexbox as well.

[00:14:53]
Repeat, oops, grid, grid template columns. We want repeat, five columns, one FR piece. Look at that, that's all it took. And notice that your highlight is back to the right spot again, okay. Because we're using percents, those highlights may jump up and down in space and time. So don't make any final adjustments.

[00:15:26]
Don't get them perfect and then add another layer of styling to them and then go now I have to redo the roll again [LAUGH] okay, because it's relative.