Speaker - Jen Simmons

We finally have the tools necessary to create amazing page designs on the web. Now we can art direct our layouts, leveraging the power and tradition of graphic design.

In this eye-opening talk, Jen will explore concrete examples of an incredible range of new possibilities. She’ll walk through a step-by-step design process for figuring out how to create a layout as unique as your content. You’ll learn how Flexbox, Grid, Shapes, Multicolumn, Viewport Units, and more can be combined together to revolutionize how you approach the page — any page.

Transcription coming soon

Good morning. Yeah, I’m going to talk about art direction. And I’m going to start with a little bit of a confession, that, you know, for the longest time, I don’t really know that I knew what art direction ask. I mean of course I know what art direction is, it’s that guy. It’s the job that that guy does, where they talk about a brand, something, big corporate project with a fancy logo, and you got to make sure the brand gets enforced properly. At one point I had this idea that while I was working on a project where I really shaped my sense of what art direction could be, and changed my mind about what I thought it was. And at this point, I really see art direction as intentionally participating in a conversation. I just put four slides up on the screen. I know it’s early, but —

Why did I use Helvetica? Like, because it’s art, and that’s what you do when you’re talking about art, you talk — you use Helvetica. I had a dorky lightbulb for some reason with the color yellow, so I made my next slide yellow to go with my lightbulb, but whether I meant to or not, I triggered some sort of association in your mind as you started to see these three. I don’t really like that style, though, so maybe I would have wanted to pick — you know, this is much more up my alley, this kind of feeling and look. So let me open up keynote and pick up one of the keynote templates. That one might be more my personal space, but it’s weak. If I came here and put all my slides in this template t I wouldn’t really communicate what it is I want to communicate with you today. So let’s see, what could I do with you instead? This is a much better choice of ha font and a much better choice of a layout, and you know, a little embellishment to kind of communicate what it is that I want to communicate today.

So that process of thinking through those choices and thinking through what is it your project, your website, whatever it is you’re making, like, what it is you want people to feel, what kind of feeling to you want to be connected to? That’s art direction. And I think in the tech industry, we’re really bad at art direction. I don’t know that we really know what it is. I remember when the Apple watch was first announced, the tech blogs that follow all the Apple news, everybody was freaking without, what is this white cube that’s going up next to the building Apple is going to give their keynote? Or when the Apple watch logo came out, I remember looking at this logo, going, does Apple not have anyone who can Kern? And people complaining on the blogs that it didn’t look anything like the Apple logo. It should look like a tech industry logos, because as you know, you’ll have an IPO exit if you have the right tech industry logo.

But the reality is, that Apple wanted to set itself up in this world. Apple wanted to communicate in the world of fashion and fashion logos and they made a logo that fits very well into this neighborhood.

And they weren’t building a permanent white cube, they were putting up a fashion industry tent, A la Apple style so it was perfect and it was square, but it was a tend. And all the people who came to the event understood immediately what that was. Apple was communicating with them, not so much with the nerds who write blogs about Apple news. They set themselves up to be able to do this kind of work, to have this kind of communication, this kind of story about this new thing called Apple watch. Art direction!

Editorial design is another phrase that I think is really helpful as we start to look at layout, which is what I talk about today and what is it that we want to do. If you search online or search even better in paper books for the words editorial design, you will find 100 years of ideas and theory and drawings and pictures and examples. In this book, editorial design, cath Caldwell and YolandaZ said the vast majority of editorial design has at its heart the idea of communicating an idea of story through the organization and presentation of words and visuals. So layout is used for the idea of communicating an idea of a story.

And you might think, well, I don’t do editorial. You know, I don’t work in a newspaper. I make an app. We’re so special, we make apps.All of this applies for apps, as well. Here are two apps. Applications as they used to be called or programs, computer programs as we used to call them.

[5:00]

On the left we’ve got Google docs which is a web-based program. These both are telling stories. Google docs is kind of telling the story of like, I know you’ve got some important busy stuff to do, this is a good place to come, I will be here later for you, you can share with your colleagues and I’ll be sturdy and you can count on me, right? Even though choices of like kind of not so beautiful things is like telling you, I’m a very practical thing. You can trust me.

