Reflow Gets Support for Regions

There’s bound to be a lot of excitement from my colleagues today about the awesome addition of CSS Regions to Mobile Safari and support in Adobe Edge Reflow and Adobe Edge Code. I share it, but I want to focus on the fact that you can start working with these features today in Reflow.  For the longest time, I’ve been talking to audiences about both our new tools, and our efforts with the W3C, but to be able to see them come together like this is awesome. 

The big question for regions is “how would I actually use it” and fooling around with it in Reflow allows you to answer that for yourself.  Where would you use it? Try it and see.  My answer: you use it where you need reflowable content that keeps a layout you want despite not being pixel stable. Let me show with this example.

Here is a screenshot of an article layout in Adobe Edge Reflow.  You can see I’ve laid the article out in several columns around a picture. 

regions1

The great thing about Regions is that those columns remain stable despite the contracting screen (as you can see in following screenshot).  I don’t have to worry about how the text will layout cause I’ve given it general instructions on how to do it.

regions2

But eventually that layout won’t work, those three columns will get too tight. No worries. Reflow allows me to make responsive decisions that really make my content layout correctly, but still allow me some variety in layout. 

regions3

And finally when the design just won’t work anymore, I linearize the content, and I have an article that is readable everywhere, but has magazine like layout where it make sense. 

regions4

Keep in mind that right now you’re going to be limited in using these features in Canary and Mobile Safari.  But I think our hope is that the more people that make compelling layouts with these technologies, the more browser vendors will see that this is tech that they want to include. So check it out on the Adobe Web Platform Blog, and create some awesome layout in HTML.  

Update:
If you want to fool around with the Reflow file I used in this example, here you go.