In his presentation at An Event Apart in Washington DC 2013 Eric Meyer shared the history of Web layout techniques and how all our existing practices are changing with emerging new Web layout standards. Here's my notes from his talk: Strong Layout Systems.
- The separation of structure and appearance defines our medium. This is unique to the Web: what markup looks like is not defined. It simply states that more or less emphasis should be applied to different elements.
- In the Mosiac Web browser, users could specify the fonts and sizes they wanted headers and HTML elements to be. The author of the HTML could not.
- The Web has always prioritized ubiquity over visual consistency.
- Netscape 1.0 introduced font tags and a number of visual styles. It began to push the Web more toward visual consistency.
- After table mark-up, the Web was never the same. Through tables, background colors, and spacer gifs you could create very-presentation focused layouts. HTML authors could now control presentation in addition to mark-up.
- Thanks to the Web standards project, table layouts were discouraged in favor of CSS. CSS1 was a very short specification. It introduced the box model but the only things within it suited for layout were floats. Floats were not meant for layout but they became an alternative to tables. In same cases, a bit too much -tables are not bad for everything.
- The point of float was to recreate image align left/right for other elements in HTML.
- Floats have issues like float drop but we came up with techniques and workarounds to manage these.
- CSS2 introduced positioning that allowed you to place elements anywhere you wanted on the screen. Positioning lacked the ability to clear. So many people stayed with float-based layouts because they could force layout elements to clear.
- The limitations of layout systems boxed us into some design patterns and moved us away from others. It was the tools driving our designs. For example, equal height columns don't get used much now that we don't use tables for layout.
- We need to challenge the assumptions we’ve grown to use because of the layout systems we had to date on the Web. New standards will allow us to create layouts differently and not be impaired by the layout capabilities of the Web.
- The table and float layout eras of Web sites are going away. We're heading into a new phase where we can use specifically designed layout tools for the Web. Let go of your design assumptions that stem from technical limitations. They are going away.
Viewport Units
- Viewport units, Flexbox, Grid layouts, and CSS regions are changing how we do layout on the Web.
- Viewport height and width are a new metric that corresponds to 1% of the available viewport size. They change as the viewport changes size so they are very adaptive. This are CSS units so they can be applied to things like font-size as well as HTML elements.
- Viewport height & width don’t help with reflow content for that you need tools like flexbox.
Flexbox
- Flexbox allows you to layout a set of elements (like a list) and set an equal amount of spacing between them. You don’t need to hack presentation anymore. Flexbox is an actual layout system. Just set the flex display type on the parent element of what elements you want to display in a flexible context.
- By default, flexbox makes all elements the same height -like table layouts. You can change this behavior if needed.
- Flexbox wrapping allows you to specify reflow behaviors: space around or space between. These are just CSS properties but support for them is limited in browsers today. It works well in Chrome but needs some hacking in Firefox using media queries. In the next six months, this should be fixed in FireFox.
- You can set one element in a flexbox using a specific number of units and another using a percentage. You can also set one or more elements to not flex within a flexbox container.
- Set your parent (enclosing) element to be flexible, then all its children will flex. This creates a flexible context.
- What if we want fixed columns on the sides and a flexible column in the middle with a header and footer? Set the columns to flex: none and the middle to width: auto and flex: auto. Instant holy grail layout.
- You can also change the order of the columns within a flexbox. With this property the order of markup (structure) does not match the layout (presentation).
- Flexboxes don’t have to use equal height. They can be aligned to start, end, baseline, or center of the first element.
- You can also set each element to have its own alignment: one to top, one to bottom, etc. These alignments can be vertical or horizontal as well.
Grid layouts
- Grid layout allows you to set up patterns of grid-lines to hang elements off of and specify these elements in fractions of a layout.
- In grid layout, elements can be set to be a certain number of gridlines wide or a fixed width in units.
- Grid syntax is going to take some getting used to. It's pretty different. Fractions (fr) are analogous to the flexible space between boxes.
- All this is going to get even more interesting. Because grid layouts can be used together with flexible boxes.
- This is going to take some getting used to. Don’t rush out to read the specifications as they are in flux. Grid layouts are very powerful but can get complex.
- Regions allow you to flow content between HTML elements. These turn layout into a skeleton that content can flow between. You might not know which element your content is in when it flows through regions.
- Regions doesn't care how you layout your boxes. All it does it set a reflow over.
- We’re entering a phase of Web design where we no longer need to hack the arrangement of elements to achieve layout.
- After 20 years of hacking, we finally have robust layout systems emerging. The possibilities are endless.