Where byword has more of a story of “Hello, author … I know you have something very important to write. Hush, get rid of distractions and come to me and I will help you write your very important story,” right? There’s almost nothing on those two pages but that’s what’s getting communicated through the stories, through the choices, through the typography, the color, and the layout.

The idea of communicating, the idea of a story, through the organization and presentation of words and visuals. Here are some examples from this book. It starts out showing this particular newspaper or magazine, like how beautiful this is. You can look at this article, and you can see, OK, it’s about architecture, I think in Asia, and the photos themselves, the things that are in — being photographed, and then the layout of the text, and the like the space between the photographs, supports one story. Supports the idea of what’s going on. Without reading anything, you could start to guess what is the story about. How awesome architecture has become in Asia. And you look at the web version and I think the authors of this book were like, let’s look at how awesome the web version is but the web version is terrible. It’s kind of messy and it’s kind of very familiar. It looks like a website.

It looks like this. Right? We are stuck in a habit where we tend to just do this layout over and over and over again.

Or this layout.

Where you need to find out how unique. Our content is always laid out in three columns. This is a bit where you talk about how you’re so unique from all your competitors, your website looks the same, though.

Or gold goes, which of these two possible websites are you designing? Steven waller put this cartoon. He just got up on stage and ranted for 15 minutes with how incredibly bored he is with web designing. Boring!

I think some of the reasons we’re in this phase are the grid works. The original one that took off was 960. They basically all do the same thing, they use a 12-column symmetrical grid where each column is the same width as all of the other columns. And it’s almost as if we tricked ourselves into believing that this is the only way to do a layout. If you do a layout this way, it’s best, if you don’t do it this way, it’s wrong. And I just don’t think that’s true anymore. I think one of the reasons we started using frameworks in the first place is because the handwriting of flows layout is hard and especially it was hard five years ago, ten years ago, because of this little strange thing about the box model, where if you were in some browsers, you would say, OK, I want my box to be 400 pixels wide and oh, I’m going to add some padding of 25 and 25 to it and all of the browsers except for Internet Explorer said OK, I’m going to make your box 450 pixels wide. Well, i.e. said, that’s dumb, you asked for a 400 pixel white box. I’m going to make you a 400 pixel white box and if you add padding, fine, you can change the box, whatever, it’s going to be 400, but mean while every other browser, right we didn’t really understand what was going on. We just knew it was really a pain in the ass and we hated IE. There’s a solution to this. We can’t change what the browsers do by default, because if all the browsers did that, they would break every every old website and that’s bad.

[10:00]

Instead, you can just put a star selector to apply to everything, and you switch your box sizing to border box. I just wrote a blog post about this in 2012. It’s a great technique, I recommend it and if you do this, then suddenly when you say I want my box to be 400 pixels wide, the browser, guess, what, it makes the box 400 pixels wide. And you can hand code floats. So if you gave that up five years ago and you want to try again, try this again. You won’t have the bugs you used to have.

But we really did kind of get stuck on this 12-column symmetrical layout and when responsive web design came along, kind of a gazillion people made their own, slightly different, but basically the same responsive version of this grid framework. And kind of the ultimate, I think that we’re in at the moment is that we’re using, a lot of folks are using bootstrap. There’s lots of stuff in bootstrap that maybe you want to use. You do want to maybe consider whether or not you need it all or if that’s actually just slowing down your website by having all this bloat that’s getting downloaded that your users aren’t actually using. There is a good reason to have a system where you work, especially if you work on a big team where everyone isn’t just running around doing everything in scratch by themselves, but you’ve got some sort of a custom framework. But I’m a big believer these days of you know, open up bootstrap, crack it open, look under the hood and see what’s there. Steal ideas and copy and paste code and make your own framework that you like to use.

But one of the things that’s in bootstrap is this hidden framework and it’s kind of turned this into hey, which layout do you want to use and you probably recognize especially the two that are on the left, yeah! , layout should not be a multiple choice question. And we shouldn’t let our tools determine our design. We should make our designs, and then create the tools or find the tools or hack the tools or whatever, get the tools we need to make great projects out of those designs.

