65% of the Population are Visual Learners

Responsive website builders for the visual thinkers on every team.

Responsive web design is all the rage in today’s design world. The trend is quickly becoming an industry standard and yet the concept can be difficult to translate to clients and team members during the development work. Luckily, we have two tools that are here to help!

Many designers are understandably hesitant to use code generated by a design program and while these tools are capable of such, they can be used independently of the generated code and are great for quick prototype development; A highly valued asset in the design thinking process.

The market is vast, but today we’ll introduce two of the newest, attention grabbing entrants in the world of visual responsive website builders: Adobe Edge Reflow CC and Webflow.


Editing dashboard in Adobe Edge Reflow CC

Adobe Edge Reflow CC

Edge Reflow is part of Adobe’s Edge tool family. In simple terms, this downloadable application makes Photoshop files more responsive-friendly and helps to capture the “in-betweens” of responsive design, which can be a challenge to communicate when presenting clients with design concepts. The current lack of publishing and exporting functionality makes the application best for initial design purposes. (The generated CSS can however, be copy and pasted for downstream development of the actual site).

You can begin with a blank canvas or import Photoshop content, both images and design work. The design process in Edge Reflow is similar to Photoshop (a plus for Photoshop focused designers) and allows designers to visually reposition elements rather than edit code, a huge plus for visually minded thinkers.

The application shines in its definition of breakpoints. Unlike Webflow, the entire responsive spectrum is displayed and the easy addition of maximum and minimum break points allows for a mobile first design approach (something we love at Ideahack).

A solid understanding of HTML and CSS concepts is needed for the application and unfortunately, adding your own media is a challenge. You can however set a placeholder for media to be edited later in the development. As the application is technically still in public preview mode, changes will likely be made as user feedback comes in. We see bright things in this tool’s future.


Design examples from Webflow

Webflow

Unlike Edge Reflow, this in-browser drag-and-drop editor requires a monthly subscription (with various pricing levels for teams and individuals). Subscription includes content hosting or content can be easily exported (unlike Edge Reflow) to your desired location.

You begin on the Webflow dashboard either with a template (found on the template marketplace) or from scratch. The combination of generic operations, content and formatting options and customizable widgets gives you lots of room to get creative, dragging a multitude of options into the page structure. The easy addition of media, intuitive nature and easy sharing of content across pages are winning points for this application.

Although designing on Webflow is drag-and-drop, the pieces are a puzzle shaped around CSS properties so you will need a basic knowledge of these concepts (ie. padding, margin, position ect.). The application approaches responsive design with the traditional three device standpoint which may grow to be a larger flaw as the industry continues to evolve.


Both applications are excellent for the rapid creation of visual representations of responsive webpages. Use these for client presentations or to communicate designs to other team members. As the industry continues to evolve, we at Ideahack can’t wait to see what the future of responsive web design will look like and what tools will be developed next.