Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Grid layout benefits
0:01 It's all these shiny features of Bootstrap that catch your eye when you first get started. The typography, the images, the buttons and so on,
0:11 but the grid, the grid plays a super important role in helping design websites, especially from our responsive perspective.
0:19 But also from an SEO perspective. So here is the training website, the Talk Python Training website,
0:25 at least what it looks like at the time of this recording, and notice, we've got our big hero image, we've got a get notified section,
0:32 and then we have three courses that are featured, and those courses of course are going to change over time but these are the three featured courses.
0:41 What happens if this window shrinks, if it gets smaller than the width of those three images?
0:46 Well, a lot of sites is just going to create like a scroll bar, and then that will actually force the design of the rest of the page
0:52 to fit that virtual size that that scroll bar would have, but luckily, I use the grid layout in Bootstrap to design this, so that doesn't happen.
1:00 Here is what does happen. When you shrink this down to sort of phone size, it doesn't look quite as good like the Talk Python Training
1:08 overlaps on some of the little images in the background, that kind of stuff is really hard to deal with, but look at the apps,
1:15 see that Python Jumpstart By Building Ten Apps, it's now on top of the Write Pythonic Code, which is on top of the Python for Entrepreneurs part.
1:23 That's because I designed that into a grid and said I want you to be kind of like a table,
1:28 as long as the screen is desktop size, but once it gets too small to fit those images, switch into a vertical layout, basically turn the table pieces
1:38 or the table columns I guess you call them, into what would be line breaks and separate rows.
1:44 This is the kind of layout that's very easy to achieve with the grid, we don't have to worry about trying to use sort of invisible tables,
1:52 that's not great for SEO unless you actually have tabular data then tables are fine,
1:57 but a lot of time people traditionally had used tables for layout, which is not a good deal. You could try it with divs and floats and so on.
2:05 but that is also really hard to get it just right and especially as the site changes,
2:10 you'll see Bootstrap has a solid and understandable and predictable solution for this.