But I think when we pick the tool first and then we stick the designs inside the tool, you know, we only let the tool dictate the designs and it’s a multiple choice question and we end up with this really bad place.

Flexbox has come along, which is another tool for doing layout and everybody and their brother seems to be making a Flexbox 12 column symmetrical grid framework which I’m like whyyyyyyy, no, let’s not do that.

CSS grid with a capital G. It’s this use. And I have a feeling we’re going to start to see more, use my 12-column symmetrical grid-based grid. No. So what are we going to do if we decide to drop these tools and we want to develop something ourselves for our project? What are we gonna do? We don’t have to start from scratch. There’s 100 years of graphic design theory and practice examples to be had that are out there outside of the web industry and I’ve been buying kind of every book I can get my hands on, researching, looking, trying to figure out, you know, what are some great ideas. And really you could pick up any one of them, flip it open, look at a page and so oh, my gosh, that’s a great idea. Here’s a few pages just real briefly from a couple of them.

Negative space. You can use negative space as a map to guide your user, reader, audience, viewer, and guide their eye to where it is that you want them to go. Guide your reader — another way to think about this: You don’t have to put everything up in the top left corner in order for it to be seen. You can put things in other places on the page, and use visual hierarchy, you know, if you saw this in a magazine, you’re not going to be confused about where to start reading because of that giant O. Or you don’t miss the headline because it stands out in a way that they’ve type set that headline. You guide your reader with visual hierarchy.

Create an oasis. Things are so busy and loud and crowded on the web. You can use layout to create an oasis, and just kind of calm things down and to stand out to your readers.

[15:00]

There’s an amazing future coming, I believe. Here’s the official timeline. This is the evolution of web page layout. We started out with the no-layout layout. Because there were no tools and everything was just on the page. Then we started using HTML tables. Then we startled hand coding floats. We needed to separate our content from our styling and have this great separation of concerns, yes. So we kind of figured out one layout and we taught it to each other. And then frameworks came along and then we had like 6 layouts. But there’s amazing future coming where our kitten is happy unicorn and we can do all kinds of new things.

I’m going to show you a bunch of examples. They are at labs.jen Simmons.com. You might want to say how did she do that, I want to see the code, you can go there and find the code, play with it, all the examples are responsive, always, see how it is that they change from size to size. Some of them are mirrored in a — all of this in in GitHub repo.

So there are big pieces and little pieces, I’m going to talk about both. There are some big specifications that really will fundamentally change what we’re doing. There’s also a bunch of little pieces that can be used in profound ways. Sometimes honestly as I’ve been doing this work, you might get overwhelmed thinking does this mean I’m supposed to change everything? I can’t change everything. No, you can’t change everything. Sometimes you can do just the smallest shift. One little detail and it can have a pretty profound effect on what you’re doing.

So initial letter is one of them. Drop caps get used in graphic design. We’ve been trying to do them on the web for a while. It’s tricky. You can use the pseudoelement first letter to grab the first letter in a paragraph. That’s handy. And then what? Oh, you apply a bigger font size? You know, you’re in one browser going OK, 2.7, 3Ms and you open up another browser and it’s the wrong size and you end up with these awkward spaces where things don’t line up. I like the one on the right because they’re like, yup, never gonna line up, we’re going to put in extra space and it’s fine.

There’s another thing called raised caps. If you see nested in here, there’s one line of code, initial line of code, I’ve grabbed the first letter using the pseudoelements, I’ve changed the color, the bold and the margin, added a little margin on it. I make it bigger by using initial letter 4, which tells the browsers hey, I want this to be the size of 4 lines of text. You figure out the math. If the text size changes for whatever reason, if someone else comes along in this project and changes the line length, no big deal, because you’re a robot and robot are good at math.

You need this top. Safari 9 has a weird bug has a weird bug, and so what do you want to do if you want to launch this, deploy this today, what happens in the other browsers, if we cross out the two lines of code that the other browsers doesn’t understand? OK, cool? What happens? Oh. because the browser remembers, it understands the rest of the code and it will run the rest of the code. Well, that’s unacceptable. We don’t want that, so what can we do? We can wrap all of this, this whole block of code, in this support statement. It’s called a feature query. It has the same kind of shape as a media query. You need both a top letter and a value. Which in this case is 4. What would happen if you put 7? Does it matter? No, it doesn’t matter. But it does need a value. Sometimes you’re just testing other things like display flex and display grid. So you need the whole statement.

