Skip to content
This repository has been archived by the owner on Sep 23, 2020. It is now read-only.

Commit

Permalink
created post for design plus development
Browse files Browse the repository at this point in the history
  • Loading branch information
JoeMorgan committed Sep 7, 2015
1 parent 3d2d672 commit b29d98d
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 18 deletions.
6 changes: 4 additions & 2 deletions _layouts/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,14 @@ <h1 class="link-post"><a href="{{ site.url }}{{ post.url }}" title="{{ post.titl
{% else %}
<h1><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h1>
{% if site.posts.size > 1 %}
{{ post.content | truncate: 1000}}
{% if post.content.size > 1000 %}

{{ post.content | split:'<!--break-->' | first }}
{% if post.content contains '<!--break-->' %}
<p class="read-more-link">
<a href="{{ site.url }}{{ post.url }}" title="Read the rest of the post here">Read the rest</a>
</p>
{% endif %}

{% else %}
{{ post.content }}
<p class="read-more-link">
Expand Down
81 changes: 81 additions & 0 deletions _posts/2015-09-05-devign.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
layout: post
title: Development + Design = Devign?
author: joe_morgan
excerpt: "As a technologist in a digital advertising agency, one of the constraints that I often notice lies between development and visual design. And while I don't seriously think another word mashup like &quot;devign&quot; will stick (too cheesy&mdash;it would scare designers away), I think the devops approach would help."
tags: [development, design, devops, agile collaboration, responsive design]
comments: true
---

As a technologist in a digital advertising agency, one of the constraints that I often notice lies between development and visual design. And while I don't seriously think another word mashup like "devign" will stick (too cheesy&mdash;it would scare designers away), I think that the devops <em>approach</em> would help improve the way the two domains work together.

When I spoke at <a href="https://twitter.com/search?q=%23wnin2015&amp;src=typd" target="_blank" title="What's Next Is Now 2015 on Twitter">Sapient's What's Next Is Now</a> Conference in Gurgaon in August, I brought up the challenges posed by responsive design, and described one way in which we might apply the principles of devops to meet those challenges.

<iframe width="560" height="315" src="https://www.youtube.com/embed/F9JRKOPeATo" frameborder="0" allowfullscreen></iframe>

But before elaborating on the idea mentioned in the video, let's take a step back to describe the problem that we're trying to solve.

<!--break-->

##An Old Problem##

There has always been some level of trouble going from design to implementation. Creatives and technologists think differently, approach problems differently, and follow different processes to get their work done.

These differences are compounded by an element of separation&mdash;both physically, in terms of working space, and temporally, as the usual waterfall approach means that developers show up after design is done, and designers leave to work on something else as development starts.

The degree of separation tends to be proportional to the size of the company&mdash;a small shop may have people who do both design and development (also common among freelancers), but this model doesn't scale very well. Larger organizations trade in volume, and tend to have more specialists.

So how does all of this play out? Without technologists in place early on to weigh in, designers might choose to take a path that ends up being really difficult to implement, or might <em>not</em> take advantage of some available technology, purely because they didn't know it was there.

On the other end of things, without designers available during development, the integrity of the creative can suffer, and the effort required to address a pile of visual defects at the end of a project can be monumental.

##Making Matters Worse##

Just when we thought we had a handle on the situation, when we became used to overlapping the handoffs a bit to get around the limitations of waterfall, the mobile web arrived, and half-measures were no longer good enough. Enter responsive design.

A true responsive experience looks cohesive and <em>intentional</em> at any viewport size or resolution, not just the extremes of mobile and desktop. No reasonable number of static comps are going to help a development team get there. A fully collaborative model is the only way.

But it's 2015, and <a href="https://24ways.org/2011/collaborative-development-for-a-responsively-designed-web/" target="_blank" title="Collaborative Development for a Responsively Designed Web by Paul Lloyd">people have been writing</a> about the need for a new, integrated process since shortly after the advent of responsive. There's also <a href="https://bradfrost.github.io/this-is-responsive/resources.html#design-tools" target="_blank" title="Brad Frost - This Is Responsive">a slew of tools</a> available to help create responsive experiences. So why is it still so hard?

Well for one thing, designers and developers often <strong>can't</strong> work side by side. Many brands work with multiple vendors, and one partner will be charged with design and another with implementation. Even within a single company, teams are often distributed.

