Web Platform Team Blog

Making the web awesome

Design next generation responsive designs for iOS7 with Edge Reflow CC and CSS Regions–A story of collaboration

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

Figure 2–Screen shots from the ‘Bike & Co.’ demo

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.

With today’s new update to Edge Reflow CC , a web design tool to build beautiful responsive web designs,  designers can now create flowable responsive designs with regions, similar to the effects that users are able to create in Photoshop.   Also, Edge Code CC,  a lightweight code editor for web developers and designers working with HTML, CSS, and JavaScript was updated with code hinting support for regions to easily implement flowable, magazine-like designs.  You can download both Edge Reflow and Edge Code with your free subscription to Creative Cloud.

The following screenshot shows how the content shown above was authored in Edge Reflow CC.

Screen Shot 2013-09-25 at 7.57.41 AM Screen Shot 2013-09-25 at 7.58.18 AM

Figure 2. Screen shots from the ‘Bike & Co.’

So checkout the video and shiny web features for what I hope will be an aha moment for responsive design authors when witnessing the future of responsive design meeting the present!

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.

Comments are closed.