And you’re going to have an or. In this case I have an or. Because there’s aprefix version so I need to test for both. It’s logic, you can test to see, in CSS, whether or not this CSS property is going to be supported. And then if it understands the@support statement and it knows that it knows that particular thing, it does support it, then it runs the code. If it understands @supports and it does not understand this particular property, it skips the property. If it doesn’t understand supports at all, like IE7, for instance, it also skips the whole block of code. It’s not supported in everything, but we can still use it today. It’s called a feature query and it’s shaped like that. Like I said.

[20:00]

And I think this is what we’re going to be using when we start using grid for layout, CSS Grid. Another property that I want to show you is a tool, another tool is view port units:

So here I’ve got this website that you can see on the right that I’m showing you where no matter how big the window is, at any given moment, when the browser, you know, the content gets loaded, that whole, the dirt, headline, everything is exactly the size of the view port and when the person starts scrolling, the article is right there, below the fold, right there. How did I do that? Well, I’ve got a header. H1 interwrapped in the header so on the header is a display flex and on the H1 I said margin auto, that makes that headline vertically centered. If you use display flex, you use Flexbox, Flexbox redefines what margin auto mean, and it not only centers left to right, it centers things top to bottom and then I put on the header, height of 100 view port units. VH and you get this result. No Javascript involved at all. Very, very, very fast.

Any place that you might use an M, around a percent or a pixel, in any part of your code, sizing fonts, creating margins, anything, you can use view port height, view port width, min and max, which means, we can control the fold. It means we can size objects in the space that’s actually available before scrolling starts, or even after scrolling, maybe you know, people scroll and halfway down the page or three-quarters of the way down the page, there’s some sort of a new block of content, a new pane of content. And you can center things, you can put — you can do some layout, knowing where the edges of the page are.

Then I’ve started combining viewport units in other kinds of things with this property called object fit. So photos, right? For many years, our photos were just the size that they are on the page, fixed width, perhaps we could call them. Then we kind of switched the way that we think about sizing photos in responsive web design and we put a width of 100% in the image, which in order to maintain the aspect ratio, it automatically makes it much much taller as it makes it much much wider, but what if you really want to size something with viewport units? Here’s an example. What if we want to do a kind of thing they do in a magazine where half of the say is the photo and the other half is content? Well, I could size the photo with grid hopper, using viewport units. I don’t want to squish Grace Hopper’s pace.

So now you can apply this property called object fit. And I’m using object fit cover here, where the height of the box and the width of the box are both being specified and the photo itself is not getting squished. It’s staying its own size and then it’s getting cropped. And you can — with object position, I think, you can adjust and move. Right now it’s cropping based on a center point right in the middle of the thing. You can adjust the way that it crops. And here’s a new version of that same example, where that sort of — those two boxes are always the height of the viewport and the width of the viewport, her face is never squished, and there’s the article. With some multicolumn layout. I made a demo for object fit. This is a demo that shows you what each of them does, one if the photo is bigger than the box, and two, if the photo is smaller than the box.

[25:00]

Click path. Did anybody here start doing graphic design before computers, when you would — this is how I was trained, you take a piece of paper and run it through a wax machine and you go over to the art board that you had drawn and you’d take an exacto knife and you’d try to make things straight, but of course nothing was ever perfectly straight. That’s how life was before computers made everything completely and perfectly straight. There’s some beautiful graphic design that’s been done where people play with that. They’re like, you know what, we’re making jazz album covers, we’ll see if we can make things a little bit off, a little bit tilted, a little bit not straight. Part of what’s boring about laying things out on the web is we’ve got this level of perfection that sometimes sort of sucks all the soul out of things.

But you could just alter that ever so slightly with clip-path. Perhaps that might work. Here I’ve got clip-path and I’m clipping that box to maybe not make it so square. If I were doing this for the real world, maybe I would make it even more subtle. And using these numbers that are set in percents so that it’s responsive. Or you could use polygons and have more points and chop things off the box. You could cut things into circles. There’s a lot people have been doing as well, with gradients and other kinds of ways. Maybe you have a headline but maybe you use a diagonal and slice the bottom of the box into some sort of a diagonal shape.