##This One Weird Trick##

It's tempting to think that there's some shortcut that will remove all the challenges of collaboration between design and dev.

Lots of companies have released tools that seek to remove development from the equation entirely. <a href="http://macaw.co/" target="_blank" title="Macaw.co">Macaw</a> suggests, "stop writing code, start drawing it", and the website for <a href="https://webflow.com/" target="_blank" title="webflow.com">webflow</a> tells prospects to "Create professional responsive websites. Without writing code."

But like getting six-pack abs in four weeks, the reality isn't so easy. Questions of code quality aside (as a developer myself I'm always a bit skeptical of <a href="https://www.adobe.com/products/dreamweaver.html" target="_blank" title="Adobe Dreaweaver">this kind of thing</a>), these applications can't build for every scenario. We still need developers.

The <a href="https://www.google.com/trends/explore#q=learn%20to%20code" target="_blank" title="Google Trends analysis of the phrase &quot;learn to code&quot;">rise</a> of the "learn to code" movement is possibly a step in the right direction, since anything that promotes interdisciplinary knowledge sharing will be helpful (you could also teach developers the importance of design, for added effect). But shared understanding alone isn't enough.

##Devops for Design/Dev##

So how can we leverage automation and improve collaboration to ease this constraint?

The idea from the above video was to create a tool that would tie into the normal development workflow, using something like Jenkins or git post-commit hooks to push code to a place where design teams could review it.

The process could also inject a <code>&lt;script&gt;</code> tag to add a toolbar to the page, which would give designers the ability to easily resize it and provide in-context comments. Developers would have the option to go to the tool themselves to see comments, or it could be integrated with JIRA to automatically create defects associated with the feature branch that had the commit in the first place.

<figure>
<img src="/images/devign.jpg" alt="Screenshot of a hypothetical design/dev collaboration tool" />
<figcaption>
A screen from the hypothetical collaboration tool. Toolbar design inspired by the <a href="http://responsive.victorcoulon.fr/" target="_blank" title="Responsive Web Design Bookmarklet">Responsive Web Design Bookmarklet</a>
</figcaption>
</figure>

But to be clear, the point of me putting this out there is not really about trying to revolutionize how we approach responsive design. The "tool" I showed was pretty basic, and some existing products, like <a href="http://bugherd.com/" target="_blank" title="bugherd.com">bugherd</a>, do some of these things already.<a href="#note-to-bugherd" title="Jump to a message intended for the folks at bugherd">*</a>

It's more about demonstrating that the <a href="http://itrevolution.com/the-three-ways-principles-underpinning-devops/" target="_blank" title="The Three Ways, IT Revolution Press">ideas behind devops</a> are applicable beyond the world of build/release. The devops toolchain could provide <em>serious</em> value to other disciplines, and it's up to those of us with some exposure to the relevant practices and technologies to help identify these opportunities.

##Enough from Me##
I'll be totally honest&mdash;I'm still trying to hone in on the type of content to highlight for this blog. I really do think that bringing devops to a wider audience could have a <em>huge</em> impact on the way we all work, but I need your help.

<p class="over-to-you">
I'd love to hear your thoughts. Is this type of content useful to you? If not, what would help? Am I missing some key element of devops, or ignoring the real problems behind design and dev collaboration? Leave a comment!
</p>


<p class="footnote" id="note-to-bugherd">
*If the folks from bugherd are reading this, I didn't know about your product until after I gave this presentation, and it looks awesome. But I really do think more responsive-centered features, like the ability to jump to different viewport sizes where comments have been made, would be super useful.
</p>
14 changes: 0 additions & 14 deletions _posts/2015-tbd-devign.md

This file was deleted.

4 changes: 3 additions & 1 deletion _sass/page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ body {
@include prefix(12,2);
}
}

.fluid-width-video-wrapper{
margin-bottom:20px;
}
/* Top navigation links */
.top-navigation {
@include grid(12,10);
Expand Down
7 changes: 6 additions & 1 deletion _sass/typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,12 @@ figcaption a {
bottom:20px;
text-align:right;
}

.footnote{
font-size:11px;
}
.over-to-you{
font-weight:bold;
}
/*
Figure captions
========================================================================== */
Expand Down
Binary file added images/devign.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/original-art.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/youtube-banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b29d98d

Please sign in to comment.