The Future of Web Layout


Greetings, everyone, and welcome
to the Future of Web Layout. My name is Jeremy Osborn
and the academic director of Aquent Gymnasium, which you
can find in thegymnasium.com. And here is our brief plug. What do we do? We offer free online
courses on topics such as web design, front end
development, user experience, and much more. And this webinar the latest
in our series of discussions with notable figures in the
creative web development industry. And today, I’m joined
by two of those– esteemed professionals Rachel
Andrew and Jason Pamental tell. I’m going to do some formal
introductions in just a moment. But let’s just talk a
little bit about the format. So I’ll be talking with Rachel
and Jason for about 45 minutes, and then we’ll leave 15 minutes
at the end to take questions from everyone attending. We do have a Gymnasium
staff in the background available for technical
support as to the degree that we can give it. There is a Q&A, or a
Question and Answer, button in your webinar panel. So you can feel free to add
those questions at any point, and we’ll go from there. Primarily, I’ll be
answering those at the end. So let’s talk a little
bit about our guests. We have Rachel Andrew, who
is a front and back end web developer, speaker, author– co-author of 22 books,
including the new CSS layout, a regular contributor to a
number of publications both on and offline, co-founder
of the CMS Perch, editor in chief of “Smashing
Magazine,” a Google Developer expert, and an invited
expert to the CSS Working Group. You can find Rachel at
rachelandrew.co.uh, and also on the Twitters as
@rachelandrew Hi, Rachel. Welcome, and thanks
for coming on. Hi, thanks for having me here. You’re welcome. And then we have Jason Pamental,
design strategist, speaker, and typographer who has been
leading design and development for over 20 years. Author of “Responsive
Typography” O’Reilly. Jason leads strategy, design,
and development at isovera.com, and teaches workshops, speaks
to teams and events worldwide. And you can find Jason on
the Twitters as @jpamental. Hello, sir. How are you? Good, good. We’re just waiting
for the snow to come. Yes, I should point out– so Jason and I are in the
Northeast in our home bunkers, where we are experiencing
another northeaster. This is the third in two
weeks here in New England. So hopefully we can
hold on for an hour. So, we’ll see. OK, well, so what I
wanted to jump into– so this is a discussion about
the future of web layout. And to kind of put
that in context, I think it’d be
worthwhile to talk just a little bit about the context
of some of the new developments in layout. And so, for our audience,
it’s possible that some of you were around when we
designed websites with tables, which all of us
here on the call certainly were. And then tables kind
of transitioned to CSS, and that took a long time. Or it felt like a
really long time. And it almost feels like
we’re at the precipice of another advance in layout. And that really is this kind
of combination of Flexbox, and Grid Layout in particular. And I guess the first question
I have is for both folks, and I’ll kind of throw
this to Rachel first. It felt to me like when
we made that transition from table-based
layout to CSS layout, it felt like it took
a really long time. Browsers took a while to get up
to date with all of the spec. This feels different. This feels like it’s
happening faster. Would you agree with that? What’s the reasoning for that? I think the thing with the
tables to CSS transition– people weren’t using CSS,
or they were using it for very small things. Your starting text
and what have you. So they were using CSS to change
the color of text, and so on. And so I think it took a long
time, because we’re actually asking people to adopt an
entirely new way of working– a completely new way of working. Learn a new language. That’s what we were
asking people to do. I think, to lot of people,
it seemed almost like a step backwards as well. Because the layouts
we were doing with CSS were simpler than the layouts
we were doing with tables. I’ve said before that I
think a lot of what we say is web design, is
weblike, actually stems from that technical limitation. We had a limitation
of what we could do with float snaps
to positioning, which is all we had. And so we ended up with these
very simple-looking designs. I think now, what’s happening
with something like Grid and Flexbox, it’s actually
saying, hey, look, you can do all these new things. And you don’t have to
learn a brand new language. You can start doing
some of this new stuff by learning just a few of
the properties of Grid, for example. And you can start doing, say,
a component to your design that relies on whitespace, or
relies on content distribution. Which you couldn’t do before. But you don’t have to
learn absolutely everything to do that. You can just start to adopt
little bits as you work. And so I think we’re starting
to see more people quickly adopt this stuff. But maybe they’re just
adopting in smaller ways. It’s not a case
of, oh, I now need to design all my
sites using Grid. I made a very conscious
decision back in the early days of CSS layout that I
was not going to build sites using tables for layout. Because I’d moved
away from that. And that was quite a decision. That impacted
everything that I built. Whereas using Grid layout,
it’s like, oh, well, it seems this component. It works with the
browsers we’ve got. I’ll have a go. So it’s a very
different sort of thing. Wew’re just transitioning
the way we work, as opposed to having to learn
something completely new and totally replace everything. I think one of the things
that sort of struck me in just actually watching your
talks over the last couple of years, and the stuff
that you’ve put out, like Grid by Example, was having
started working on the web early on, and studying
graphic design. Tables, to me, actually were
a way to work with a grid. And I think there are some
people who looked at that and then struggled with CSS. I know I did. I mean, I adopted it,
but I could never really think in the same way
of a whole structure. And Grid is sort of a relief
in that it’s like, oh, OK, so that’s the previous analog. It’s like the
better way of how I used to try to work
with tables, which was an adaptation of the same
way I would work in print. And then this has the advantage
of all of these other elements of grid gap, and
the way you can use it a component at a time
that’s so much more flexible. It sort of simultaneously
kind of allows you to bring an older– I don’t know, a
previously learned way of thinking about
layout and design in print into an adaptation that
works much better on the web. So I don’t know. I think this actually
has the potential to open the doors
more for people who have a more traditional
graphic design education to be able to apply what
they learned to the web in a little bit easier way. I mean, at least I hope so. Yeah, I think that’s true. Yeah. Well, let’s take
a step back, too. So there are probably
a lot of folks watching who have heard
about Grid layout, and maybe played around with it,
or maybe just heard about it. So it probably is worth
just taking that step back and just discussing what is it. And Rachel, if you could kind
of take that, and the simplest– I’ll just kind of preface this. So Grid layout is a new
addition to the CSS spec, which gives you a whole bunch
of new CSS selectors and rules that you can use to create
interesting layouts. But that’s the high level. Rachel, what’s your elevator
pitch for Grid layout? How do you describe
that for folks who’ve never heard it before? OK, so Grid layout is basically
a two-dimensional grid system for web pages. So unlike everything else
in CSS, where what we do is we kind of give
things a size, and we then kind
of push them around to make them line
up with each other. That’s how web designers
worked traditionally. Instead, with Grid layout,
what we do is we create a grid. And then the elements that
are inside your grid container can be positioned on that grid. Which gives a couple advantages. Firstly, they’ve all got
relationship to each other. So if you’ve got two
things next to each other, and the one on the
right is taller than the one on the
left, you can have them both visually look like
they’re the same height. That’s quite useful. You can also do that
sort of thing in Flexbox. But because we’re
two dimensional, you can also kind of control
whitespace in terms of rows. So you can leave an entire
row empty if you want to. Or you can leave
chunks of whitespace around your design, which
was very, very difficult to do in the past, because we
were doing this kind of “push things around and line them
up” approach to design. Which is pretty
fragile to start with, and not a very easy thing
to think about doing. You’re constantly
having to work out have I got 100% of my space
filled so that things don’t end up in the wrong place. Whereas with Grid, we
can actually just say, hey, I want this thing to be in
this cell of the grid, please. And it will go there, and it
won’t overlap other things, because you’ve put
it in its own cell. So it’s very different
to everything else we’ve had before. So what I’m going to do here– I’m just going to share
my screen for a second. So this is a site, Rachel,
that you put together called gridbyexample.com. So again, for folks who
are interested in just seeing some examples, this is
an excellent resource site. And again, and if
we look on examples, these are some abstract
examples of how to build a grid. You have some examples
of page layouts so that if you’re
interested in looking at a two-column responsive
layout with a footer, then you can go ahead
and check that out. So this is an
excellent resource. And I would suggest for folks–
we’ll talk about ways that you can learn this,
but let’s focus– again, so Jason, when you
first encountered Grid layout, what was your reaction? And how do you think
of it at the moment? I feel like I’m learning. Because I think while
I’ve been fortunate enough to see Rachel give
several talks about it over the last couple
of years, I haven’t had enough of a chance to
really work with it myself on my own projects. But now that we are
starting to put it into production on a couple
of things at Isovera, every time I spend– actually, incorporating
a bit of the examples into the responsive
web design course that I worked on with
you for Gymnasium, just a brief introduction
to Grid there. Every time I pick it up, it
makes more and more sense. And I start to see more and
more applications for it. And I think that one of
the things that I really loved when I started
to learn more about it was the min and max
values you can supply for an individual
element really replacing a lot of what many of
us have been clamoring for with container queries,
which is really wanting to address the layout of a
small piece of the layout, one component of content, and to
change the way that behaves at different screen sizes. Like having something lay out
side by side on a wider screen, or when it’s in a wider area,
versus something that lines up vertically, one
thing over another, like a photo and the
teaser text or title, when it’s in a narrower area. And by nesting grids– the great declaration
only applies to the immediate children. So you can have Grid
on a small component. Like Rachel was saying, you
can try it out in this one area and have it change its
behavior based on min and max. And then have a larger grid
controlling the whole page. I mean, I’m just
talking about the stuff that Rachel taught me. It’s amazingly powerful. What was eye-opening to me was– going through a
couple of examples starts to open up your mind to
how we’ve been hacking around at solutions for these things,
like lining up blog post teasers in a card layout. And you work
through the examples that Rachel put together, and
you realize you don’t even need media queries for that. And it’s kind of astonishing
how much less code you can write to achieve
these same outcomes. That was one of the things
that really jumped out when I started playing around with it. And it’s interesting, because– so I had this really
bizarre opportunity to use Grid years ago. So it actually started off in
the wheelhouse of Microsoft. And I had this strange
project I did for Windows 8 in which they were
doing a demo, and I was allowed to use Flexbox and
Grid, because it was a sandbox. It only needed to be supported
in Windows 8 systems. And so this was– gosh, this was six
or seven years ago. And I remember playing with
it, and I’m like, holy cow. You can write three
lines of code, and you can have this completely
flexible, responsive layout that is smart. I’m simplifying a little
bit, but it actually will allow you to generate new
content sections based on what you’re putting in there. It feels like an
intelligent system. You have to give it
some rules, but being able to create a
sophisticated layout with three to four lines of code
is really pretty remarkable. That was really how
I came across Grid, was with the [INAUDIBLE]
implementation. I wrote some stuff about that,
because I was just really keen that it got some traction,
and it was something that became more widely used. But yeah, there were a
bunch people actually using that Microsoft version
for various things. And you’d find people
talking about it. Just wasn’t really
getting out into the web. No, it wasn’t. It had the MS prefix
and all that stuff, so it felt very isolated. But it broke out of its
chains, and we’re now working with it today. And I guess here,
one of the things that I’ve been kind of
curious about it, is– so again, for the
folks watching, take our word for it if you
haven’t played around with it that it’s extremely efficient. It allows developers and
designers to quickly create these layouts. My question is– we
always are trying to keep the user at the center
of design, or we should be. And so I guess my
question is, will users– people using websites
with Grid layout– is there any difference? What are the benefits
for the users, if that’s a fair question? I’m just kind of curious
what your takes on that are. Or is there? Is it just completely
invisible, in that users who are using a
site with Grid layout just won’t know or care? Users shouldn’t have
to care about what is going on under the
hood of the website. They should just be
getting a good experience. I think that where
it matters goes back to this issue with the fact
that we can do complicated stuff with a very few lines of code. Because what is
noticed by users is if they end it with a horrible,
janky experiences as things are trying to load in, or people
are trying to do complex stuff, so they’re using a lot of
JavaScript work out heights. And you end up with this
nasty, janky experience, particularly for users on more
limited devices and browsers and so on. The nice thing with Grid is we
can do very complicated layouts that would have been impossible
without JavaScript before Grid. We would have to be doing
things like calculating heights and so on do this stuff. So we’re able to do these
very complicated layouts with very little code and
in a very performant way. And it’s that that actually
benefits the users. It’s not whether we can do
this design or that design. Hopefully that stuff is
completely transparent. Hopefully the users just
see a really great website, or a very useful application,
and they’re getting on with it. What is good,
though, is the fact that hopefully our stuff should
be faster, more performant, and rely less on doing
things in JavaScript that are expensive just
to do visual effects. We should be doing
all that stuff in CSS in a very performant way. So that’s what matters to
users, not what technology that the web designer
or developers used. I think, to build on that, if
we can do all of these things really simply with
less code, it means that, as designers
and developers, we can spend more time on
really refining the layout, or exploring new layout ideas. When we’re not spending so much
time building the foundation, then we actually can spend
time on a more meaningful experience. And so we can get away
from some squishy boxes and actually think
about real layout, and not just doing what we can. I mean, I think it’s
really similar to– go back 10 years or more. starting the late
’90s, we would have to build the content
management system before we could then start to
think about designing the site. And so that was a truth, at
least for me in my career, for 10 years before there
were enough good open source alternatives, or even
commercial products, to start to have that better
content management foundation to then start, so you’re
not building a login system. This is an extension
of that by not having to find polyfills, learn
some JavaScript framework, and find all these ways
to stitch it together to have the basics of a
layout that we wanted. Then we could
actually spend time on real design,
like real thinking, figuring out what do we do
with a really big screen. What do we do on the small
one that’s meaningful, that actually adds
to the experience. Yeah, absolutely. Right, yeah. Your point earlier
about graphic designers being able to now more easily
execute their vision in code. I think this is one of the other
interesting pieces of creating. And I believe Jeffrey
Zeldman was the first person to really hit this
home for me, is that some of the benefits
of having simpler code is that it’s going to allow
people who maybe are not as code savvy right now and
don’t want to deal with– let’s just say that
the profile of someone who is primarily a UX designer. So again, there’s
lots of UX designers who are completely
fluid in HTML, CSS. But there’s also a
fair number who aren’t. And so for things
like prototyping, I see Grid as opening
up this new world so that the ability
to quickly sketch out an interesting layout
that you have in your head if you’re a UX designer
or a graphic designer is so much easier. If you want to create something
with three rows and two columns, and then have one
of those columns 50% larger than the other one,
that’s very simple to do. At the same time,
it should be noted that it’s also really deep. There’s a lot in that
CSS Grid specification. I did a short article
on it a few months ago, and I think we counted. There’s 17 new CSS selectors? Does that sound right? Properties, yeah. So there’s a lot to it, but you
don’t actually choose it all. And pretty much it all comes
down to the same thing. I think that there’s been a
little bit of this kind of, oh, you know, it’s so
huge and so complicated, buy my course going on. And it’s not. And I think what I’ve
discovered, because I’ve taught workshops
now for three years, I’ve been teaching
Grid in workshops. I was teaching it long before
it shipped into browsers. And people who were not
already web developers grasped it immediately. Like, so quickly,
it’s so obvious. They’re just doing it–
they’re building layouts. Anyone with web
development experience is kind having to make that
shift on what we had before. And so in some
ways, this is easier for people who are new to the
industry, which is fascinating. And easier for people who,
yes, are that designer. I’ve just come from LA, where
I was doing a workshop for user experience designers. And most of them,
when I asked them what they wanted to
get out of the workshop right at the beginning, they
didn’t want to learn to code. What they wanted to
do was learn to be able to have conversations
with their developers about the stuff
they’re designing. And by getting them sort of
hands-on with the Grid code, and with tools like the
Firefox Grid Inspector, had being able to
actually play around, to be able to see how
grids looked on the screen, they then felt that
they had to have these conversations with
developers who were often telling them, oh, you
can’t do this on the web. They felt they’d
be able to go back and say, well, actually,
you know, we can. We’ve got the ability to
do some of this stuff. And that was really nice, to
sort of open up those ideas and see people
going, oh, actually, yeah, we can do this stuff. And there’s a way of doing it. And that was really good fun. That was one of the biggest
motivations in actually writing the book that I wrote
about web typography, was to actually enable
that conversation. And so I had these three
different audiences in my head, like the graphics designers
who do typography but didn’t know how to apply it, or
how much they could apply. UX designers who hadn’t
studied typography, give them an understanding
of why it’s important and what they can do with it. And then specifically
for developers, who very often would
come back and, I think, are still saying that it’s
too big a performance problem. We’re not going to do it. We’ll build in all the
JavaScript frameworks, and we’ll do all of
this other stuff. And we’ll put your
background video in place. But we’re not going to
load 100k of web fonts. And show them, here– give them this code. Show them this chapter. This is how you can do it and do
it well, performantly, and not kill the experience. And I think it is
facilitating the conversation. I think that’s what is the heart
of all of this that, I think, is so powerful, is just
showing people what’s possible and how to do it easily. Yeah, and I want to
actually talk about some of the other future pieces,
including the typography piece. But before I do that,
again, I’m going to share my screen again here. Couple of other
resources for folks who– and this maybe, again,
is a more visual example. So another resource
that is invaluable is the work of Jen Simmons. You can see some of
the work that she’s done at labs.jensimmons.com. And this is an example of–
and again, at this point, it’s becoming kind of a
notoriously famous example that she created a year,
year and a half ago. So this is a Mondrian
responsive grid layout. Which, again, when
you begin to change the width of the
browser, you can kind of see how that grid actually
reshapes responsibly, which is really kind of fantastic. So in addition to that, I
would also suggest that– Jen has a new channel
called Layout Land, which is on YouTube. Huge, huge resource,
and I would recommend if you want to learn not
just about Grid but other interesting aspects of layout,
such as the overlap and click path that are featured here. This is a great resource. So definitely check those out. Any talks that you
can see of Jen’s– I’m not sure for
how many years I’ve been seeing or talk about
graphic design on the web. I feel like I found
a kindred spirit when I saw her first talk, and
I’m so happy that I’ve gotten to get to know her,
at least a little bit, over the years. Because there are
not many people who have such a firm grasp
of really core graphic design concepts, but at the same
time are so incredibly knowledgeable and fluent in
the technology that enables it. So I mean, it is just
an incredible resource, everything that she’s put out. And just such a great
advocate for getting that back in the conversation. Because I think
for a long time, I think we can fairly say that
graphic design has been kind of a dirty word on the web. And that’s a shame,
it really is. The last thing I want to just– I’m going to head off
some of the questions that I suspect will be
coming, and some of the ones we’ve gotten. And this has to do
with can I use it now. And that’s not just a website. That’s also just a general term. Again, one of the
notable pieces, and I don’t have the
statistic memorized. Rachel, maybe you can help me. But I believe there
is this moment– you had posted a
tweet, I think, a year and a half ago that indicated
the amount of browser support for responsive web. And it went from 0 to 80? 70? What was it? Can you remind me with
that general number was? At the moment, for Grid, the
global usage is just over 84%. So that’s basically
all of the modern, mainstream web browsers now
support CSS Grid Layout. I10 and 11 support
the older Microsoft– the MS prefixed version. So if you add them, it gets up
to just over 87% of browsers. Obviously, you have to
look at your own analytics to know what you’ve got. But the fallbacks– you can
create fallbacks for CSS Grid very, very nicely with things
like feature queries and so on. I’ll dig out an article. I wrote a whole bunch of this
for “Smashing Magazine,” so I should dig out a link,
and we can share that. Just of how to do all the
different fallbacks and things. But there’s a lot you can do
to create a good experience for people without Grid. Without needing to sort
of rely on trying to make everything look identical. And just to– yeah, go ahead. It just went from 0%
to 70%-plus in a month. Yeah. That was just incredible. It landed in all those
browsers, really, at more or less the same time. Yeah, exactly, which is
fantastic and amazing. And it’s kind of
one of the things that I was referencing
at the very beginning about the difference
between today, where we have this
rapid adoption. Browsers are no
longer being released once every year and a half. We’re now getting these
constant, constant updates, and automatic updates,
and things like that. And again, so for the folks
who are watching– and again, there’s always this
immediate question of, yeah, this sounds
great, but can I use it? And the answer is yeah, you can. You don’t necessarily have
to build your entire website. Again, just as kind of a
semi-plug and kind of example that. So at thegymnasium.com,
which, of course, has are sites, our designer, Justin,
created this little section here under our featured courses,
which– oh, look, Jason. Here is your course on
responsive web design fundamentals. Conveniently nested within Grid. So this entire
three-column section here and the section below– so this
is like a little grid component within our home page, which
is actually based on open edX, so it’s an open source
learning management system. So it’s basically a
content management system. But we were able to kind of
put this little piece in here. It works excellent. There’s no problems
with older browsers, because we do have some sort
of fallback stuff that goes on. Now, again, I don’t
want to get too deep into the fallback thing, because
that’s almost a whole webinar, or another component. But again, it’s
kind of worth noting that there are some very robust
ways to allow modern browsers to use the Grid Layout system. And older browsers,
you can kind of create different
types of fallbacks. One other resource before
I kind of switch topics a little bit– or two more. So again, Rachel sent me
this link to csslayout.news. So this is another
resource where you can– this looks like an
email newsletter. Is that correct, Rachel? Yeah, it’s my is my
weekly email newsletter. Anything about CSS layout. I send out tutorials
and everything that I find when I’m reading
stuff during the week. That’s been a great reference. Yeah, this is fantastic. And again, the other
resource is Rachel’s book, “The New CSS Layout.” Which, again, talks
from our friends at A Book Apart,
which talks a lot about some hands-on
techniques for using that. So yeah, I definitely
recommend– folks, if this isn’t getting
your attention, it should be. These resources and the
implementation of Grid is just going to become
more and more widespread. So again, in terms
the– so Jason, you had mentioned the
typography piece earlier. And I’ve been teaching web
design and graphic design to a certain degree
for 15 years, and more. And way back when, when I
had my web design classes, I actually put in–
which I concede would be a controversial
statement– that typography
actually is layout. Would you agree with that? Does type just get
poured into a layout? Or is it the layout? I think it’s a little bit of
yes to both aspects of that. I think, primarily, I consider
the type layout in that type is relative to itself. So all of the
elements of type need to work together to establish a
hierarchy and a visual rhythm. And so there are certain aspects
of heading proportion to body copy to paragraph width. Line height– the distance
between each line of text. And even distance
between those elements. So there are aspects of
layout that are part of it. And it all is related
to conveying the meaning and accentuating meaning and
understanding of hierarchy and the content itself. But it also has
to fit in context. So the flip side of
that is, yes, you are pouring it into a
layout, where it will exist. But it can’t then lose
all of its own properties. So you put the text into
a blog post that uses– like Medium and so
many other websites, it’s a centered
a column of text, and then you have other elements
that may be wider or narrower. You still want the text
to not get too wide so that it’s hard to read. So it can’t completely adopt
the properties of the layout that it’s in, or else
you could end up– and you see this on a
lot of websites, where the layout expands as
the window gets bigger, and then you have these lines
of text that are a foot long. And what happens is it
gets really hard to read, because you can’t really
follow all the way across this huge,
long line of text, and then get back
successfully to the beginning of the next line. Right. So it’s a balance. It has to work well with
the things around it. But ultimately, if it’s text
that’s meant to be read, big, long chunks of centered
text is hard to read. Really long line lengths
are hard to read. So given that a lot
of the web is words, you have to start with the
content and design for that. And then, once it
goes into the layout, you have to strike that
balance of the layout of the page versus the
comprehension of the text. Right. And I think you
also probably see– this is happening
a little bit less frequently, but you also
see kind of this opposite– we haven’t really dove
into mobile, right? And the fact that, if
you’re looking at the stats, more people are accessing the
web via phones and tablets and things like that
than they are desktop. We’ve basically crossed
that line, depending on what stats you look at. So you still have
an opposite effect where you look at the
website on your phone, and that type may or may not be
optimized for that tiny screen. In the worst case
scenario, you’ve got the old school full
three-column website that you have to pinch to zoom. Luckily, we’re seeing a lot
less of that, thank goodness. But we’re still seeing this– if people are designing
type for the desktop screen still, if they’re
not considering the mobile experience,
then that’s a problem. So one of the things
that are kind of on the horizon– and this
really is kind of the future, because support for
this is slowly coming. So whereas Grid you can
use today, variable fonts. Let’s just quickly talk
about those, because to me, the combination of– we’re looking at the future– this is kind of my take on it. We’re looking at a future
that we can use something like variable fonts,
which Jason will explain in just a second, and
Grid, and kind of gives you this completely new
experience in a way, and optimized, again,
for the user who doesn’t have to know what’s
happening, but things work. So what are variable
fonts, Jason? If you could explain. So John Hudson, a
type designer, I think had one of the best
phrases about it. It is one font that
acts like many fonts. And so anyone that’s
worked with web fonts before, or installed them
on your local desktop, knows that in order to get all
the different ways you might use something like
Franklin Gothic, you might be installing as
many as 64 different files. For every single width
and weight and slant or italic version of it, that’s
a different individual file. So regular, bold,
italic, and bold italic, that’s four right there. So on the web, that
translates to file assets that have to be downloaded. And the variable font
format is a new format that can contain all of that
information in a single file, and do it in such a way that
it is far more efficient than the sum of its parts. So it might be 100k to
load those four files. That might only be 35 to
load the variable font. And what’s really
remarkable is that you now have way more than those four
options, because in that file, you can see and just use
CSS to get every weight, from the thinnest hairline to
the fattest display version, from the narrowest condensed
to the widest extended– even slant. And there’s a whole slew
of other axes of variation that you have available to you. And so that simultaneously
gives us a much greater design vocabulary, along with
a potentially much more performant implementation. So you had sent me
this– yeah, that’s an excellent
explanation, thank you. So yeah, it’s kind of one
font to rule them all, right? So this is an example you
sent me at v-fonts.com. Which, again, kind of shows
that you can scale the weight to the font– so there’s a
handy little slider here– as well as the width. And again, so there’s
a number of other fonts that allow you to do this. And so is the idea
basically that how– I know I’m just
doing this manually, but are these
things that are tied into the size of the screen? Or how does that happen? Well, that’s the opportunity. So I think if you imagine the
way we work with fonts now for a heading, you
might make the text much bigger and heavier. But that’s not the
only way to do it. You might, in some cases,
want to make it really big and really fine lined. And we’ve had to make
those choices on the web in order to deliver on
a good user experience. I think that it’s safe to say
that most people would shy away from loading more than 100k
to 150k worth of fonts, given all the other stuff that
we’re loading on a given page. Now, I think that you get
a lot more for that load because they’re cached, and
you can use them on every page. And it provides a significant
amount of design voice for what you’re loading. In context in our
modern environments, with everything else
that’s being loaded, that’s a frequent argument
against loading more stuff. What’s pretty common
in print might be 10-plus different weights and
variants in one magazine cover. So they’re using all this great
variety of width and weight to draw your attention
in different ways and emphasize things
in different ways. And we haven’t
gotten to do that. We’ve been too constrained
with performance. So while we’ve had all of
these challenges with layout, we’ve also had all of
these challenges in how do we create an
interesting experience, one that really can draw you in. And that’s part of what I’ll be
talking about at An Event Apart next month in Seattle, is
how we can gain that voice while addressing some
of these performance concerns in ways
that we’ve just never been able to do it before. Yeah, that’s awesome. So thank you for that. I see these two– not just these two
specifically, because there’s lots of other pieces. But again, to me, what this
points is a future in which, again, you can really start
thinking about design. And again, if you want to
have a multi-column grid on your 27-inch desktop that
has custom fonts that are appropriate for
that screen size, and that same website looks
great when you bring it up on your phone– truly great, like you really
get to choose and design that experience– then this is kind of
where we’re headed. That was one thing I
totally didn’t get to. Addressing the small screen. When you have access to all
of the width and weight axes, we could make the letters just
slightly narrower on the phone and get a better line
length, Typically you end up with maybe only
35 or 40 characters per line, which is even fewer
characters than you’d get in a newspaper column. So it makes a really
choppy experience. But if you make the characters
just a tiny bit narrower, it’s pretty easy to get
another 10 characters per line. And all of a sudden,
your reading experience becomes much more fluid. Interesting. And that can also address
things in different languages, too, with longer words. So there’s a whole
bunch of things to it that can make the mobile
experience better. Cool. I want to switch to
some of the questions. I want to make sure we do that. But I want to circle
back to you, Rachel. So in addition to some of the
work you’re doing on Grid, and some of the
interesting things that are happening with
variable fonts, are there other
things that you’re excited about that are
coming up in the next nine months, a year? Or are you just kind of like,
man, there’s so much in Grid? Or are there other
pieces that you’re interested in or excited in? Oh, generally everything. I do generally love what is
becoming possible in CSS. And the fact that, as
the CSS Working Group, we’re looking at
the sort of stuff that people are trying to
do out there on the web, and maybe they’re doing
that with JavaScript. And not that
JavaScript’s a bad thing, but there are a lot
of these things that are just more performant
if we do them in CSS. And so, you know, sort
of solving those things. I was playing around with– I’ve got a bunch of demos for
things like scroll snapping. So you can kind of mirror that
app-like experience of snapping from screen to screen. That stuff is really neat. And I just love the fact that
we’re solving the problems that people have. And they’re showing us they’ve
got those problems by coming up with solutions to them. For instance, Houdini, which
is sort of exposing these APIs, that’s going to allow
most people to experiment and play around and build
their own solutions, or even at least build a kind
of prototype of something. Which then hopefully we can
then bring back into CSS and create in a way that
then is available to everyone without you needing to be
able to hack into this stuff and build it yourself. Can you explain that to me? What is Houdini, exactly? Besides the magician. Sort of very quickly,
basically Houdini is this [INAUDIBLE] sort
of expose the lower level APIs behind how
layout and things and so on– all sorts of
things that in the browser. And the first parts
of that are starting to come out into browsers
now that allow people to– say, something like
the Masonry type layout that people would like
to be able to build. But able to put that
together themselves using– other than reverse
engineering what browsers do, having real APIs so they
can actually do something, though it’s consistent
across browsers. So I think it’s allowing people
to really experiment and show us what they want. And that’s something
I care about a lot, and why I wander around
talking about this stuff, and talking about to
developers and designers. And saying, does
this work for you? Can we have some feedback? Maybe we can make it better. I care about that. I care about that for the
future of the platform. So it’s that sort of
stuff that excites me. How can I better bring back
to the CSS Working Group and to browser vendors,
what people want? That’s something that
I think is really significant over the
last couple of years. At least to me, it’s
become much more apparent how to have a voice
in this process. And I think that’s in no
small part to the work that you and Jen
have done, Rachel, in raising that awareness. And I think we’re trying
to do that as well with the variable
font specification. Putting things on
GitHub where it’s a little bit more accessible. Inviting more and more
people into the discussion to recognize how much
impact we can have. As designers and
developers, influencing the way the web develops
is really tremendous. We need more voices
so that we can get people into that discussion
and see how we can shape it. Yeah. Yeah, and that
question comes up, so we’ll actually see
that question show up. And I’m seeing tons
of questions coming into this, our control panel. So I’m not going to be
able to get to all of them. What we typically
do is we circle back to some of these
questions after the webinar. So just for everyone
who’s on the call, this webinar will be made
available to everyone for free in, I’d say, five to
seven days is usually when we put it out there. And I always like to
follow up on the questions, because these
questions that come up are pretty interesting,
in my opinion. And so I just want to
share a couple of those. And so, again, this one comes
from Patrick W. “I’m excited–” Looks like my control
panel’s in the way here. “I’m excited about being
able to align the grin relative to typography in ems. Are there any guides
or examples of this?” Again, I’m going to guess
that Grid by Example might have something on this. Rachel? I don’t think I’ve
particularly got anything to do with typography. on I’m trying to think
if there’s anything. Yeah, I can’t think of
anything offhand that answers that simply. Well, I think one, at
least, thing to experiment with is I’ll usually set a
maximum line length in ems. Because that’s relative
to the size of the type. So as the type size
changes, then so does the relationship
in that maximum length. So if you’re looking to get
around 75 characters per line, there is a CSS size
unit called CH. It’s not evenly
implemented yet, and that is supposed to give you
a number of characters. But setting it in ems,
around 38 or 39 ems is going to get you
about that same value. So thinking through that kind
of relationship in the type, you could apply that same sort
of thinking to your layout and sizing things in ems,
rather than pixel values or percentages, so that
you could have min and max values for elements
in the grid that are sized relative to the type. So it takes a little bit of
adaptation and experimentation, but I think that you could
get there pretty easily. Yeah, I mean,
there’s also things like being able to use
things like min content and max content or fit content
that’ll let you have something that it’s become the
size it is until it gets to a certain point. And then you can
say, no, actually at that point I
want you to wrap. So we’ve got a lot more
sizing ability in Grid layout, and in modern
layouts in general. It does require some
understanding of how big things are on the web. Which I think is
probably the big thing that people need to
learn, because it’s different from dealing with
everything in percentages. Speaking of big things
that people need to learn, so that kind of leads
into this from Jesse, again, who’s asking
exactly that. I think that obviously
we’ve made the case for Grid and, to a degree,
variables fonts. And what other things? Are there core
pieces that you need to know before you start
diving into this stuff? Or what are the foundations,
or what else needs to happen? I would think for
layout, it’s sizing. It’s actually what the different
layout methods are really for. Understanding actually
right at a basic level, what actually is a float? What’s that for? What should we be
using that for? Just having a proper
understanding not how we’ve used things in a hacky
way, but just actually what are these different
layout things to do. But I say sizing is going
to be very important. Things like writing modes. Understanding the fact
that new layout methods care about the writing
mode of the document. That’s really important
to understand. Otherwise, things
are quite confusing. So in terms of CSS, it’s those
things, those core fundamentals of how layout works
are really key to be able to sort of embrace
and use all that new stuff that’s coming up. Awesome. Jason, anything that you
wanted to add to that? Variable fonts? [LAUGHTER] I think one of the things that’s
maybe a little bit under– I don’t know, understood, I
think, is in responsive images, as we’re layering
these things in– we had mentioned
container queries before. And one of the use cases
that people talk about with container queries, meaning
that the CSS is impacted by the size of the container
like the card layout itself. You can impact the responsive
image using source and source set in order to define the rules
by which things are replaced to supply just the right image
in far more granular detail than simply by the
size of the window. It can also be by the
proportion of this thing to the size of the window. So I think actually
digging more deeply into how source and source
set works in responsive images is a really useful thing
to really dive deeply into as you’re working
through these layout things in order to get the
best performance. Yeah, I would agree with that. So Jason’s course on
responsive web design, which you can sign up
for free, has a forum. And we’re seeing
a lot of that sort of organic curiosity
about responsive images, and particularly the
sizes and source set. There’s a great article that
the folks at the Filament group just posted, I
think, two days ago, where they go into this
interesting discussion of using sizes and source set. And they create this very cool– almost like a
magnifying loop, so that you can place your
cursor over an image, and it magnifies it. And it’s you and
it’s all being done with the sizes in source set. Just a little tiny
bit of JavaScript. So it’s very cool. As I mentioned before
in our pre-show, we got a lot of interesting code
specific questions for this. And I’m not going to
go into all of them. This was a question from Rob
M. Can I apply display grid or display Flex to elements like
body, section, article, instead of IDs or classes? Rachel, do you want
to take that one? Absolutely. You could apply to
any selector you like. The reason to use a class
would be that that then doesn’t tie the
thing specifically to some HTML element,
which might change. You might want to have the
same layout on, I don’t know, a larger component, and then
also on some small element. Which actually is better to
be an article than a div, or what have you. So that’s the reason
people tend to use classes, is it make things more reusable. But it doesn’t
matter what selector you use to create your grid. Right. And one of the things we
didn’t talk about too much was the contrast between
grid layout and Flexbox. And so, again, I
don’t want to dive too deep into that, because
there’s lots of articles and stuff that talk about it. But the way I usually
describe it is grid layout has a true x and y– so horizontal and vertical– ability to create
complex layouts. And Flexbox is really
not as powerful. It’s usually only
one dimensional. So either horizontal
or vertical. Rachel, is that a
fair characterization? Or how would you– Yeah, I mean, the
spec defines Grid as a two-dimensional
layout model. So that’s you want to align
things as a row and a column at the same time. Whereas Flexbox is
one dimensional. You are working in
a row or a column. And you’re sort of pushing
things around and distributing space across that one dimension. But if you wrap
your Flex layout, the things on the second line
won’t line up with the things above, because you’re only
working in one dimension. So that’s the rough difference. The other difference is, do
you want to define everything on the container, on the grid
container, set up your grid, and things will go into it? Or do you want each item to push
around and distribute space? Because the second way is
much more of a Flex way. You’re saying, well, let’s
make this item as big as it wants to be, and then
we’ll distribute the space. Whereas Grid, you
are setting up a grid and placing things on it, which
is a different way of working. Here’s another Grid question. “How do you designate fixed
elements using CSS Grid Layout? Is this even possible?” “Fixed” as in position fixed? Or “fixed” as in fixed width? It wasn’t specific enough. So I’m thinking–
yeah, I don’t know. Your guess is as good as mine. When I think of fixed element–
yeah, so it could be either, right? Maybe if you want
something to be positioned at the bottom of
a row or a column, that’s relatively easy to do. Yeah. You can also use absolute
positioning and so on alongside Grid. It maybe works– you’ve got to
figure out how that’s working. There’s examples on
my site of doing that And if they are talking about
just fixed sized elements, then yes, you can create fixed
tracks and flexible tracks in the same grid without
any problem at all. OK. And then this one again. “Is Bootstrap 4 an option
for Flex and CSS Grid with columns and rows? So I can take this
one a little bit. There’s actually a whole
other webinar about frameworks and Grid Layout and all that. But in many ways,
Bootstrap 4 now does offer support for Flexbox. However, I don’t believe
there is something based in for CSS Grid. Because you don’t need it. Yeah, exactly. You could use the rest of it
Bootstrap if you wanted to, stop using the grid, and
use Grid Layout instead. You wouldn’t need any
support in Bootstrap. Because the reason that we
use things like Bootstrap is that they do the
calculations for us. Because Flexbox is
one dimensional, you still have to do this
thing of setting everything in percentage sizing
to make it into a grid, because it’s one dimensional. So actually, Flexbox
is much closer to doing a floated grid than
it is to doing grid layout. So if you want to
use Grid Layout, and you still need
to use Bootstrap, just stop using the grid. And use Boot Layout
for your grid. That’ll work absolutely fine. In fact, you can
drop a Grid component into a Bootstrap layout
perfectly happily. That’s fine. I think that’s the
important thing to note about Bootstrap
or anything else, is that they are modular,
and you don’t have to use everything about it. If you simply want to use
Bootstrap’s way of styling form components, you can do that. That was the intent
from the beginning. It wasn’t an all-or-nothing
kind of thing. And then we had this
one from Michelle. Any tips for using Flexbox and
Grid Layout on a site running a content management system? E.g., WordPress– or in this
case, Perch and Drupal– with a theme? So just in general,
how does the addition of a content management
system complicate things? Does it make it easier? How does that play? It depends on how
terrible the CMS is and how awful the theme is. Realistically, it’s like if
you’ve already got some code, and you want to introduce
some other code, it’s going to depend on how well
the existing thing is built. It’s going to be harder if
you’ve got something that’s very messy, and
it’s very difficult. For instance, if
you’ve got stuff that’s got very specific selectors
all over the place, it’s very difficult to insert
something else in there without things leaking through. There’s all sorts of reasons
how badly built theme could make it hard to implement anything. But if you’ve got something
that’s fairly well built, and you want to drop,
say, a gallery component you’ve built using
Grid, for example, and you’ve just get
a big content area, and you want to put
the– that should work. That should work
absolutely fine. There shouldn’t be
a problem with that. But obviously it really does
depend on what you’re using. I have got my own
CMSes I’ve built, and we did that
because we wanted something that didn’t output a
lot of junk into your markup. That was a driving force
behind building Perch, because a lot of CMSes do
spit out a load of extra stuff that you don’t want. But I can’t speak
for the solution. Well, we ended up at Isovera
working over the past year on integrating Pattern
Lab into a Drupal 8 theme. And so we did
everything we could to get all of the markup
out of the Drupal templates and into the Pattern
Lab patterns. So we had a lot of
the junk cleared out and we were able, on this
project I mentioned earlier, to start to bring Grid into that
in a very modular and isolated way. So we’re able to bring it
in on the component level, try it out using it a
few different places. And it’s now kind of
working its way out into the rest of the theme. But we had a known
starting point, so it was a little
easier for us to do that. And this is going to have to be
the last question, because we are at the end of our time. So we had mentioned this
a little bit earlier, and this comes from Amy C. “How
can I help making CSS better? What are the ways to
contribute to the CSS spec?” So I know, Rachel, you’ve
got some interesting things to say about that. But How can people help? All of the CSS Working Group
stuff is now on GitHub. So all of the specs
are on GitHub. And, crucially, the issues
against the spec are on GitHub. Which means that you
can go to GitHub, and you can raise an issue
against any spec and say, I think that this
should behave like this, or I’ve run into a
problem like that. And it will be listened to. It takes a long time. There’s an awful lot of
CSS, and there are actually very few spec editors. And so you can post
something and not hear anything for months. That doesn’t mean
it’s been ignored. It means we’ve not got around to
discussing that thing just yet. Because there’s just
an awful lot of it. So in general, if anyone
raises anything against a spec that I’ve got
anything to do with, I’m co-editor of
multi-column layout. So if you raise a
multi-column layout issue, I will promise to look at it
and get that discussed when we’re discussing those things. And generally, there’s
an interest there. The other thing you
can do is search and see what’s is
already being discussed, and add your thoughts. There’s people discussing
Masonry type layout and so on. Go and add your use cases. It is wanted and needed,
and people do care. It’s just the process is
slower than you might like. I think the important thing,
especially for non-developers, to understand is that when
we talk about these issues, that is simply a
discussion of a thing. And so by searching for it,
looking in github.com/w3c, searching in there for the
CSS Working Group drafts and the issues, you can find
the discussion about the thing that’s not working
the way you want. And it is that documentation
that is so key. It’s so helpful for people
to weigh in and say, here’s what I tried, and
this is what happened. And I really wish it
would work this way. And post some screenshots. Post some notes. It is that documentation
and explanation of what it is that we as
designers and developers want that will help
shape that discussion. Yeah, I would
agree, that’s great. And to everyone who’s watching,
and at any point, I would say– realize that in many ways the
web design and development community is actually
much smaller than you might think in some ways. And so, even though it’s
huge, folks generally in this industry– I feel like a lot of us are
drawn to this because we like sharing, and we
like discussing the work, and it’s open. So don’t feel intimidated. When you go to conferences,
or if you go to meet-ups, if you’re writing a blog post or
sending emails, like feel free. Everyone is an equal member of
the community, is my opinion. Some of us have more
experience than others. But in the end, don’t feel
intimidated, is my take on it. This industry changes
daily, weekly, monthly. Nobody knows it all. Trust me. We all learn by viewing source. Yeah, I just shared a
link, if perhaps you can put that out to people. I did a talk last year for
CSSconf EU, which was entitled Where Does CSS Come From. And that really just talks
about the whole process, and how we create CSS, and
how it gets into browsers. That might be
helpful to anyone who is interested in finding
out what actually goes on at CSS Working Group. So that it is on YouTube,
Where Does CSS Come From. We do have to wrap this up,
because we’re slightly over. But what I’d like to
say, first of all, is thank you to both my guests. And this was fantastic talk. I wish it could go on forever. For the folks who
are watching, we will be putting the link
to the recording shortly, and you can look at
our Twitter feed– @aquentgymnasium is that. You also see it on mine, so
@jeremias is my Twitter feed. And the other thing
that I’ll be doing is– we got a lot more
great questions, and they just kept
on rolling in. And so what I’d like to do
is create a response article to some of those questions. And we’ll post the link along
with the video to this as well. So thank you both. This was fantastic,
Jason and Rachel. Thanks for taking your time out. Any last pieces? Anything that you
want to promote? I know that you’re both
doing Event Apart in Seattle. I’ll be there as well
doing a web panel. So that’s in two weeks. Anything else that you want to
talk about before we sign off? Well, if people are
curious to find out more about variable
fonts in depth, I’m going to be doing a full
day workshop with Front End Masters in June. And I think Front End
Masters will have information up about that shortly. But middle of June, and then
subscribers can see it online. Or if you want to come hang
out with me in Minneapolis, that would be awesome. Cool, excellent. And Rachel, in
addition to the book, anything else that you
want to talk about? Yeah, I’m speaking all
over the place this year. I’m trying to get
my site updated. Rachelandrews.co.uk/speaking
is where I list where I’m going to be. Come and say hello if you happen
to be at any of those events, and let me know what you think
about Grid or anything else. It’s nice to talk to people. Excellent. Well, thank you once again. Enjoy the rest of your day. I’m going to go shovel
some snow, I think, and we’ll go from there. So once again, thanks so
much for participating, and thanks for
everyone who watched. Thank you. Thank you both. Take care. Bye-bye.

4 Replies to “The Future of Web Layout”

  1. Thank you guys for posting this! I'm super excited because I missed the initial broadcast and I'm glad I was able to catch this.

  2. Awesome discussion… Now, on to Rachel's talk where she answers a bunch of questions I've had for years!
    Rachel Andrew: Where does CSS come from? https://www.youtube.com/watch?v=cYGOv2ToZjY

Leave a Reply

Your email address will not be published. Required fields are marked *