And then CSS Shapes will let us, once we have something that’s not a rectangle, flow content around that thing in a shape that’s not a rectangle. In this case I’ve got this photo of a tomato that I’ve floated to the left. Shapes require you to float something. They only work when you’re floating an object, so I’ve floated the photo to the left and then I say shape outside circle and whatever flow content is coming after that float gets flowed in a shape that is a circle. Or here, shape outside polygon. I’m cutting a polygon around this image and the flow content is flowing around that polygon.

And you might think, wow, that’s a lot of numbers, where do I get that math? Here’s a tool. There’s a developer tool that’s right now a plugin for Chrome, we’re actually looking for a more robust one to put permanently into Firefox where in this particular version this tool, you click this button, it’s a shapes and you get yourself a little arrow tool and it turns your browser into illustrator.

AUDIENCE MEMBER: Whoa!

And you can grab these dots into corner points and move them around. It’s cool, right? Kind of blows your mind. Things don’t have to be rectangles anymore. We can do other things. If you want to install this into your copy of Chrome, it’s called the CSS Shapes editor. It was made by folks at Adobe. You can find it in the atom store and add it to Chrome.

So so far we’ve dropped and raised caps, nonrectangular shapes, images specified in both dimensions and sizing based on edges. There’s always going to be a limitation of what is or is not possible on the web. It’s moved that limitation into a different place. But I hope developers and designers can recognize, oh, yeah, there’s new things that we can try on this project.

I want to talk about the big pieces, flexbox and Grid are two new giant hammers that we can use. So let’s look at some examples. One of the things that we do on the web a lot is put groups on photographs. Here I have photos, they all happen to be different sizes, different aspect ratios, I put a tiny bit of CSS to restrain them to the same width because I told them to be, but otherwise, you can see that some are very tall and some very wide. This is not a layout. What are we going to do for a layout on a wider screen? Let’s float everything. All … right. This is what happens when you float stuff and they’re not the same height. You end up with all this empty space that you don’t really want. I think we’ve been calling this the float drop problem. And so what have we been doing? Cut everything into a square. It’s not that squares are better, it’s just that this is what we did in reaction to the float problem.

[30:00]

So this is kind of boring. What can we do instead? Well, one thing we can do is use flex box to do what Flexbox is good at. Flexbox is. In this case, I have drawn a row. And if your browser was infinitely wide, the row could be infinitely long. But of course they’re not infinitely long. Sometimes you can have it wrap. You each row is calculated separately as if it’s the only thing in the universe and then it calculates another row. So here I’ve done that with this. I’ve thrown some code at it and now I’ve got all my images, kind of each row is sizing itself. And the boxes are being sized by the available space and I’m using object fit cover to go ahead and crop those images. Which may or may not be appropriate getting things cropped for a certain project. It doesn’t use any Javascript at all.

So it makes it much faster than a layout that uses Javascript. The other thing that Flexbox can do is set things in a column. It can think about life as a giant column and in fact, most web pages are infinitely tall if needed and if I wanted to wrap in the column direction and I’m talking specifically right now about our writing mode, the writing mode that we’re used to where we’re reading from left to right. Everything can be flipped to other writing modes, but in our writing mode, if I cap the height of an area of a box, the container, then I can start to force a float. Which is what I’ve done here. I’ve actually capped the height of this group of photos so there is no vertical scrolling, and then that ends up triggering a horizontal scroll, which we are not used to on the web, although we are used to inside apps. Apparently that’s a cool thing, horizontal scrolling in an app. So that makes me wonder, maybe we want to think about this on the web. And as I start to change the height and everything kind of reflows around, just an interesting idea to see what’s possible.

But really maybe what I want is to have a bunch of columns where it automatically rejiggers, it’s always the width of the browser window, and there is no sideways scrolling and things rearrange themselves so that the columns are vaguely even with each other and if new content is added the columns are rejiggered so they’re vaguely good with each other.

