 Hello, hello. Hi. Thank you for the lovely introduction. Thank you to the sponsors as well. So, yeah. I can click. That's not my slide. Too many buttons on your address. Ah, that's better. Yeah, so my name is Niki. I'm a technical manager at a company called Future Learn. We're transforming access to education online. Before I was a technical manager, I've been a web developer for a long, long time, more than a decade, as Sarah said. I don't want to tell you how much more. But I'm definitely on the developer end of the sort of designer-developer skillset. I've got an appreciation for design. I don't think you can work very long in this industry in front end without having that. But I'm not a designer, so I have to work really closely with designers to ship the products that we build. I can't do it on my own. So I've developed this really keen interest in understanding and helping developers and designers work together more closely and effectively. So this talk is about one way of doing that. So today I want to talk to you about developers and designers who want to push their imaginations to the limit and push the web to its limits. And I'm going to talk about how one of our most used solutions, this grid layout that we always fall back to you, has served us really well for a really long time. But the world has also moved on and so can we. So this is what we're going to cover. Web design is getting boring. I always feel a bit like I'm putting myself out there when I say that. It's a bold statement and I always like to say as well, hashtag not all websites. The JS Oxford website is really good, really usable. I love the little timeline of the events that are happening today. So we're just going to look at a bit of the history and a bit of the context to look back, to look forward. And then some final things. Oh, practical tips, of course. Sorry, the reason you're all here. You skipped over the middle bit. And then finally some sort of things that I stumbled upon when I was doing some of this work and things to look out for. So let's start by going back. Why even grids? What is the point of them? We've all been using grids and building them for some time online and offline. So why are they the go-to tool for page layout? To answer that question, we need to go way back. This is the pyramid text. It's dated to around 2300 BC. And it's the first example of human writing, of human communication that I could find online. It still kind of blows my mind that humans existed 3,000 years ago. And we were trying to communicate with each other and we wrote this stuff down. And I can find it on the internet and show it to you. We can see what they wrote. This is so cool. But I would like you to note, I think this is a one-column layout. A lot of columns, but it's all one-one-column. A few thousand years later, 568 AD. This is the Birmingham Curran manuscript. Again, beautiful, stunning. I can't believe we have access to this kind of stuff. Still one-column. This is page one. This is page two. Finally, 808 AD. We finally get 3,000 years after sort of chipping away on those stone walls. We get to the two-column layout. Well done, humans. And I think the benefit that you can see immediately here is that there's a lot more information on this page. It's a lot more dense. This is a medieval manuscript text. And you can see the benefit already. This is the sort of marginalia that came a lot later than the original text of the book. Somebody's been able to sort of start arranging related concepts next to each other. They can be separate, but they can still be connected to the main text that they refer to. In the early 20th century, the art movement exploded. The grid system itself was named. This is a book called Grid Systems in Graphic Design. And that movement sort of exploded and flourished. And this starts to look a lot more similar to the kind of modular component systems that we use today. Massimo Bignelli designed this uni grid in 1970 something, for exactly that purpose. So that the output, the products that this grid was used to create were more consistent, were easier to create and easier to reproduce and quicker. And this still helps the National Park cartographers today. They use the uni grid to design the maps for the park, keep their layouts readable, make sure that one element is not overbalancing another. And this has a practical benefit as well. Looking at this, it just looks really good. That's useful because it helps, it makes sure that people, when they're looking at the maps around the park, they're more likely to stay looking at the maps for a longer time and hopefully absorb more of the information they need to stay safe and have a good time. It helps get their message across. But there are some bad examples of using grids too. Like this. So this tweet is from more than two years ago now. I don't think a huge amount has changed. I'm really sorry to kind of keep bringing up this example because it is a little bit snarky I know. But I think it just does show that you can take, relying on this grid too far, this can be a problem. And I'm not knocking it. The reason we do this is because on many levels it works. It's modular, it's easy to reproduce. If you use the uni grid it makes the maps really look really good and make sure that you take that information and stay safe in the park. But it's also really boring. You look at this and you can see the clues in the name. It's called the CSS box model. You can have the margin on the inside or the outside because it's a bit different from the CSS box. They're all the same shape. Communication and design is this kind of human impulse. We've been trying to do it for 3,000 years. It has this kind of long and rich history. And I think it's a shame that we don't make more use of it. And then things like this. No problem. It's really good that you can go on Squarespace and get yourself a website now. Anyone can do that. Fantastic. But again we're starting to lose the benefits of this kind of 3,000 year old history of communication when everything starts looking so samey and sort of off the shelf. You run the risk of not getting your message across effectively as you could. So the only reason I'm really even giving this talk is that through like many conversations over many years with friends, designer friends and developer friends of mine at work and they say, hey, we've got this box, we've made this layout. What can you do to make it look a bit more interesting? And for the last 10 years all I've been able to really say is, well, I could put round new corners on it. It's really satisfying. Nobody's really pleased with that answer. And the only reason we even have the ability to put images and use CSS in browsers is because designers got frustrated and they wanted to add colour and they wanted to use layout and use fonts and not be restricted. It doesn't have to be just rounded corners. Let's think a bit bigger. So I'm not the only one who thinks this. This is Jen Simmons. She's amazing. She's like one of my heroes. She said this during a video discussion at Ballista Park last year. She's one of the people who's doing really amazing work in improving graphic design on the web and improving typographical design on the web. She's a designer and developer advocate at Mozilla, a member of the CSS working group and she's really pushing this idea not just by doing talks and by telling people about it but actually working with the people who are implementing this stuff to make the web better. Then she said this, too many things look like medium, too many things look like web design out of 2007. 10 years ago. Too many things look like copies of each other. Everybody's bored. So there is a way to make design better on the web. It's that way apparently. So once I started thinking about this, it was in my mind, I just started seeing it everywhere. These are examples of graphic designers sort of pushing the boundaries of their layouts and you can do really interesting things like the kind of line of text following the dress or this really striking art direction that really draws you in and makes you want to read the article. I know we don't need enough of that with headlines and stuff but I think this is much nicer. These are all from the same issue of one magazine. Somebody there really likes this style. But the point of all these examples is that print can do this and for decades we've been saying the web is not print and we shouldn't try and make things all exactly the same but if we have the technological ability now to do it in a sort of inclusive, accessible, practical, scalable way then I think that we should be taking advantage of that. So if we did want to do something a bit more interesting like this and we didn't have CSS shapes, how could we do it? How have we done it in the past? Well, I'm sure you're familiar with this. You could go to super old school just buying all the text in an image. I'm sure you know all the reasons but I think that a lot of webcomics are still published like this which I think is a real opportunity for somebody out there a really interesting industry that would really benefit, it would be really great if someone came along and sort of gave publishers more options for doing this kind of stuff and make them available to a much wider audience. If you didn't want to put all your text in just one image you could have every line of text kind of position manually with spans and paragraphs that are accessible maybe, there's probably lots of other ways that you can think of as well that aren't great. So that's kind of where we're at before CSS shapes like the current state of the art. I think you can tell where I'm going with this. Let's get away from these boring rectangles. We're stuck in our old ways and stuck on these grids but actually there's something that can make things a lot more interesting for us and a lot better. Grids are great for all those reasons and you've put the time in to learn how and why they work and you have the foundations and you know why it's like this and you can break the rules so you can break out of the grid and there is a way to do that. Hooray! So we're on to the practical tips section. The first thing I'd like to talk to you about shape outside. Shape outside applied to an element makes the text flow around that element in the shape that you've chosen. Hopefully quite obviously named. The caveat on this at the moment the element you're floating around must be shaped. The element must be floated. Apparently just by that today that might change. They may be fixing that up in the spec. I don't know when. Random rumours in gossip. The element must also have height and width so it must have layout. So we're just going to be covering the top three values today. I had to sort of play around with it that you can't already do with floats so I don't think that's particularly interesting. If you want to have a go and have a play then you should. An ellipse I think is like a type of circle. I told you I wasn't a designer. I got some razor eyebrows when I was doing this work with a run through of my designer sort of colleague sticking to it. So let's have a look at shape outside a circle. Hopefully this is unsurprising to you but it aligns text around a circle. These properties are all very wrong seal. So this is what it looks like. This is a very simple example. If you want to have this kind of red dot layout you can do it however you like. And then you just have this kind of one liner to get things lining around the shape. It's really nice, really simple, really easy. And if shape outside is not supported you just get your standard sort of rectangle boxy text that you always had before. You haven't impacted your accessibility or your readability. A circle is easy right? Polygons. So simplest example of a polygon is a triangle. This is what it looks like. Again this is like really simple example so you can set this up however you like. I've done it like this. And you just have this one liner again to add the shape to the property to kind of get this nice alignment. But you can see that this is like a little bit more complicated. There's a circle or a square I guess if it was insert or whatever. It's getting a little bit more complicated. Again if it's not supported it doesn't matter, it just falls back great easy. Another example of a polygon this has got the corner cut off and again you can see when I'm starting to make the shape I've had to sort of plot an extra point to kind of figure out where I want the text to kind of go. So it's starting to look a little bit more complicated now like oh I've got to keep all these numbers shaped in a square with a corner cut off like what do I do? I guess worse. So I didn't have the space to put all of the points on but it basically goes like on the other side of the room. Polygons can have infinite points I think. So it starts to look a bit more scary and it starts to look like a bit of a pain in the arts and a bit of a barrier to entry. Like if I have to do all this work I might not be bothered. How can I convince my designer colleagues to help me with this. So we're very lucky that a whole bunch of people have done a whole bunch of good work to make this a lot easier and there are some tools to help us make these shapes. So I have a video. I don't have any sound for this. Hopefully this is okay. This is Firefox nightly but this tool has just landed in Firefox I think so everybody has access to this now. So I've got my dev tools open and I'm going to go and select the element that has the date applied to it which is the cat. And when I do that I'm sorry it's so small you start getting these kind of rules out here and there's a tiny little button next to the shape outside and if I click on it I can see the points that I've got. It's like oh my god this blew my mind when I first saw it. I'm like look man I'm a designer. So the lovely thing about this is that everything updates in real time here so once you've kind of sat on you can just copy those over and straight into your code. These tools also are not just for shape outside I think there's like a grid editor in there as well if you want to do CSS grid and I think yeah this is just Firefox so yeah go and have a play with that because it's amazing. The power of the browser now is just phenomenal. If you don't have Firefox there's an editor for Chrome as well it works in very similar way. I don't know if this one has grid I think it might be just shapes but yeah it does kind of the same sort of thing and you can kind of pick your points up and move them around. So that's it for CSS shape polygon shape outside polygons but I found when I was doing this I was playing and making up some examples even with these tools I was still finding there's like a little bit of extra work that sometimes I don't know if I can really be bothered to do. So there's one last value I wanted to tell you about with shape outside but I found out about it it was just the cleverest thing I've ever seen and that is the URL value so this is a kind of similar layout to the one we had before with the cat same effect as before but way less code this time we're not going to set all of our points out directly or play in a browser with it or anything like that but we're still going to get this but we're still going to get the same effect ah the magic is rude you use a transparent image channel so you need a transparent PNG or a transparent SVG it also works with both of those and you just pop your URL to your image in there and there's this new property the shape image threshold so 0.5 there means all the pixels that are more than 50% transparent are the ones that it will pick up on and flow around so I found this as a PNG this is a way more common use case in any way that you'll be aligning text around an image rather than just a random shape so you may as well have the browser do all the work for you I'm very lazy especially because you've already had to do the work to prepare the image somebody's had to go transparent out the bits they don't want or what have you so you've already done that work you may as well use it rather than duplicate it all in your points so that's all about shape outside let's have a look at browser support when can I actually use it so ok it's not too bad just coming in Firefox which is great, I'm very excited about that edge under consideration never going to be an IE well over time that's not going to become less of a problem so yeah it's not supported in all the browsers so we do have to be a little bit careful about how we're using it and think about our progressive enhancement maybe consider the fallback the great thing about this is that this is fine it's a one liner it doesn't impact your performance to add it it looks really good you don't have it, it still looks really good this is the sort of thing to watch out for just kind of thinking through all the cases and what might happen if things aren't supported so that's it for CSS shapes we have some friends who also want to come and play CSS clipping so you might be familiar with some of this it works I think we're kind of the same way that it doesn't like Photoshop or a sketch or one of those editors using a path to draw a shape and then the things inside the path are visible and the things outside aren't let's look at some examples before we go on to those the syntax is exactly the same as CSS shapes I love that they've done this I think this is really clever load the barrier to entry again these names, these shapes are called the basic shapes in the sort of geometry spec of browsers slightly confusing CSS shapes, basic shapes but once you've got your head around it it's great you can just use them for everything very helpful so this is the kind of thing that you can do and again like I did this in the browser tools I was just kind of playing and dragging things around worth noting before we dive in I think as well the clip path works on SVGs as well as HTML elements so I'm just using it on an image here on any other element you could do but they do work on SVG as well so I'm sure you can imagine the kind of things that you could do with this all kinds of different shapes this is really simple again and you don't have to prepare your images you just do it all in the browser a lot of times when I've been doing this kind of thing with designers it's been like quite a round trip and a lot of back and forth like they'll make an image and I upload it and then we look at it and it's not quite right and then they say okay well give me another image and then I upload it and it's in the browser and it's just so much quicker giving designers a lot more control over the sort of end result I think a lot quicker as well so this is a real world example of clip path this is the website that I work for Future Learn this is what the amazing learner growth team used to build a new module for their homepage which is that top kind of banner aspect and they wanted the steps we called them the Future Learn steps to kind of wiggle down between those images and at times also reflected on our branding although not apparently on this side so that's nice, we like that this is how it looks on mobile all of this stuff like CSS clip path and also CSS shapes uses any CSS unit so it can be responsive I think they use calc and percentages to make this work rems, ems, whatever you like whatever works for your sort of situation and again it's a one liner you have to kind of work at your points to create a design so we did that and we were happy to do that I think we did a mock up in code pen or something to kind of prove the concept but because we did the shape and the code we didn't have to go back and forth with the images constantly it's a quite nice time saver and again we were quite happy with this fall back of just the straight lines just like edge something that it doesn't have so that's clip path on HTML elements I'm sure you're going to see more of this later but it gets really exciting clip path because SVG is just XML right so you can put text nodes in it you can start doing stuff like this that's the image behind the text I just think this is very exciting I'd love to see people doing more interesting layouts and interesting headers and interesting text with this kind of stuff because it's SVG as well you could have multiple nodes inside you could have multiple kind of windows onto one image I sort of have this idea that if you had a big image with different windows on it into different areas I'm not entirely sure if that would work but it sounds like a good idea let's look at browser support for clip path a lot better this is good worth noting again this is for HTML clip path on SVG works pretty much anywhere that SVG is supported so pretty much everywhere but again looking for your fallbacks making sure that your progressive enhancement is perfect for practical tips there's a few final thoughts that I had while I was working on this stuff while the team were working on the homepage module things that I think are just important takeaways to kind of remember so the first thing I think is really important is that all of this stuff not just CSS shapes and clip path but like anything that you're using that isn't supported everywhere it's not all or nothing just because some of this stuff is not supported in every browser it doesn't mean you can't use it and there's a nice tool that can help us do this so what do you do if you've made a really nice design but it's a little bit more complicated than this these are really simple examples on purpose to help build up our understanding how these things work and I did that on purpose triangles and circles they look really good but actually in my team in my production website it's going to be a little bit more complicated so going back to the example that I showed you earlier this is what we wanted to build and we were quite happy with this fallback when I showed you this example before actually I was again simplifying it there's something wrong with this picture very subtly wrong but we were not happy with this fallback as it stands if you look at it in the browser or you have the eye for it you can see that it's not perfectly symmetrical and this is a problem we weren't actually happy with this and we did it so we added some margin so that they do actually line up great but now we don't want the margin if the clip path is applied like I'm starting to get really confused it's okay we can get back to this we just reset the margin inside a feature query so there's a new thing you might have heard about it the supports keyword we say if clip path is supported then we take away that margin because it works a lot like the media query syntax is very similar and I just wanted to reiterate as well after saying all of that you don't have to do this if you're happy with a sort of slightly unsymmetrical fallback then that's completely fine if you need to do some shenanigans and resetting and overriding then you can just include those in that supports block and that's fine too a fallback won't be affected the important thing to note here is that we don't have to do it it just defaults back to a rectangle the supports keyword is for more when you're in a slightly more complicated real life situation and you want to finesse the detail you only have to use supports if the natural fallback is something you're not happy with so next step building on that I suppose is to say this can be a bold statement and a bold layout or it can just be a really small enhancement but the important thing to remember with all of these things is that you have to design patterns so this is from a real website an example in the world and one thing I wanted to highlight here is that all of the sort of real world examples that I've seen have the ragged edge of the text on the right hand side and not the left and that's really important in left to right languages reading from ragged edges on the sort of starting end of the line is really difficult your eye can't like sort of go back to the line so it's more difficult if you have dyslexia or anything else that sort of makes it harder for you to read but it's difficult for anybody so don't do that the final thing I wanted to say was this kind of yeah use it or lose it I guess this looks a bit dry and it is this is a spec for CSS shapes I'm not really recommending that you like go and read it but I think it is kind of important to keep an eye on stuff like this I guess that's why we're all here tonight because we're also writing about CSS grid and other shapes stuff at the moment follow people who are writing about this kind of stuff because if we don't use it the browser implementers will just think that we don't want it and they'll take it away that's actually happened with CSS shape inside nobody used it it's slightly more complicated than they kind of expected it to be it's gone away until we say that actually we do really want this they do look to us for feedback and we should let them know what we want Lastly some other ideas or any of these other things some other interesting typographical design tweaks that are coming to the web hopefully soon I've linked everything up here so I'll put the slides up later and you can just click through so that's kind of it really mainly I just wanted to ask you to be inspired go away and make stuff tell me about how you're getting on I'm really interested in your shapes what you make and some more people for inspiration thank you very much everybody