Topics: Design, Development, Responsive, Dev Team

Designing Responsively in 2015

Hey, John here from the Dev Team, where our primary concern is delivering the best quality product no matter who or what might get in the way. To mix things up a bit I'll be giving an overview on the newest wave of web design tools cropping up (ha) from this era of AdaptiveFluidResponsive design. Then we will take a look at a few of the most prominent applications.

This missing link between design and development came from losing all sense of a "standard" browser size. Traditionally in web design a comp would be made for the desktop view, but then there also needed to be a mobile comp, and an iPad comp, and an odd-numbered year largish rounded rectangle comp. And, to flow between these we designed choppy breakpoints in Adaptive Design, screen percentages in Fluid Design, and now a hybrid of behaviors with Responsive Design. But this new class of application is purposed with giving control back to the designer.

Tools found for responsive design generally have all the following features:

  • Drag-and-drop UI for creating pages.
  • Responsive grid for aligning content.
  • Codeless controls to adjust styling and layout css.
  • Ability to set breakpoints where overrides can apply.
  • Sliding controls to view how designs change for screens.
  • Exportable html + css code.

The current mindset of these applications is split between two distinct variants. Half of these are subscription based web applications in which you can design and launch limited websites: Webflow, Froont. And the other more firm-friendly side consists of OS software to export prototype code and skip flat design comps: Adobe Edge Reflow, Macaw, Pinegrow.

Webflow is the dream of the one person team cranking out small websites. It is the easiest to get started with and requires the least knowledge of code. In the web development pipeline it will get you from nothing to launched static site. Webflow will also handle hosting your sites and even simple form submissions. The major drawback with it is the limiting pricing brackets that put caps on quantity of sites and pages.

Edge Reflow is a great starting point if you already have Adobe Creative Cloud. Its location in the pipeline is to either replace or supplement the design comp. Responsive wireframes and designs can be built inside of it or a properly formatted Photoshop PSD will import directly. Anyone who has tried to communicate to a client how a background image can scale or crop will find this as a blessing. And although the code isn't designed for production use, all content formatting can be scraped out of it for repurposing.

Macaw is the newest, fastest growing, and most promising of the responsive design tools. It is targeted towards production development with a focus on generating usable code. The end goal for it in the pipeline is to replace deliverables from wireframe all the way to actual front-end code. But because it has the furthest reach it also requires the most knowledge of html, css, and js to get the finished product out of it. If Reflow is built for the designers then Macaw is definitely for the developers.

All of these applications are still in their early stages so it isn't clear what approach will perform best. And, none of them offer any sort of direct integration with a CMS like WordPress or Drupal. But, there have been so many of these tools emerging over the last few years that I find it hard to believe front-end design and development won't drastically redefine itself... preferably without PSDs.

← back

Let's Chat

Are you looking to hire a digital team for your campaign or committee?  Let’s chat and see if we would be a good fit for you.

Please fill out the form below and we will get back with you.  Or, call us at 317.886.4438.

Thank you for considering PG.