You know what’s good at that multicolumn? It’s been around but we tend to not use it so here’s an example using multicolumn, where like I said, the things will switch automatically to — there’s no media queries in this layout whatsoever. I’ve told it, hey, I want my photos to be around 250 pixels wide, so it’s calculating how many columns to draw and then it creates this thing at the bottom. It’s — I think multicolumn is a tool that we really should be thinking about using on a lot of projects.

And then the big one is CSS grid layout. CSS grid lay outis not in my real people browsers at the moment. If you walk up to a random person and ask them to open up their browser, they will not be able to see anything using CSS Grid layout. But it’s coming next year. It’s coming soon and it will come all at once and our lives will change. It sees the world in two dimensions, it understands that there are both rows and columns simultaneously and that makes it very different from Flexbox. Many of you have tried to do a layout like this in Flexbox and this happens where the bottom row has a different number of items than the ones above it. They grow to fill up the whole row because that’s what Flexbox wants to do if you’ve tossed a certain type of code at it and lots of people have walked around, including myself, why did they write this spec like this? This is dumb. I said that right to the person who wrote the spec and she was like, yeah, you should be using Grid. Grid is the solution to that use case and will let you size things so that the bottom row understands what the sizes are in the rows above and makes that row — the columns in that row be the same as the columns in the rows above it. But you don’t have to make everything be a perfect little square, perfect little rectangle. We could let rows and columns get sized now by the kind of content that’s in them and the content in one row or column might make that one row or column bigger and it will make it bigger all the way down the page, which opens up a lot of possibilities.

[35:00]

We also in a very different way from the frameworks that we’re used to, Grid is similar to those frameworks and I think it’s going to be a challenge for us to wrap our heads around how it’s different and not assume it’s going to work just like bootstrap or any of the other frameworks we’ve been using. In those frameworks, the size of the content and the size of the cell that the content goes into is the same. In grid you can really have cells and size and rows that are sized based on the content. In this picture I’ve drawn it where it’s all floating up to the top of the page because that’s how we’re used to thinking about the world. But it doesn’t have to float up to the top of the page. You can use alignment properties. All of those properties that you may know from Flexbox actually are also Grid. We don’t have to have everything on the top crammed up on the top of the page.

Floats. I’ve been like reaching for a metaphor, this is the one I came up with for understanding floats. Imagine a giant bathtub with thousands of bars of soap that float on the top of the water. We’ve been living in a world where all of our content is crammed up to the top of the page like a bar of soap on in a bathtub. We can tell it that we want things further down in the rows, we can open up the top of the page.

Here’s a little bit of code. You can see the lines get numbers, and then you can place items. You don’t have to place items. The algorithm. There’s an auto-placement algorithm that will place things for you, but if you want to place items, can you place items and there is some syntax for how that works. So in one of these books, there’s this jazz, it’s very famous, actually jazz at Lincoln Center poster for 2007, that all of the work that was done that year seems to show up in these books, and the moment I saw that, I thought oh, my gosh, can you do something like that on the web with grid? Yes, yes, you can.

This is a very literal transfer of that particular example to this page and it doesn’t really make sense in the web for the logo to be at the bottom and this is not a poster, this is a web page. But I just wanted to see what happens. And you could check out this example and see how it works. It’s pretty — I think it’s pretty amazing.

There is, like I said, an auto-placement algorithm, so in this next example I’ve told the CSS is saying, hey, there’s certain boxes, in this case, 3, 4, and 7, 12, that I want to be bigger than the other ones. I’m not going to tell you where I’m putting them. And it starts placing things, every time you ever use grid, it just automatically starts placing items into rows and then drops down and makes another row, and in this days, it says 1, 2, 3, 4, OK, 4 is not going to fit in that space, so I’m going to put it down into the next row, so there are these empty gaps. You can also tell it to close up the empty gaps by using grid-auto-flow: Dense. So here’s an example of that. You can see the top row is in order because it’s just natural that it would be. But once it gets to 6, it can’t put 7 where 8 is, so it puts it in the space where 7 is. But then it goes back and sticks 8 in the hole that it left behind and it rejiggers itself. If I got rid of the numbers, it would seem like a perfectly natural way to lay out this gallery.

