Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Flexible layouts allow you to create layouts that adjust based on the width of the browser or the viewport. If the browser is resized, flexible layouts will increase or decrease the available space for all content regions within a layout. This gives you the ability to design a layout that takes advantage of the space available to it, and can present a different look to viewers, based on the size of the browser window. Designing flexible layouts can be much more labor-intensive than designing fixed layouts, as you have to carefully plan out the relationship between all the elements within the layout.
What looks good at one size doesn't necessarily work at another size. That means that just like fixed layouts, there are pros and cons to using flexible layouts. Now the biggest positive for you users is that you have a layout that conforms their current resolution, and they're not having to do unnecessary scrolling, zooming, or size adjustments. It also gives them the freedom to resize the window without the additional penalty of horizontal scrollbars or content being lost. As a designer, you're freed from the rigid constraints of fixed layouts.
Instead of defining a pixel-perfect relationship between elements, you focus more on how those elements should relate and interact to each other in a generic way, and are less worried about exactly how much space a certain gutter or element is occupying. The flip side of that is that you do have to give up a certain amount of control over your design, and designers often balk at not being able to control exactly how their content is viewed. But with flexible layouts, you have to be content with losing some of that control.
Flexible layouts also often have element-spacing issues, especially at the extremes of viewport width. Now, really large resolutions often end up with a tremendous amount of space between elements, while smaller resolutions often create layouts that don't have enough separation. That's why it's common to have minimum and maximum width values specified for flexible layouts, to create a range of acceptable resolutions. Now this also means the flexible layouts are a lot harder to design. They require more planning, and the code for them is generally more complex.
Keep these factors in mind as you begin to plan your layouts and they'll help you determine whether a flexible layout is right for your project or not. For the rest of this chapter, we will break down what goes in to planning and building flexible layouts, and we are going to start by tackling one of the hardest aspects of it first, determining your layout dimensions.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.