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.
0:06 The typography, the images, the buttons and so on,
0:10 but the grid, the grid plays a super important role in helping design websites,
0:15 especially from our responsive perspective.
0:18 But also from an SEO perspective.
0:21 So here is the training website, the Talk Python Training website,
0:24 at least what it looks like at the time of this recording,
0:27 and notice, we've got our big hero image, we've got a get notified section,
0:31 and then we have three courses that are featured,
0:34 and those courses of course are going to change over time
0:37 but these are the three featured courses.
0:40 What happens if this window shrinks,
0:42 if it gets smaller than the width of those three images?
0:45 Well, a lot of sites is just going to create like a scroll bar,
0:48 and then that will actually force the design of the rest of the page
0:51 to fit that virtual size that that scroll bar would have,
0:54 but luckily, I use the grid layout in Bootstrap to design this, so that doesn't happen.
0:59 Here is what does happen.
1:01 When you shrink this down to sort of phone size,
1:05 it doesn't look quite as good like the Talk Python Training
1:07 overlaps on some of the little images in the background,
1:11 that kind of stuff is really hard to deal with, but look at the apps,
1:14 see that Python Jumpstart By Building Ten Apps, it's now on top
1:17 of the Write Pythonic Code, which is on top of the Python for Entrepreneurs part.
1:22 That's because I designed that into a grid and said
1:25 I want you to be kind of like a table,
1:27 as long as the screen is desktop size, but once it gets too small to fit those images,
1:32 switch into a vertical layout, basically turn the table pieces
1:37 or the table columns I guess you call them,
1:39 into what would be line breaks and separate rows.
1:43 This is the kind of layout that's very easy to achieve with the grid,
1:46 we don't have to worry about trying to use sort of invisible tables,
1:51 that's not great for SEO unless you actually have tabular data then tables are fine,
1:56 but a lot of time people traditionally had used tables for layout, which is not a good deal.
2:01 You could try it with divs and floats and so on.
2:04 but that is also really hard to get it just right and especially as the site changes,
2:09 you'll see Bootstrap has a solid and understandable and predictable solution for this.