Web Platform Team Blog

Making the web awesome

“Magazine-like layouts with CSSRegions” and the WebVisions NewYork show

At the end of February, i attended the WebVisions conference, hosted in the “Theater for the New City”, New York. The audience consisted of half-developers half-designers and Adobe, a key sponsor for the event, had two speakers: Kevin Hoyt and myself.

While Kevin had a presentation about PhoneGap and how it can be used to build mobile applications that are standards compliant, I spoke about CSS Regions: what are they, what are the problems they are trying to solve and what are the solutions proposed by regions. I also talked about how a developer can combine regions with media queries to create adaptive layouts and how regions can be used with the new CSS3 layout modules like multicolumn, flexbox and grid to achieve maximum layout flexibility. Last but not the least, I showed how regions could be combined with CSS Exclusions to create more compelling layouts on the web.

People seemed to enjoy the presentation and like the power and flexibility brought by CSSRegions. The predominant question was about the availability of CSS Regions in browsers, therefore it becomes important to remove regions from the experimental flag in Chrome this year. CSS Regions polyfill, a JS library that allows developers to experiment with basic CSS Regions support in non-WebKit based browsers like Firefox, was welcomed and some people wanted to experiment with a CSS Exclusions polyfill as well. While discussing CSS Exclusions, people loved the idea of defining an exclusion based on the alpha channel of an image.

The strongest argument favoring regions over a solution that was image-based was that a smaller content payload matters, since it is unpleasant for the user to download 100 MB of images for a magazine issue, sometimes on a mobile connection.

Some highlights from the conference:
* The final keynote was delivered by Ethan and Malachai Nicolle, the creators of AxeCop. It was an impressive talk in which they shared how they created AxeCop and how they evolved from some nice comics to a site with very high traffic and further to a show on Fox channel. Malachai is an 8-years old child 🙂 with lots of ideas illustrated by his brother Ethan.
* Douglas Rushkoff had an interesting keynote about how the society has changed its focus from future to present (I can’t wait to read its last book “Present shock: when everything happens now”) and Andy Bichlbaum showed some very funny movies related to the activity of the group he is leading, “The Yes Men”.
* Thomas Phinney, the fontexpert, ex-Adobe now WebInk, spoke, of course about fonts and how to wisely use them on the web. His examples of sites and movies included both good and not-so-good use of fonts.
* I enjoyed watching Rachel Nabors presentation about how to play with animations in CSS3 and the presentation from Shay Howe, a professional creative designer, about writing performant code with HTML/CSS.
* Jason Cranford Teague had a workshop in the first day about responsive design and Sara Wachter-Boettcher explained why we need better, not more, content and showed some techniques to achieve that during her workshop.

It was a great event and I am really glad I had the opportunity to speak about the work we are doing in Adobe’s WebPlatform group.


  1. May 09, 2013 at 3:53 am, 30 New CSS Articles and Tutorials | said:

    […] “Magazine-like layouts with CSSRegions” and the WebVisions NewYork show […]

  2. May 13, 2013 at 5:18 am, 30 New CSS Articles and Tutorials | Latest design news, articles, tutorials, photoshop tutorials and photoshop tricks written by designers and developers from all around the net. said:

    […] “Magazine-like layouts with CSSRegions” and the WebVisions NewYork show […]