An Event Apart: Strong Layout Systems

by February 18, 2013

In his presentation at An Event Apart in Atlanta 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.
  • 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. The only things within it suited for layout were floats. Floats were not meant for layout but they became an alternative to tables.
  • 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.
  • 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.

New Layout Systems

  • 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 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.
  • 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.
  • 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.
  • 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.
  • 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.