How We’ll Lay Out Websites In 2016

Warning This article was written over six months ago, and may contain outdated information.

Last night I had the pleasure of giving a lightning talk – my first public talk – at the London Web Standards meeting. The talk had the title “How We’ll Lay Out Websites In 2016”, and was a look at the three layout modules offered for discussion by the W3C: Flexible Box Layout, Template Layout, and Grid Positioning.

The video is now available to watch (I was concerned that I’d talked too quickly as I was a little nervous, but it doesn’t seem too bad!), and my slides are also online; both are embedded below.

12 comments on
“How We’ll Lay Out Websites In 2016”

  1. Of the three solutions in development, which do you think the most likely to succeed (assuming of course that only one is finally adopted)?

    I have a feeling that the flex-box approach is the most natural fit with current CSS practise, and the box model in general. However, the template layout may ultimately be the more powerful (though, I can’t shake the ‘it feels like tables’ sensation, irrelevant as that is).

    Grid position seems a good idea, but might be too rigid to many?

    Tom Bran [January 19th, 2011, 10:20]

  2. (Great presentation last night, by the way! Cheers)

    Tom Bran [January 19th, 2011, 10:21]

  3. Thanks, Tom, I’m glad you enjoyed it. I think we’ll see at least two of them implemented, and my guess is that it will be FlexBox and Template. The two aren’t really in competition, they solve slightly different problems. What I like about Template is the way it uses existing properties (display & position); it seems really logical.

    The browser makers seem most excited about Template too; as I mentioned in the talk, the editors of the spec include the lead developers of Firefox & WebKit, the author of HTML5, and representatives of Opera & Google; so it’s being taken very seriously, and I’d expect to see an implementation in the near future.

    Peter [January 19th, 2011, 11:10]

  4. I feel that the template layout is the weakest of any proposed positioning method. It seems kind of limited to me. I haven’t been reading up on grid positioning as much as I should, so I can’t give a very informed opinion, but I would easily say the flexible box layout is the most practical.

    I think you forgot to mention something though: If XBL2 is a success, I’m guessing many people will begin to use it for positioning needs due to the lack of a consistent mechanism for altering a box’s containing block in CSS.

    JJ [January 19th, 2011, 14:07]

  5. […] This post was mentioned on Twitter by London Web Standards, Jonas Jacek. Jonas Jacek said: How We’ll Lay Out Websites In 2016 – http://www.broken-links.com/2011/01/19/how-well-lay-out-websites-in-2016/ #webdev #webdesign #css3 […]

    Tweets that mention How We’ll Lay Out Websites In 2016 » Broken Links -- Topsy.com [January 19th, 2011, 14:24]

  6. @JJ I actually like the template layout; it’s quite simple, but also does much more than I could explain in the limited time available to me.

    I haven’t really looked into XBL2, although I will now.

    Peter [January 20th, 2011, 19:55]

  7. […] developer Peter Gasston’s recent talk at the London Web Standards meeting. Gasston calls the talk How We’ll Lay Out Websites In 2016, but we’re optimistic that these tools will be available in most browsers much sooner than […]

    The Future of CSS: Finally, Sane Layout Tools | simplesitetutorials.org [March 3rd, 2011, 18:52]

  8. I ran across this talk after seeing the Browser Q&A panel on Vimeo. Really enjoyed it! I’m just a hobbyist, but the presentation was very clear. My hunch is that it won’t be your last public talk. :)

    FWIW – on the basis of the presentation, the “template” approach seemed to deliver much (most?) of what one could get in the “flexible box” model, but with more versatility.

    Thanks for this!

    David Reimer [March 22nd, 2011, 12:36]

  9. @David Reimer – Thanks, David, I’m aiming to do some more talks in the near future. I’d say the flexbox approach would probably be better for laying out areas of pages rather than whole pages, which template would be more suited for. I think the two work together quite well.

    Peter [March 22nd, 2011, 12:42]

  10. […] London Web Standards Treffen, hat Peter Gasston einen interessanten Lightning Talk mit dem Titel How we’ll lay out websites in 2016 gehalten. Er stellt darin vor allem drei Varianten vor, die aktuell vom W3C zur Diskussion gestellt […]

    Kurzvortrag: Wie wir 2016 Websites aufbauen werden - Netzlogbuch [July 25th, 2011, 10:35]

  11. […] How We’ll Lay Out Websites In 2016 – Broken Links […]

    HTML and CSS Recourses List | Learning from Lorelle [August 27th, 2012, 18:34]

  12. […] How We’ll Lay Out Websites In 2016 – Broken Links […]

    HTML and CSS Resourses List | Learning from Lorelle [September 30th, 2013, 05:57]