 Hi, everyone. I'm Hamsa. I'm sorry, I wrote this. Yeah. So I was so graphic designer and I used to run a studio called obsessive compulsive designers that did a lot of graphic design studio work. We worked on a lot of grid based stuff, but for print. And my work was always like very like colorful and fun and like you know I always like to kind of use a lot of like visual expression when I'm doing work. So my journey from a graphic designer to a web designer front end developer happened around 2013 when I started taking websites on from my clients and very soon after that by 2013 I realized that I needed to count on developers every step of the way. And that was a bit frustrating for me. So in 2015, I kind of like took all my savings and went to Canada for a boot camp for a coding boot camp which kind of taught me how to code. And so in nine weeks I kind of they made us work like some 16 hours a day like drill CSS HTML to us as well as JavaScript and and I was a better person after that but the reason why it was very impactful for my design process is that I wanted to be able to understand how development works to guide my design process a lot better. So this is a place I studied it's called you know now it used to be called hacker you before. And I've learned some of the best lessons from accessibility practices to code workflows to just keeping things semantic from the school so and then I came back from the boot camp and I came back to India and ever since then I've been working on a lot of content websites and I've been kind of like understanding how my graphic design avatar kind of transforms to the web with every project. And so like grids is a subject that's very dear to me because I used to be a graphic designer and that kind of is the framework of everything we do but back in 2015. There are mostly advertising agencies doing websites but at that point there were no this folk like web design studio so what I realized was that needs to be a voice of design. Also in web design so it was very interesting for me to apply whatever I've learned in graphic design on the web. So one thing I always believe is that whatever content you put on a website. It can't be boilerplate and it can't it's not going to be a one size fits all the same canvas can kind of hold very different things based on how much hierarchy you want to give it and or how much uniformity you want to give it you know so I think the way that you see space kind of transforms when she wins once you see it in a grid. So today our journey is going to be we're going to be talking about why custom grids and not something like bootstrap or something that's already tailor made and available. We're also going to see how to how to think responsibly responsively at the design state itself. What are some of those scalable elements in terms of content that we need to be aware of. We're also going to see step by step how do we define a responsive custom grid and I have like I don't know how much of like I have gone a little bit geeky over here I must admit but maybe once we go I would be happy to introduce it like entertain any questions. Then we're going to look at very quickly these two topics which is after you do all of this the grid system that you make. How do you hand this grid specification off to developers as well as how do you what are some of those small CSS things that I feel designers should kind of be aware of and think in relation with the grid itself. So that's going to be a journey today. Let's start with my custom grids. The 12 column grid that most of the frameworks is frameworks provide. I don't have an issue with that at all because I think 12 columns is good but it's a scaling of the 12 column framework like bootstrap is where the problem arises. And again like I don't think a one size fits all up through which can be taken for a website like this. So when you have like a 12 column approach the fact that this turns to this on this on a smaller laptop and this turns into this on tablet etc. So it's something that is very limiting and the problem with these frameworks is from a code point of view that the more you try to fight with them, the less to the more futile it becomes so it's better to kind of create a grid from scratch and and some of the other. So what constitutes a content website we are not talking about all kinds of website we're talking about a website that pack a lot of content that that needs to be a resilient template to which if you throw any kind of content it should kind of sit and stick So we're talking about blogs news brochure sites and e-commerce sites and all of these things need need to be built with kind of like that resilience that once you it can take whatever content you give it once once you've handled it over to the client that's going to be using it. So how to think responsibly at the design stage. There are some key variables that determine how a grid scales and in my experience so some of those key variables are typography, the photography which is the photography and media that constitutes what that's part of the website as well as the device hierarchy. So in typography, we have this is for example, six different typefaces in the same font size. And this goes back to that wardrobe drawing that I showed you that each one has a different composition for example this is way more dense. This is slightly more loose. So the way that some of these typefaces will dictate the gutters and the spaces and the margins are going to be very different just on the basis of the way that those characters are formed. The font attributes like weight, size and construction can vastly dictate the way the grid is defined. We're also in content website in dynamic content websites where we're creating a template for someone to upload future content. It would be great to like end of design with high definition photography but in reality what we're really working with is like you know these screen grabs that like this is from the Hindustan news times website this is from catch news. So these are some things that you can't control because the way that the editorial process works might not be in our control but it would always help to know what our variables are when we're designing stuff. So we need to just make sure that we are not designing for something like this we should need to just make sure that we know the kind of content we're going to be dealing with. This is a screenshot of three of the three different websites that I've designed and website A has equal distribution of desktop and mobile whereas website B has a greater majority of desktop users versus mobile and website C has a very large percentage of mobile users and less desktop. This also is a big factor in kind of dictating how your grid should scale and how much how many enhancements you should prioritize for which devices. So I think like to look if especially if it's a web redesign project to kind of go back to analytics and look at what is that composition that's there for mobile and desktop so that we can prioritize things accordingly might be interesting as well might be one of the factors to do. So there's a request from the audience if you can just slow the pace a little bit because it's getting a little too fast to be to understand some of the points. So if you can spend a little more time and the initial presentation goes a few minutes more that should be okay. Okay. Okay. That sounds good to me. Yeah. That's good to know. Is there any part that I should kind of revisit right now? I assume you can continue and people can ask questions if they want to. Okay. Yeah, I think this is the right time to say it because the next part is going to be a little bit. It's better off taste a little bit slower. So yeah, so just to kind of recap this point that there are three variables and defining and scaling a grid that what is typography we need to understand that if you're using a certain typeface it will influence our grid. The second thing is images. We are not working with these really picture perfect images in content websites. We are working with images that are more dynamic that we might not have more control of control off. We're working with vertical images, landscape images, different proportions of images as well. And the third thing is that the fact that when we are doing a website redesign project, it's always good to kind of go back and see the analytical data of that website to see what where are the users kind of accessing this website from are the accessing it from mobile more or desktop more. And some of these, some of these things can really guide the grid so that we can see how much more effort we need to kind of put into a mobile device screen versus how much more effort should be put into a desktop device screen. Yeah, the recap is great. Okay, cool. Yes. So defining a responsive custom grid. Now, there are like couple of like costs steps that that I follow and I've tried to kind of nutshell it so that it's kind of easy to follow so let's let's go through with it. Let's go go through them. So the first thing is our starting point is that when we want to have a content website we wanted to scale at least four devices right so we needed to scale on mobile on tablet on desktop and on like a 27 inch iMac or something like that a large desktop. Let's assume at this point because this point the this design. This presentation is not about how to design website so let's assume that we have an idea that there is a website design that we have ready more or less for desktop and mobile. Right and we have not used any grids to kind of create it. I just use the example of slack but I've just kind of have a one page ready on desktop and mobile, because this is mostly something that designers is where they have like these two designs and they can kind of say that Okay, this is how the design looks on mobile this is how the design looks on desktop. And this is like another example where we are we are mocking up some pages on the desktop and mobile. Now, one thing that you would do next once you kind of start having these pages ready. The one thing that is common on a lot of content websites is listing pages. Now what a listing pages is that it's a listing of search items, a listing of blog articles or a listing of products. So that this page mostly consists of a grid if if you kind of follow many of the UX patterns that are there. It would be a page that kind of consists of a grid. So, ideally, when you're starting off to design a grid for a website like this, you would actually first go and visualize their listing page and say how many columns would each of these things kind of have and some cases they might not have any columns at all. But if they have any columns like if I'm putting three of these items in a row, then it becomes like a three column grid if I'm putting four items it becomes a four column grid. There's another case where I'm putting five columns and it becomes a five column grid. So here the first the first step is always to kind of just visualize your listing page. When in doubt, I would say use 12 columns. The reason why 12 columns can be used is because 12 columns it can be easily divided by 234 and six. So, for example, a 12 column grid could have taken care of listing page A, as well as listing page B because because like four and three are divisible 12 is divisible by both four and three. What it can't take care of is listing page C, which is, which is again like it could, it could leave like two columns on the side and use the 10 columns in middle to kind of dictate those five columns but not to dictate the rest of the space but mostly this 12 column kind of takes care of most of these permutations and combinations when you're just starting off with grid. Unless you need something like to be designed super custom I would say like in that case and you want more flexibility on desktop in that case you can prioritize something like a 20 column grid or a 16 column grid etc. But when you're not sure you can definitely go for a 12 column grid. So the first the fourth step is to set the number of columns on desktop and mobile. So we've already decided that all right like let's go with a 12 column grid on mobile because I have these two particular listing pages on on my desktop so let's go with 12 columns on my desktop. And the mobile what I usually find useful to do is to divide the desktop grid by two and to kind of if I have 12 columns on desktop my mobile columns end up being six columns. And that's kind of a starting point if I have to tweak it later I would but most likely I never have to so it's mostly like so that's first you just define how many columns you're going to have on desktop and mobile. So we have a desktop canvas so there are the first thing we've done is decided how many columns are needed. Next we define the canvas size. So what is the size in which these 12 columns are going to pan. And for the purpose of this it's always useful to use an easy multiple of 12 to kind of get this number so it could be like a 1200 or 1260 or something like that which is an easy multiple of the number 12. It becomes easier to calculate the responsive grid later down the line. So likewise when you're doing a mobile canvas that mobile canvas that I like to use is 360 pixels because again it's a multiple of the six columns that we have as well as it's a super common mobile with. So that's right now we've set the number of columns in our grid and we have defined the canvas size of our grid of two of the devices of our grid. Now let's look at margins columns and gutters there are there are three components of the grid which is margins columns and gutters. So let's look at what margins are the things that go on the extreme end of our 12 column grid on desktop or on the extreme end of the six column grid on mobile are the margins. So in any grid in the grid that I'm showing you today that are two margins on either side of the grid. The next thing is columns. So in a 12 column grid there are 12 columns and in a six column grid on mobile there are six columns of the grid. So we have 12 and six of the columns. Gutters since we are having margins on the side and then we have 12 columns, we'll have 11 gutters on desktop and five gutters on mobile. So that's kind of the composition of the grid that we have. So we have margins columns and gutters. So let's solve for the gutters and the margins so when we are defining what we need to do next is define what are the sizes of each of these elements what's the size of the margin of the gutter and of the column. The answer to that is if we solve for the margins and the gutters the columns will figure themselves out. So each of these to solve for the gutters and margins. You need to first set the gutters for desktop and mobile. So we have we have 11 gutters on desktop and five gutters on mobile. So again remember the time when I said that you know the different typefaces lead to different ways that the grid changes. So good way to set the gutter or good tip to set the gutter is to take a desktop your 12 column desktop and put two text paragraphs next to each other and size them comfortably so size them in a way that you know that you know there is enough space for that type typeface to breathe a lot more. So to go back to this example, a typeface like this might need just say 20 pixels of a gutter. Whereas a typeface like this might need 30 to 35 pixels of a gutter because of the fact that its line height is larger. The fact that the typeface itself is is lighter. It has a lesser weight and it is less denser than this collectively so. So the gutter for desktop is very very heavily determined by the typeface that you use. So put the two typefaces aside and and kind of like visually put them apart in a way that you feel comfortable and on mobile to do the same activity on mobile instead of putting two texts side by side because on mobile a two column text layout whether two paragraphs running side by side is not very common. So good way to determine the gutter size for mobile is by putting two images side by side and to see what's a comfortable kind of spacing between these two images and ideally these images should be chosen from the images that you've found for the project whether it's those news grab images or anything like that. Don't use cat images like I did use actual images from your project. So that would give you a good idea of how much they need to be spaced because in a news website if there's too much subjects subject matter in a in a in a particular image, you might want to space them a little bit more so the gutters then would be larger. So here with this principle we can say for the sake of this example we can say that all right with the way that with this paragraph spacing we've set the desktop gutter to 30 pixels and the mobile gutter to 16 pixels. Yeah, so we kind of got our gutters in place now we need to solve for margins. So we know that what we've seen before we know that we need to set the margins for desktop and mobile. So, we kind of go into so here the margins are way more important for mobile than for desktop, because without a margin, any text that is sitting on the screen would kind of stick to the edge of the device. And so then that's why we need kind of like a margin to kind of get all of the text within the frame of the within the frame of the device with comfortable space on the left and right. So the project typeface again on your on your project typeface will help determine this margin also for you on mobile. So, like you need to just keep it at a comfortable distance from the edge of the device so that it kind of sits well on your device yeah. So on desktop though because there is so much more space, you can actually like consider that your same unless there is a specific use case that you want a lot of space on the left and right of your grid. You can actually say that let's keep the same gutter space as let's keep the same margin as the gutter so if it's going to get 30 pixels as the guy if you kept 30 pixels as a gutter, we can keep 30 pixels as a margin. So now we've calculated the gutter and the margin for both of these things so I've decided that in on my mobile device. I need to keep the text 20 pixels from each of the edges so that it kind of sits well and doesn't look like it's kind of running to the edges so my margin and gutter different on mobile and this on mobile. Whereas the margin gutter same on desktop because I'm like all right I can use the gutter in the desktop as well. Now the calculation for column with so a column with is not done visually and unlike margins and gutters which we are calculating visually the calculation for column with does not happen visually so um let's look at our variables here. So we have our column with and we have a desktop and mobile and we've got our variables which is the margin gutter for desktop than the margin gutter for mobile. So what we will do and this slide I will stay on for a bit but what we will do is we will first subtract the 11 gutters so we have a 1200 pixel canvas. And then we will subtract the 11 gutters from it so each gutter is 30 pixels over here so we will subtract 330 pixels which is 11 into 30 which is a total gutter value from that canvas. Then we will subtract the two margin values from the left and right of the canvas so we will subtract 60 from it as well. So when you subtract 1200 minus the 303 30 for the total gutter minus the 60 for the total margin, you're left with 810 pixels, which now we know that within these 810 pixels that that's our total column with 412 columns. So when you divide that by 12 you get 67.5 which is our column with on desktop. Yeah so um and don't worry about the pixel value here because it's going to be insignificant once we go forward. The reason we're getting pixel value values are so that we can eventually define a fluid grid. Yeah. So, um, so any questions here we're going to want to make sure that this part is understood before I go forward. I do not have much questions at this stage. I mean I do have a something some few of them that I have collected but they will distract from the thing that you are you're talking about so it's cool for me I have understood most of the things that you're laying out. In the audience in case you have any specific question you can probably quickly raise your hand or something. I don't see anyone raising their hand right now. So, so let's let's I would say let's continue and let's do the questions at the end. Okay, so and then we have the so we have the column with for desktop. Similarly, we kind of have our margins and gutter for mobile a canvas with this 360 we have said our margin is 20 and a gutter 16. We have two margins so we're going to subtract 40 from the total, which is a total margin value. We have five gutters so we're going to subtract 80 from which is a total gutter value from the canvas value itself. So, at the end of it you get 240 pixels which is a total column value for six columns and the column width is going to be about 40 pixels because you divide 240 by six you get 40 pixel which is your individual column value. Yeah, so similarly so now what that means is we've kind of got our canvas with our margin, our gutter and our column with for desktop as well as mobile. And but these are very pixel centric and these are not going to help us define a scalable grid like we want to. So the next step is to kind of convert these into percentages so if you actually convert all of if you set the canvas with based on these measurements which is the 1200 pixel based on this if you set the canvas with 200% the margins then become 2.5% 2.5% and the column becomes 5.625% so these correspond to the pixel calculations that we've done here likewise a mobile canvas with if we keep it as 100% the margin gotten column from 2016 and 40 pixel become 5.5% 4.5% and 11% So this kind of becomes then our scalable grid that we have for like for us to now start using within these two breakpoints right so. So now we have like a fluid grid that's happening on mobile and then we have a fluid that's happening on desktop. Now we need to solve for these other two devices that we spoke about initially, which is the tablet as well as the large desktop. Now I always saw love consulting the large desktop when I'm creating a grid because it gives a lot of answers about. I have a lot of feelings about the large desktop and I will talk about them. So let's go to the large desk. How second you can you also define the large desktop sizes that you're thinking of. Okay, so the 27 inch monitor is what I'm visualizing when we are seeing the large desktop thing so it's a monitor that's maybe even bigger than like a 21 inch monitor so it's like a huge 27 inch monitor and this is mostly mostly for your because I'm sure like because of our screens even even like our laptops that we use can actually produce really early like it kind of has the same output as you would see in a 27 inch monitor but the reason for visualizing it is because you're usually designing on your laptop. But what happens when this thing scales way higher to like a bigger computer right and and so right now there are three ways so when I'm speaking about larger, larger desktop I'm thinking about a 27 inch monitor where this is like a 13 inch monitor. Yeah, so we've solved for the 13 inch we've solved for maybe a handheld phone, we've not solved for tablet and large desktop yet. So let's look at the large desktop so on a 27 inch monitor your screen that you've built which is the 12 column grid can scale three ways. So it can scale in a way that you create the same thing and it scales exactly with the same fluid proportions that we have where your margins will be 2.5% on the side and it will kind of just map one is to one from your 15 inch to your 27 inch. The second way to do it is having a wrapper for the content, but allowing some background elements to scale so to kind of say that all right we this part what we are seeing over here what we've designed and made a grid for kind of corresponds to the center of the screen over here. But what I want to do is kind of allow some of the background elements to flow on the sides of the screen because in that case it kind of looks seamless it even though we're not kind of like doing something specifically for that screen, it kind of gives a seamless experience. The third way to do it is when you take it and you kind of scale it exactly like that but you take no time to kind of make put like put your backgrounds further and take any kind of like effort to scale the grid any further than what you have designed so these are the three ways to scale it. Now, so the three ways to scale it is the same design can can look like this on a 27 inch monitor can look like this where it's seamless, it has seamless backgrounds and it can look like this where there's a wrapper for everything. And there are some references that I've put in for each one of these types of grid systems now let's just talk about why would you use something like this right so ideally when you this is where you kind of go back to those analytical data the analytical data that we saw where we see like the device distribution between the different websites. So in a website where if you see, for example, smashing magazine, which is also targeted very heavily to designers, they are kind of they use an approach like case a where the content kind of is is designed to fit in a 27 inch monitor so apart from doing their 12 column grid, they actually take the effort to create something unique as an experience for some for a monitor that's larger. Whereas there would be some website like maybe y combinator something that kind of just cuts everything to the center like that and does nothing else. But many websites do the center. So the way that I usually go about making a choice of how my design should scale is time. If I have zero time to cater to this device based on the project priorities and because based on anything that's the only case where I would go into case C where there is I like it's an inconsequential breakpoint for me 27 inch so I'm not going to take care of it at all. I'm just going to scale it as is and put like a background over there. And that's the only case where I would do case C and it's fair to do that I won't say that it's wrong to do that but if your users are not there you don't want to spend too much time. Although case B is a place where I feel it has is the right amount of hygiene to do for a project where you are not taking extra effort like not creating a unique experience. But you're just kind of scaling all the elements to make it look like hackily like it fits on a 27 inch monitor and case A is when it scales proportionately. And here one one thing to be not misunderstood is that it is not just because we are doing the mapping of 15 inch design to a 27 inch design like this. It does not mean it's easy out of the three cases that are being mentioned here this would probably take the most effort because you kind of solving solving for viewing distance we are solving for the typography to be seen from a different distance you're also some of these elements can scale just as is so you'll have to kind of create a slightly unique thing and you can't just do like all that scale at 160% and it works so it would require a lot of effort and I would only put in this kind of effort if my audience is on a 27 inch Mac or if I am left with so much time on the project that I can kind of afford to kind of indulge myself and go into like case A so but I would mostly stick to case B for most of like my scaling means sorry. So the next thing is like we visualized it on larger desktops and now let's visualize it on an iPad. So there are yeah sorry you know that footnote so the devices. So what we're saying is so as you saw before the large desktop largely borrows from the grid that we've already defined for the desktop. It's not a special grid we are just defining unless like even unless it's kind of case A for these cases we are mostly like defining this exact same grid that we have and we're working with that. So what about the tablet would it take the mobile grid or would it take the desktop grid. So here is where defining breakpoints comes into the picture where the tablet is actually two screens right you have the same content that is on tablet portrait and the same content on tablet landscape. So then how do you scale your desktop and mobile versions for these two devices. What I've seen often work is that the desktop one lends itself well to the tablet landscape and the mobile one lends itself well to the tablet portrait. So in such a case what you would do is set these very arbitrary ranges for the breakpoints that you want which is say for example on mobile anything below 500 uses this design in tablet portrait what I would do is just kind of stop it at a place between the tablet portrait and tablet landscape so that it kind of is a good range to take care of many devices that fall in that range. So I would kind of define a breakpoint between say 500 and 900 which stops just shy of the tablet landscape thing which is around 1100 pixels which is about 1100 pixels width and I would kind of say that all right my design is going to take the mobile grid here although even in this case if you notice that on mobile my margins were 16 pixels or say 20 pixels on either side right. What is a good kind of hack if you don't know if your audience is maybe only like only 0.5% of your audience is on tablet portrait right and you also want to prioritize both the other experiences way more. One good thing to do for this mode is usually to have an additional margin on the left and right because the mobile margin doesn't very well lend itself to this to the screen and it also is applies for like mobile landscape mode like this breakpoint takes care of tablet portrait and mobile landscape so it's always better to kind of have larger margins on the left and right in this breakpoint if you're not doing anything else. But the other customizations you can do is say for example if elements are only are taking two columns here they can take three columns here you know so it's there are few component level customizations that can be done here but I wouldn't bother too much about it if your audience is not here but I would still like increase a padding for this breakpoint and let it use the exact fluid grid that the mobile the mobile one has likewise a desktop one. We've seen it lend itself to the large desktop it will also lend itself to the tablet landscape and one and usually when you think about this in practice it feels like this is going to be super cramped and tight right because something that you do in 1200 is going to look really really cramped in this in this breakpoint but one thing that and this is probably a talk for another time but you use like every project if you're kind of like defining just like you define type faces like the grid for mobile and desktop separately. It's also very good to define the typographic scale differently from mobile and desktop. So, so that means that when you're when you're kind of using a heading on mobile, it is like 12 or 20 pixels and when you're using that same heading on desktop it's 60 pixels. But what what this particular breakpoint does is that it uses a desktop grid it's very very cramped but if you feel like the content is super like tight. One option is to kind of use the mobile type scale in this big point as well so that it kind of lends itself well and it sits really proportionately to this grid so both of these would look similar but this would use like the mobile type face in the same grid same measurements as the desktop food grid, but you kind of allow your mobile type to hit until 1200 before you change to desktop. So that's the that's kind of the strategy that I have noticed is very easily kind of scalable for these different breakpoints. So here now when we communicate. So once so by now we've got our margins columns gutters, we've understood what these percentage widths are of these things because we've calculated it from a pixel value that works. We've defined how these different devices need to scale and which grids these need to lose from these two from these two breakpoints. So how do we go into how do suppose I'm working in a silo and I'm I'm doing all this out of like my living room and my developer sitting in Noida and how do I communicate the grid and reference to them. At this stage, I would also just do a quick time check because it's 1147 so from here onwards if you can just pace yourself accordingly so that we can wind up. Yeah, sure I have only like two slides more so I think it's perfect. And the communication of the grid breakpoints is similar I just like if I was working with someone who is not like in not sitting right next to me, I would just kind of create a table saying okay this grid is this breakpoint applies to from this pixel range to this pixel range. I would I would say that it has these many columns the column with percentage the gutter with percentage. What is the padding left and right you can give this is a margin that I spoke about. This is a screenshot from an older project that's why it has different values as well as like the breakpoint in which this great kind of kicks in. So it looks something like this the handoff looks something like this well different breakpoints are defined and it also just to show you the 27 inch thing this is kind of using case be where the elements it's scaling exactly as the smaller desktop grid but it's allowing elements to flow further. Just to it's always good to give like a visual cue of how these need to scale in larger monitors. And stress testing components. I think this is something that I would leave everyone to explore by themselves but there are a couple of things that I feel are so hand in hand with grid which is the few CSS properties that you should consider and one is max width where when an element is placed say in two columns and it's sitting very comfortably in two columns when it scales to our larger desktop view. Sometimes it might look larger than what you what you wanted to look in such a case setting setting the fact that this should take these two columns like my paragraph should sit in these two columns but the paragraph should not exceed say 640 pixels it's always good to set a max within six in pixels because that kind of helps bring balance it helps you make sure that paragraphs don't run for 15 words a line and things like that. Another thing is object fit now would encourage everyone to kind of work with content websites to learn about this property of CSS which kind of tells you how images should scale within a container and it can be leveraged a lot in content websites. That's kind of about it. So this is what we covered today, why custom grids, how to think responsibly at the design stage, how to define a responsive grid stress testing your components for scale and handing off this specifications to designers to developers.