ExamplesĪirbnb’s listings page shows a sticky right panel for users to easily book a stay.Ī sticky panel is when you have an area that is sticky, or “follows” the user as they scroll down a page. Some page examples are blogs, instructions, FAQs, how-tos, where you want to keep navigation or other things handy for the user on the side. This layout is very versatile and is suitable for inner pages of the website, such as when you have lots of text to read. So really the “less space” thing is a non-issue, and will even make your design better. Even in the single-column home page layouts, things are centered and have a max-width.
Actually 8 columns is really pushing it because you have to consider those who use a large desktop, so I wouldn’t design something more than that. This is a basic typography principle, where comfortable reading width is around 60–80 characters at 16px, and that happens to be about no more than 8 columns on a desktop. On the web you should never let text use all 12 columns. “But wait, 8 columns? Then I have so much less space to design with!” you might say. This way, you have an even number for both sides, and if need be you can cut your main content in half to nicely display things side by side. You should use 8 columns for your main content, and 4 columns for your side content. The other benefit is you can surface other elements much higher above the fold, and use this side column for navigation, advertisements, call to actions, similar listings, etc. This is probably one of the most common layouts, simply because you do not want your text to reach more than 6–8 columns wide. This is purely a learning exercise, and I am just using these sites as examples. Or just go with the flow, all good.ĭisclaimer: I do not work at any of these companies nor do I know how they set up their grids.
#RESPONSIVE GRIDS HOW TO#
If you’re not sure how to use grids in responsive design, read up on part one: Responsive grids and how to actually use them. More importantly, I want to teach you how to mix and match your layouts to cater to your design needs. On that note, I often get questions like “Wait, how do sticky panels work in a grid layout?” or “What do you do for a web app where things go edge to edge?” We’ll look at some applications of the responsive grid and also how they scale down to mobile. As people become better designers, their eyes are constantly drawing horizontal and vertical lines everywhere to create that order and alignment. It makes things look less floaty, and you can generally tell who is and who is not using a grid. Responsive grids are a method to systematically align your designs, to give order, establish hierarchy, and “logic” to your designs. Now that you have a basic understanding of how to use grids, you might be wondering how to apply them to layouts you see on the web.
How to use the right responsive grid and UI layout based on your design goals.
0 kommentar(er)
