Six weeks ago, Adobe released a preview of Adobe Edge Reflow in the Creative Cloud. If you are a web designer, and if you want to design responsive websites, then you should try Reflow. I’ve met a lot of designers who are struggling with CSS, especially since the rise of responsive web design. Although it’s still in preview, Reflow is a fantastic enabler for web designers. It’s also a fantastic learning tool to understand CSS and a precise prototyping tool to validate an experience with your customers and your team. The team has just released a new preview (preview 2) with amazing new features. That’s why I recorded this video to share with you my top 10 features.
Video – Adobe Edge Reflow – my top 10 features
This video is also a good way to discover the philosophy of Reflow.
My top 10 features
#1 Style HTML elements
Create awesome designs using CSS like never before. The native web surface in Reflow provides the precise and intuitive controls you need to turn your vision into reality. The professional color picker lets you define CSS gradients. You can also drop shadows (and combine shadows to create complex visual effects), set rounded corners, add background images with scaling constraints… The CSS code is generated in the background; you don’t have to be a CSS expert.
#2 Style text elements
Add richer typography to your projects using Edge Web Fonts integration. Visually browse a vast web font library and style using CSS. Since preview 2, simply highlight text from within a text block and style using any CSS property. This freedom enables designers to create without having to think about structure first, but instead focus on their design vision.
#3 Export CSS
At any time you can extract the CSS code from your project to share it with a web developer. Just focus on the design, Reflow will generate the CSS properties for you in the background.
#4 Create and manage media queries (RWD)
Reflow is the best tool to adapt the design of your page to different screen resolutions. Place media-query breakpoints wherever needed to customize designs for different screen sizes.
#5 HTML preview in Chrome
#6 Advanced layout
In terms of layout, one of the most frequent requests Adobe has received from web designers is the ability to leverage absolute and fixed positioning. This is now possible since preview 2.
The z-index property specifies the stack order of an element. Web designers used to produced advanced layouts with bitmaps. With Reflow, using relative positioning and the z-index property, you can create advanced layouts such as a cover flow or a ribbon.
#8 Element naming
You must organize your page for yourself, or for the web developer that will use your Reflow project and extrude the CSS properties. Since preview 2, you can name your elements. This helps to keep your projects organized, especially as they grow more complex.
#9 Add / Remove parent
This is a new feature introduce in Preview 2. When you design a web page, it’s hard to anticipate the architecture of your page. Usually, a designer starts with DIV containers, and adds some elements. But you can judge that some containers are useless and confusing. And sometimes, you’ll realize that you need a parent element (to drop a shadow on a group for instance). This feature adds and removes parents without destroying the design of your page. It’s priceless. Thanks to this new feature, you can create a neat, light ,and clean architecture.
#10 You can try Reflow today!!!
You can download and install Reflow Preview 2 today for free! If you are not a member of the Creative Cloud, get a free membership, visit the “Apps” section and download Reflow!