- These new layout
technologies that we have are changing our medium. It's gonna allow us to do things that weren't possible before
and personally I feel like in a way, it's making the
web become what the web has always meant to be
and what 50 years from now people will understand the web to be, but what it kind of wasn't quite in the first couple decades. One of the things that we know now, post the switch to Responsive Web Design, is that we don't have control
over how wide a webpage is. Webpages could be, or web
viewers, web browsers, the web browser, the
viewport, could be any width. We don't really know what it is. It's also true that it
could be any heighth and any aspect ratio. Your website on one person's
computer, one person's device, might be seen like this
and another person's might be seen like this. So there's this landscape
way in which it could be. There's a portrait way it could be and we as people who make the
website, design the website, code the website, do
not control any of that. Before Responsive Web Design,
we really thought about the top edge a lot and we thought
about the left edge a lot. We sort of assumed how
wide the webpage was. For a while we assumed that
it was gonna be 800 pixels. Then we assumed that it
was gonna be 1024 wide. We also kinda pretended
where the bottom would be. That it would be 600 pixels or at 768. Responsive Web Design woke
us up to the fact that we don't know how wide the page is, right. So now these days we
think a lot about the top and both the left and right edge and we ignore the bottom. Although lots of times we're
in meetings where people say "I would like this thing. My content. This headline. This new sideshow. This must be above the fold." And a lot of us, a lot
of web designers say "There is no fold. There is no fold. Stop saying we need it
to be above the fold." We have no idea where the fold is. It's true. Webpages don't fold. That phrase comes over from newspapers where with a homepage, a
front page of a newspaper, of a paper, newspaper. Editors would decide what
would go above the fold, what would go below the fold because the things above
the fold would appear on the newsstand. The newspaper sitting on the newsstand. You could see the things above the fold. You didn't see the things
below the fold, right. So that's where that idea comes from. The reality is though, with
the new CSS that we have, we do have quite a few
tools that are gonna let us pay attention to that fourth edge and they're gonna let us design and create things that are
flexible, fluid, responsive, whichever word you wanna use, so that they fit within
the space that's available. I don't think that means we
should have these discussions about what goes above the fold. I do think that it means, as designers and as folks who make decisions, business decisions or content decisions, we should think about what is
it that's inside the viewport when the page first loads? After people scroll, what is
it that's inside the viewport? How could we think about
that four-sided box and design things to
fit inside the viewport as a whole image. If you have a data
visualisation, if you have a map, if you have some kind of graphic
that you wanna show people, maybe it's gonna be half way
down the page on your article and you want to size that so
that when people get to it it's small for small screens,
it's big for big screens. That way it could be the
maximum size possible but not be sticking out,
not have any overflow. Have it be so that people can
see everything all at once. It totally depends on the content and of course I've been talking about this like content websites are
the main kind of websites. These kinds of principles
I think apply even more to something that you might
call an app or application where you have tool
bars or you have buttons or you have things to be interacted with. You might wanna make
sure that a group of them are in frame together and make them smaller
if there's less space or make them bigger if there's more space or change the layout based on the amount of space that's available. So how is it that we can
really design to the viewport and we can design to all
four sides of the box? Well viewport units and
CSS Grid give us a lot more to be able to control that. So I wanted to show you this one example. If we come here to labs.jensimmons.com, I've got this study on flexibility and how is it that we can make
things vertically flexible as well as horizontally. Michael Pollan, I'm a big fan of his. I went to his website
recently and I saw that, in fact, it's not responsive at all. It's a fixed width website. Here's a kind of a recreation
of the homepage he has now. He has a few more things on it than this but this is simplification of his homepage and you can see that as the
browser window gets smaller it just is, in the space right. This is how we did things
before Responsive Web Design. If we come here to the
second part of this example, this is how things work
with Responsive Web Design, with the idea of changing the layout at different break points
with using some of the things that Ethan Marcotte was talking about. This example definitely changes in the horizontal direction. It gets smaller or bigger based on the amount of
space that's available but it does nothing in
the vertical direction. There's no way in which it responds to that bottom edge of the box. So you might easily
have a situation where, you know, on a phone or something. This word here is sort of cut and it just kind of is what it is. This is what we're used to today. We don't really worry
about how things look. We just assume that
people are gonna scroll. And of course this works great, but for the sake of graphic design, there are times when we might
really wanna more carefully construct what is
happening inside this box. So, let's look again. If we go to my idea of what
we might be doing in 2018, you can see here that the
entire layout responds to both the horizontal
and vertical direction. And it gets smaller so that if there's not very much space for things, everything is gonna fit into
the space that is available. This house gets smaller. Why not? The house is just a little
image, a graphic detail. It's not the most important
thing on the page. If there's lots of space for
it, let's go ahead and see it but if there's not, let's make it smaller so that we can see things. Maybe somebody's on a laptop that has a very small screen in
the vertical direction. They can get to the page
and they can see the links and everything instead of
having to scroll to see them. So how is it that I pulled this off? Well really this is possible
because of CSS Grid. So let's look at the code. I'm in Firefox, so I have access to the Firefox Grid Inspector and I'm in nightly in July 2017, so I can go over here to this layout panel and I can turn on the
header and I can also jump. You know, maybe I'm like
up here in the HTML. I can jump to this header element which is where Display Grid is. And I can see the grid how it is that I've defined this grid. So this grid is one column wide. There's no need to have multiple columns. This is really all about using rows and using the power of
Grid to distribute space in the vertical direction. So I've got several rows here. This first row is 3fr. The second row is minmax, 100 to 350 pixels. The third row is max content. The fourth row is auto
and the fifth row is 1fr. So what the heck does that mean? Basically it means that this
first row and this last row are being defined by fr units and the first row is
3fr, the last row is 1fr. And basically that means,
hey, there's other stuff in these middle three rows but once those middle three rows have the space that they need, we want the browser to
take the leftover space and can distribute it using fr units. So the first row is gonna get three units and the last row is gonna get one unit or you add three and one. Together you get four. So the first row's gonna
get 3/4 of the extra space and the last row's gonna
get 1/4 of the extra space. This is especially true because
these two rows are empty. If they has content in
them, they might behave a little bit differently but because they're empty,
the browser is gonna go ahead and get rid of the extra
space as we start to have less and less space
in the vertical direction. The browser's gonna take the two rows that are defined by fr units
and it's gonna shrink them smaller and smaller and
smaller and smaller, until they're actually down to zero. As it does that, it's always
gonna give the top row three times as much
space as the bottom row. And then the middles rows. So let's look at this. This where it says "Michael Pollan," I've got an h1 here and an
h1 has some margins on it, a top and a bottom margin. That row is being defined
by a max content height. Max content is a way in which saying "I would like you to be as
large as you can possibly be but no larger in order to fit
the content that you have." So in this case, it's basically saying "I want the height of this row to be the headline Michael Pollan plus the margins on that headline." The next row is this nav bar, and you can see on the nav bar itself, the nav bar seems to be taking
up more space than it is, but if you dig in, you can see that, oh, on this under list inside the
nav, I've got a margin bottom. If I remove that margin
bottom, for instance, then that row's gonna grow shorter or here I've got a list item and it's got a little bit
of a margin on it as well. If we were to set this to be
zero, then it would be even like the things would squish together. So the content inside of the navigation, the nav element, has sizing on it and that's what's creating the space that this particular row needs. But this is defined as, let's
look back here on the header, we can see our grid
template row definition. This row is being set to auto. So basically it's just going to be the amount of space that
it needs in order to hold the content that it has. It's gonna automatically calculate itself. It's not gonna be
smaller than the content. It's not gonna be bigger than the content. And then this house. The row that is the house. Let's look up here. So this is minmax 100 to 350, which is basically just saying "I would like you to be
a minimum of 100 pixels and a maximum of 350." And so in this case there's
plenty of space at the moment, looking at this example the
way that it's set up right now. There's plenty of space. The extra space is being
given to the fr units but the house itself is
allowed to be the maximum in this minmax definition. So that house is 350 pixels tall. Now if I start to make less and
less and less and less space what you can see is that the
fr units are disappearing. They're getting smaller
and smaller and smaller. The house, the Michael Pollan
headline, the navigation is staying the same. And we're gonna get to the
point where the fr units are down to completely zero. So there's no more space
that can be taken away from the two rows that have the fr units. And now we start to squish the minmax, which I find absolutely fascinating that by combining fr units
in a minmax definition, we end up with a kind of
two stage responsiveness where certain things squoosh while the other things stay the same and then once they become
zero then the next tier of things start to squoosh. So in this case, the Michael Pollan headline
stays the same height. The nav bar stays the same height but the house starts to get
smaller and smaller and smaller and smaller until it goes all the way down to it's minimum of 100 pixels. If we keep going, basically the house will stop shrinking once it hits 100 pixels and the Michael Pollan headline and the navigation's
not gonna shrink either, in which case the layout
will start to get overflow. And that's where a vertical
scroll will start to kick in. But otherwise, we can
play around with this and just get all kinds
of beautiful layouts. Here, let's remove the grid. Let's close the inspector. Let's close Responsive Design Mode and you can see again how it is that this responsive vertical layout, a really flexible layout, a kind of truly flexible
graphic design on the web will make this be kind of
beautiful at every screen size, no matter how big the viewport
is when a user hits the page.
