Layout – Website Performance Optimization


Alright, I feel like the finish line is in sight. We’ve got our render tree. Can we put pixels on the screen now?>>We’re definitely very close, but there’s one more step. We still need to figure out where and how all the elements are positioned on the page. And that’s the layout step. Let’s take a look. To show a layout in action I’ve come up with a simple render tree. Here’s what the final result will look like. Note that if we rotate the phone, the dimensions of the boxes change. But their proportions stay the same. Let’s see if we can figure out what the browser is doing here. Let’s start at the top. We set the background on the body element to gray. That makes sense. That’s exactly what we saw. And we set its width to 100%.>>Wait, that’s 100% of what exactly?>>It’s 100% of the layout viewport size. If you paid attention, our hello world examples contained an extra meta tag.>>Oh yeah, I was reading the web fundamentals guide on responsive design. And it said that I should always have this tag. But I never really understood what it was for.>>It is a bit cryptic, but let’s try to make sense of it. What it’s doing is telling the browser that the width of the layout viewport should be equal to the device width. So, let’s say that the device width is 320 pixels. Then, if this meta viewport tag is present, the browser will set the layout viewport to 320 pixels and that will be our 100%.>>Oh, I see. But what happens if I don’t provide this tag?>>Then the browser will use the default viewport width, which is typically 980 pixels. And it’s optimized for large screens. You know how sometimes, sites render zoomed out and you have to zoom to navigate and read the text. That’s because they’re not setting delay at viewport.>>Oh that makes sense. I am definitely not a big fan of those sites.>>Neither am I. To build great mobile experience, you should always set them at a viewport. But getting back to our example. If the device with this 320 pixels, then the body will be 320 pixels wide. Next, we have the divnote at 50% of the width. And it is a child of body, so its width is relative to its parent. And 50% of 320 pixels is 160 pixels. And, for paragraph, the width is 50% of its parent. Giving us the width of 80 pixels. And, with that, we’re done. That’s layout. Now, how about you give it a try?

Add a Comment

Your email address will not be published. Required fields are marked *