I just gave a workshop on this the other day and I was showing this example of this very famous painting and so I did it as a web page, where everything is a separate — each cell is a separate image, with a border around it. And then I used grid to lay that out. And make it responsive. This is what I did yesterday. Responsive Mondrion.

Just to see what you can do. I really feel like we’ve got to, like, reach back for some art school something and something. I didn’t go to art school — I went to film school, I didn’t go to art school, but yeah, what were they talking about what they got obsessed about cubes? Let’s think about that again.

[40:00]

If you want to check out these examples, you need a browser that knows Grid. So the easiest way to do this is Firefox is slightly ahead in its implementation. There’s three different versions you can download, and this last one, nightly.mozilla.org. The easiest way is to go download nightly at nightly.mozilla.org. This is you can use any of those six browsers and everything is behind a flag, so if you know how to flip the flags and turn on the flags, you can turn on Grid and compare the implementations between those browsers. It just works without having to manually flip the flag in nightly and also in safari technical preview. Edge and regular safari. It’s in progress but not in those browsers in any way that you can see the new implementation of Grid in any of those browsers. It can get kind of confusing when things are not happening the way that I expect them to to, and it really is much easier if you can see what you’re doing, so my colleagues and I at the Mozilla developer relations team built an add-on, just a quick hacky little project but it’s now out. It’s done, you know, and we are working on tools for Firefox developer, like DevTools for Firefox that will be even more robust. But here it is.

You can install that add on and you get this button in the upper right corner that you can click and it will give you a chance to see the lines for what’s going on and see oh, yeah, that’s not what I meant to do, and rewrite the code more easily.

So when I give a talk like this and people are all excited about the new stuff, the question calls comes up, well, how am I going to use this now when IE still exists? And this really gets into the nature of CSS and the technique known as progressive enhancements.

You can use something like CSS Ships even though it’s in Chrome and Safari and not in EMG and Firefox. You can use this today. In fact, I used this in production several years ago already. 60% of your audience perhaps will see what’s on left and 40% will see what’s on the right and the people who see the square cutout. It’s not as pretty but it’s a not a big deal. It didn’t break the website. They probably don’t even know that they’re miss had gone anything. Or this example, maybe you want to do that trick sand make your header be 100% of the view port height. That’s not going to work in old versions of IE. You know what they’re going to get? They’ll get the short header. It’s fine. You don’t have to wait your new techniques hostage until everyone is off old versions of IE.

Here this only works in 12%, so the other 88 percent are going to get no dropped cap. No big deal. So here zero percent are going to get the grid layout. But it’s fine, I could go ahead and ship this now, and 3%, 8%, 15% of the market starts to get grid next year, then the layout would just start turning on for them.

I have another talk called progressing your layouts where I go in and show you step by step the tools you need and. Of course I don’t have time to go any of that right now, but you could go in and see that video just be smart about how you write your code and it will automatically work and not work at the same same time and some of your users will get it and some of your users won’t get it and no one will have a bad experiencement.

Lab of Jen Simmons.com as I said, all of those examples are there now. Also at the top of the page there’s links to everything I just named. Top of the page there’s a link to the progressing your layouts talk. This is a link to a talk I gave last year. If you want to see more examples and more ideas that I have about this obsession I have these days about layout, you can watch my talk from last year. I really think that this is a time to experiment and to see what is possible. We don’t know what’s possible, so just sort of open up our minds and play around. If you’re a designer, or if you’re developer, you might be thinking, well, none of the designers are ever going to email me PDFs with this cool stuff so I think a great thing to do, and maybe you’ll have to do this on the weekend is go ahead and get — you know, code up a simple example and walk into an office or remotely or however you communicate and show people, look, what’s possible, we could actually do a shape that’s a curve with text flowing around a curve and your designers will get excited. If you’re a designer, I recommend if I know CSS start playing around and see what’s possible. And if you don’t know CSS buddy up with a friendly developer that does know some CSS and come up with some ideas together and code some things. We as an industry need to do that we need more people experimenting. So I am building a place called layout.land where we’re going to have challenges and galleries and show each other what’s possible and get some action going that isn’t you’ve got to ship this ticket next week. So thank you very much.