YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Layout - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 5 created 05/25/2016 by Udacity Robot.

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