In today’s, we are going to explore a new tool from Adobe called Edge Reflow. I believe it helps creating a responsive Singapore web design “looks so easy”, definetely something a designer and developer should check out.
Adobe Edge Reflow is at the time of this writing in public beta stage, and available to download for free. To download, login to the Adobe Creative Cloud site, and you can find the app listed in the Apps Center page under the Edge Tools and Service section.
Check out: 50 Useful Responsive Web Design Tools For Designers
Setting-up Grid and Workspace
Edge Reflow comes with a set of UI that allows you to manage responsive layout without dealing with codes.
At the left of the workspace, you will find several options to control webpage properties; you can set the number of columns, column gutter, the width of the content and specify the unit measurement for those lengths – px, percentage, or em.
In Edge Reflow, You can set “break points” easily. The break points are the threshold where your Singapore web design styles will shift. To set the break points, click on the Plus button that is found at the top right of the workspace. Then, slide the page handler to the right or left and click on the plus button to set a new break point.
You can specify different styles for the elements on how they should look or adapt within each break points.
Adding Elements and Styling
Adding an element in Edge Reflow is as easy as a click. To create a new element, click on the rectangle icon and drag your mouse across the workspace. Upon selecting the element, Edge Reflow will display the properties that are applied, such as the width and the height, the margins, and the paddings.
You can find more options to add styles in the Styling tab. In this tab, you can add background color (even with gradients), borders (including border radius), and adjust the opacity for selected elements.
You can inspect the styles of the elements from the DOM Tree Inspector. It is found at the bottom of the workspace.
You can also preview the result in the browser by pressing Command + F12 (on Mac) or Ctrl + F12(on Windows).
Adobe Edge Service Integration
Reflow is integrated with other Adobe Edge services. When you are working with text, you are able to apply font families from Adobe Edge Webfont.
You can also test your Singapore web design across your mobile devices seamlessly using Adobe Edge Inspect.
Conclusion
Since this is only a Preview, there are several key features that are not included. In the current version, I can’t find how to export projects to HTML and stylesheet documents, and the Preference menu is disabled.
Still, Adobe Edge Reflow looks really promising as a tool in the niche, and it could be very helpful particularly for entry-level users. With Reflow, they can create a responsive Singapore web design without having to deal with the codes behind the screen.
Have you tried this tool?
     |
Creating Responsive Websites with Adobe Edge Reflow
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.