Apple recently announced its official release of iOS 7 . This is a release packed with very significant changes, in particular a radical transition for the iOS user interface design and user experience.
Part of the updates to iOS 7 is an upgrade of mobile Safari which comes with multiple new features. One of these features is CSS regions. CSS regions is a revolutionary CSS specification draft that allows a deeper separation of concerns in the way designers and developers structure their content and layout. They can now manage the way content should flow across different regions of the page design (hence the name CSS Regions) separately from the content itself . Then content can now be made to flow in different chains of regions, typically laid out differently for a mobile, tablet or desktop/laptop use.
So the same content can flow across different layouts for each of the designs designers want to author.
Below is an example of a design using CSS regions, and you can see how the same content flows through different areas of the page at different form factors. Note how the text body flows through multiple regions that can be placed arbitrarily around the quote (top and bottom for the narrow version, all around for the others).
This is a core technology that we are excited to see Apple enable in their browser.
Our Web Platform team at Adobe has been working on this feature, with many other partners in the W3C, the WebKit and the Blink projects, for over two years now. It has been a delight to see the feature we proposed go through maturation thanks to the feedback in both the CSS working group (e.g., Microsoft is a co-editor of the specification with Adobe), where the specification is defined, and in the open source project, where it is implemented (and we collaborated on the implementation with engineers from different companies such as Apple and Google). Safari is the first browser to release with support of the latest specification and this is a major step forward for beautiful, responsive layouts on the web.
So, attention web designers and developers! You can start using the future of responsive design now (on iOS 7, but check out the compatibility chart for precise details about where the feature is supported). There are great demos and resources to get you started.
But that’s not all.
The following screenshot shows how the content shown above was authored in Edge Reflow CC.
Figure 2. Screen shots from the ‘Bike & Co.’
We would love to hear what you think about this feature and the tooling workflow that Reflow provides. Please let us know @adobeweb on Twitter or by leaving comments here.