 Okay, so, well, again, thanks for having me here and admitting me to this meetup without knowing what exactly I'm going to do and how I do my talks, but, well, here I am. I want to give a very, very short introduction about myself, simply saying, well, I am Niels. I work at a company called Nine Elements. We are based in Bochum. And if you want to talk to me or contact me, you find me on Twitter. If you maybe want to talk to me but say, please, no more CSS stuff, you can also talk to me about paper folding. I love origami. So this is the kind of thing that I do when I'm not doing front-end design stuff. So, but that's everything for me. I will go on with my talk now. So, when I started doing web design, web development about, like, 10 to 20 years ago, everything was really easy. We had the design part, then we had the front-end development and the back-end development. And over the last years, something new emerged here. That is called front-end design. I think it was Brett Frost who came up with the term. Sometimes it's referred to as UX engineering or interface development, but it is all the same. What it is, if you haven't heard this term before, it is people that are interested in HTML, CSS, and a presentational JavaScript. And I will write down some things. There are some tasks that you can do during a web development process. And I think we could argue about every single word here for, like, hours. But this is not the point here. What I want to say is that on the far left side, you have something that is clearly belongs to the design part, say, doing some illustration, drawing stuff, doing photography. And then this starts with the user interface design, UX design, and you go over to the far right end where you have this API stuff, data storage, business logic, and so on. And what is interesting for me is that when companies are searching for a full stack developer, full stack development means something like this to them. So we have to do everything except for maybe drawing and illustration. But you have to have at least basic knowledge about user interface design, because this is what you're building in the end, a user interface. And you have to do everything. This is a full stack developer. But I was always asking myself, how do you learn this? And when you start learning things, I saw this little meme here, that you're a newbie and you just jump everything, you start with React, and then you apply it to Facebook. And for some time this bothered me, and I got quite angry about this, because I value CSS and HTML, and I think this is so important. But this changed a little bit for me, because I think it is okay to do this. If you're interested in JavaScript frameworks and all this stuff, then please do this and do this, because you cannot learn everything at the same time. But we all have to acknowledge that if people are more interested in this, the full stack development becomes more something like this. And if we have on the one hand people that are doing just pure design stuff, and on the other hand we have people starting with presentation of JavaScript, it means there is no front-end design at all. And if you have no front-end design, you will end up with something like this. You have your expectations on the one hand, but the reality is kind of not what you wanted to have. So this is why we need front-end design, and I'm kind of focusing on this part here. Because the problem we now have in our company, for example, is where do we find people that are excited about front-end design? And well, I can say by myself, I don't know if I'm any good, but I at least can say that I love all this stuff that has to do with UI design, UI design, HTML, also accessibility speed, I just love these languages. And I looked and saw, well, what did I do before I started web design, web development? And I studied the history of art, and I thought maybe I did learn something there that helps me nowadays when I do my work as a front-end designer. And I think I found something there, and I want to share this with you so that maybe there is something that can help you as well. So I will show you a couple of paintings, and we will start with a very easy one. This one here, I love this painting. It is by Robert Rauschenberg, and it's called White Painting, the seven-panel version here. It's from 1951. And just to be clear, this is not one painting with small lines on it. It has seven panels, so seven canvases, very narrow, and they are put next to each other, and they are painted with white paint. There's also the four-panel version and the three-panel version. Then you have the two-panel version and, of course, also the one-panel version. But don't mistake this one with this painting here. This is also an artist called Robert, but this is by Robert Ryman, and I think it's from 1965, so 14 years later, so we see it's something completely different. So back to this one here, where we have the Robert Rauschenberg seven-panel white painting. What I really like about this painting is there was, nine years after he painted it, there was an exhibition, I think somewhere in Norway, I don't know, at least in Europe, and he was living in the United States. And they wanted to have his paintings for this exhibition, and Robert Rauschenberg said, well, transporting these and having them on the plane, they could be damaged, this is kind of expensive. I'll tell you what to do. You know, you have the size of the canvas at seven times, one hundred and roughly eighty centimeters by forty-five centimeters. The paint is used as Lapix paint, and then he said, paint them so they look like they haven't been painted. No hand, just put a coat of paint on them. And then there was his assistant, Bryce Martin. He traveled to the museum and he painted them, doing his best to do what the artist told him and painting the pictures. And then we had them. Here it is the painting. And what's interesting now is what was printed beneath it. And it said, Robert Rauschenberg, 1951. So what this process is, it reminds me kind of how a website is rendered. Because you could say that this is the HTML and CSS. This is the introduction of how the final painting should look like. Then we have the browser doing his best here, the assistant, to interpret the information and building the final painting. And we have the rendered website here. So this is kind of cool, I think, that you have this painting in a digital form where you have the digital information about the painting and then you have the analog painting itself in the museum. And if you want to, you can paint it yourself and have an original Robert Rauschenberg in your living room if you have enough space to put it there. So this is our first painting that I like. And the next one is maybe a little more of you know this one. It's by Magritte. And I don't speak French, so don't make me read the title here. It's from 1929, so we're going a little bit back in time. And yeah, what we're seeing here, at least we are seeing something here now, is a pipe and underneath it there's this little sentence Cecine Parinpe, which translates to this is not a pipe. And I always think about this painting here when I'm looking at some layout done in, let's say, Sketch, Figma, whatever you like. And I'm thinking, well, what we're seeing here is not a website. You may have done this yourself like saying, okay, this may look like a website, but it is not a website in the end. You can do prototype, but still it is not a website. And the same thinking is going on here. We are seeing there's this painted pipe, but it is not a pipe at all. And the funny thing here is even if you wanted to build a pipe from this paint here, you have to know quite a lot about pipes to actually build it. You have to know that it's open at the far right end. You have to know its size, the material it is made of. So in the end, this is just a representation of a pipe and it is not a pipe just as a layout is and never will be a real website. Okay, now you see this lessons are getting a little shorter here. We're going even more, traveling back in time a little more to this beautiful painting here by Georg Flegel. It is called Stille mit Käse und Kirchen, which translates to still life with cheese and cherries. And it's from 1635. I think it is the smallest of the paintings we are having here. It's like a regular paper or something, if I'm not mistaken. And well, coming from the white painting to the pipe one, there is quite a lot of stuff going on here in this painting. You see there's the glass of wine on the left and we have a silver plate arranged on it is the cheese. I don't know if you see my cursor. This is the cheese, by the way, and a knife and a bread and a dragonfly on top of it. And then we have some almonds and some berries and some cherries scattered around all there. So this is what's shown on this painting. For those of you who know the Christian religion, you may already have seen that on this painting there is much more going on. We have everything from original sin to Jesus, Jesus' crucification, resurrection, and final salvation is on this. And for those of you who did not see this at first glance, I will try to explain this. So everything started with Adam and Eve in paradise and then there was this original sin thing going on, eating the apple. She was seduced by the devil and the devil in form of a snake. And you have the snake in the glass here on the bottom left corner. And we don't have an apple here but we do have cherries and cherries are also symbols for fruits from paradise so they work as well. We also have, right where the original sin starts, we have to talk about the prophet. The prophet, if you are a Christian and you believe this, is Jesus. And these almonds here are a symbol for Jesus. Almuts, by the way, are symbols for Jesus The heart shell here is a symbol for his suffering and the soft fruit is a symbol for his kindness. So this is the talk of the prophet going on here. You also have these berries here. In German they are called Johannesbären. If you translate this word by word, it would mean John berries. And you have John the Baptist. So Jesus is baptized around here and you have his life going on. And if you know, Jesus' life did not end very well. He was crucified and you have the cherries here, which are the evil fruit from the beginning, building a cross down here. So this cross is the symbol for Jesus' crucification. But his life did not really end. He was resurrected and he died for our sins and you have this Holy Communion thing where in church now you eat bread in the symbol of Jesus' body. And this is the bread is up here and it's alongside the knife and the knife is pointing up against the reading direction because your reading in Western language is from left to right. So this is the reading direction and the knife is pointing upwards against it. So very strong upwards drift here and it's pointing to the wine. And the wine is a symbol for Jesus' blood and the bread and the blood is what finally crashes the snake down here and gives us in the end salvation. So this is what's all going on here in this painting. And I could now also start talking about alignment and golden ratio and all of this stuff, but I don't want to bore you too much with this. You might already ask yourself what does all of this have to do with front-end design and how can this help me in my daily work? Well, I will tell you. You hopefully have learned now that every element here has a distinct purpose that has its own purpose and also its place on the painting is very important. Like this wine here, you could maybe change it to red wine. It would work as well, but you could not switch it with milk because milk does have very other symbols here. And also these cherries in the far right corner, they have to form this cross. It's really important to know all this Jesus' stuff. So you analyze this painting here and you ask yourself what's the purpose of every single element and what's the job and how can I preserve this when I need to do any modifications here? And this is what we are doing now when looking at a very simple layout and trying to use what we have learned here. So we have this layout given to you by your designer friend and then you can use whatever tool you want. Let's say it's envision or sketch or Figma or whatever to know all the numbers here, to know all the margins and paddings and there's something quite strange going on in this layout here. You see this large headline is not centered. It is in here is kind of a container and inside it there's an additional margin going on here and you could translate all of these pixel values to some CSS and as this is a CSS meetup, I think you are all familiar with CSS. So I named this whole thing fancy text and then I mostly took all the pixel values and put it here so we have the font size, line height, margin, font weight, all of this. But you all know that as soon as I started to resize my browser and narrow the screen, this layout would break and I needed some media queries to fix this and this is maybe not the best approach so I want to show you something that is a little different here. So instead I look at this thing here again and ask myself what's the artist's intention here so the designer's intention and there are three things that I think are kind of important for this layout here to work. First thing is this headline here. It is really huge. You see there it is not about readability anymore. This is a headline that spans nearly the whole space that is available here. So this is kind of a substitute for an image that's not there. The designer wanted you to stare at the typography and acknowledge these beautiful letters here. So this is what's going on in the headline. The paragraphs are a little different. Here it is really about readability. We have a nice width of the paragraph. We have a nice line height and so on. So this is mostly about this is the content the real content that you have to read and this is done about readability. And the last thing that is interesting is the layout itself. You see you have some space up here then you have the text indented over here and a little bit less space on the right one. So this is the third thing that I kind of want to preserve. And how do I do this? I start with the headline instead of looking at these 160 pixels I kind of compare this to the whole viewport which is 1,440 pixels in this case because this seems to be the new normal when you're working on a design. And instead of using pixels I go for viewport units and I always keep a little bit of M in here. I'm told this is better for accessibility but the major part of it will be done by viewport units. You see that's 10 viewport units which makes the text size change dramatically once you change the browser width. So this stays almost always as big as possible given the browser size. So this is for the headline. Now looking at the paragraph here the width of the paragraph is 720 pixels and I could go now for a max width of 720 pixels but again here I want to say what is 720 pixels? And in this case it's the width of 50 times the character zero and knowing this I can use this in CSS and setting a max width of 50 characters. The CAH unit is the width of the letter zero so it's even better than using M because if for some reason there was another font loaded here that is much more narrow or white I'd still have the same number of characters in this paragraph and this is what you're aiming when you're doing setting a max width for a good line length. So this is the character unit that I'm using here that's the second part and the third one and final one is this distribution here that we have and again we're having the pixel values 230, 344 and 114 they look really random but if I compare them a little we could say roughly the far right corner column here it's one third, this is two times this column here and 344 is roughly three times the third column and they are mostly empty so it is kind of white space and this reputing white space is something that you could not do in CSS for a long time but finally with the grid you can do it and I think this is really awesome that you can do this what I'm doing here is I'm using grid for laying out this little layout here and it's not too complex mainly what I'm saying here is I use the fraction unit and the fraction unit works in a way that the browser asks hey is there after I put in all the content that I have is there some space left and if yes then it gets distributed like two times here, three times here and one time over here and then I only have to place my headline here starting at the second line this would be here first one would be here on the far left and ending at the fourth line and the paragraphs starting at the third line and ending here as well okay combining all of this together the CSS looks like this you see we have the fancy text this is the outer diff or whatever you're having here there's a grid thing I talked about just yet then you have the headline with the calculated font size and placed to the grid column the rest is just line-eyed font weight and so on and you have the paragraph I put in a tiny bit of view pod with here as well but not as much as I did here just a tiny bit so it gets a little larger when I'm on a big screen and the max width here to 50 characters so when I compare this one to the initial CSS that I showed you then well yeah it did get a little bit more complex you see we had 19 lines here and we have 21 lines here but it is not too complicated I think and instead of having a layout that breaks whenever you start resizing your browser we now have a perfectly responsive layout that doesn't need any media query and preserves the designer's intention and I will show you how it looks you see here how the intention is changing and you always have this nice readable paragraph here and you have this one third over here three times the width down here and you see as long as it's very narrow we only have one column because yeah there's no space left and I can show you again how this looks here you can see how the white space is distributed here with the pink columns so and you see what I think is really important that we have the designer's intention the indented text in the bottom the really large headline that is always quite large and the good readable paragraphs underneath it so the next time when you get a layout and you see a layout which is not a website and I hope you do understand this all the time please try to analyze where the things are what the element's purpose is and try to preserve it and this is for me what front-end design is really about and I hope that in the future front-end design will get the love that it deserves and well that I say thank you very much for listening and I think if you do have any questions whatsoever I'm happy to answer them