Team Collaboration And Closing Efficiency Gaps In Responsive Design

Advertisement

Responsive design ushers in complexities that require a more involved design and implementation process. Because of this, the effort has piled up on the front end. Working in silos, where you talk to each other only occasionally or during scheduled meetings, has too many unknowns. Let’s look at how these new challenges create opportunities to work together better.

We have to kill the mentality that there is an assembly line of workers waiting for it to be their turn, and instead embrace more focused collaboration across the project’s entire team.

Getting Teams To Buy-In

Four or five years ago, before responsive design was a “thing,” I was asked to make a comprehensive checklist that our team could follow when building any website. Inevitably, an unexpected task or two would come up, along with a tightrope of a deadline, and we never looked at that checklist during the build. These days, the thought of making a step-by-step checklist for a responsive design build sounds like a cruel joke.

Collaboration is not something you can force on the team.
Collaboration is not something you can force on the team. (Credits: Jeffery Zeldman 1)

I’ve been on a small team building a large media website over the last year. It did not take long after the project kicked off to realize that our design team’s best work is done in tandem. We’d solve small problems, create momentum and then solve bigger problems.

It is crucial for all roles to be looped in and to have meaningful access to each other, not only for decision-making, but for brainstorming and healthy debate. Empower the team and cultivate an environment of encouraged collaboration and skilled problem-solving.

Make The Process More Transparent With Lightweight Deliverables

Sharing the decisions being made with the project’s entire team as the design evolves is a great first step. Keeping deliverables lightweight (i.e. sketches or style prototypes that demonstrate strategy instead of pure visual design) will take the pressure off the big reveal. This, first, keeps you from going too far down the rabbit hole without getting feedback and, secondly, creates trust through transparency — when the whole team gets to see the process, it is more likely to make informed decisions.

An example of our team’s baseline CSS style guide for each new project.2
An example of our team’s baseline CSS style guide for each new project. (Large preview3)

When working on something new, prototype ideas and then create interactive concepts in the browser, thus reducing the likelihood of miscommunication about what will change when pieces are made interactive.

The Web is continuing to distance itself from the outdated “page” metaphor, and more and more design systems are emerging. These design systems are often concretely established by the creation of a CSS style guide. As the guide becomes more robust, gaps get filled during development.

Demoing Interaction In Its Simplest Form

Showing a demo that has the desired functionality in a tool like Codepen4 or Dabblet5 is an added efficiency, and the functionality can then be reused as the website is planned across devices. There is no need to even upload anything to show it to others.

Codepen demo image.6
Codepen demo image. (Image source: Tyler Fry7)

Instead, fire up a new Pen, load your dependencies (for example, if you are working with Zurb Foundation, you can add that external CSS and JavaScript through a content delivery network8), and get a working example in front of the rest of the team. Show how that off-canvas navigation looks in its simplest form to get feedback before layering it in a content management system or introducing another complexity.

Live by the Browser, Die by the Browser

Look at reflowing content on different devices. A static example cannot be visualized when content reflows from portrait to landscape. Interaction will trump documentation. To show how a responsive design works, nothing tells the story as effectively as opening a browser and squishing and expanding the viewport in front of someone. Plus, getting the design in code brings added efficiencies, such as showing off CSS animations and showing active, focus and hover states.

How To Think Collectively As A Team

Right now, there is an outdated habit of delegating chunks of work to individuals. Problems need to be solved with momentum; otherwise, spinning your wheels until the next checkpoint becomes too easy. Reach out for feedback with non-disruptive methods of communication, such as Basecamp9, Slack10 and Skype, which are good ways to get unstuck without dismantling productivity through time-intensive meetings or phone calls.

The goal is to get this communication loop right, not only with the internal team, but with the client and any other decision-makers. You are not just depositing information, but rather thinking collectively.

War Rooms

A war room is a dedicated space for a team to communicate about a project in a focused setting, without interruption. This sends a message to the rest of the organization that everyone in the war room is off limits in terms of availability. More importantly, it cinches these feedback loops by way of proximity. Going “heads down” is an effective way to get designers and developers on the same page during crunch time (testing, milestones, launches, etc.).

A Shift in Mindset

Decision-makers need to be involved in the design process. A good rule of thumb is that, whenever a decision introduces a layer of complexity that will change the overall project, check that it doesn’t affect other areas of the project. Separate the act of unveiling the design from the process by sharing assets constantly during the design process.

Balancing And Powering Through Efficiency Gaps

An efficiency gap is created whenever a team’s execution breaks down due to a lack of communication or lack of knowledge about the design or functionality. When you are working on a design that scales proportionally, those miscues multiply quickly, which makes the discovery phase that much more important.

Ask questions. On the front end, missing design details is easy. Pull in the designer to make sure you are not bastardizing their thinking. Reviewing code helps to keep team members accountable for their work. Explain your decision-making process to each other to make sure you’re making thoughtful choices.

Making a website responsive is not a one-person task. Designers can work on comps to present ideas more concretely, without making any hasty assumptions about how exactly the design will look at each breakpoint. Rather than trying to create multiple pixel-perfect examples, we find it best to rely on the website’s existing foundation and get the work into the browser quickly to test it with our existing grid.

Think “Teamwork” Instead Of “Assembly Line”

The responsive design process requires both communication and practice if the team is to make any headway towards a finished product. Making sure your team is working with lightweight deliverables, demonstrating interactions in their simplest form, thinking collectively as a team and striking a balance are all meaningful steps towards making sure the result matches the vision.

Communicate Often. Work in Tandem. Trust the Team.

The focus on efficiency and a better workflow will reinforce the overarching goal of making great websites. Continued collaboration across the project’s team and a thoughtful approach in each area of the process will enable you to refocus and accomplish more with iterations, rather than with reworking.

Let’s work together better and embrace a unified approach on all fronts to design for all devices and experiences.

(al, ml, il)

Footnotes

  1. 1 http://www.flickr.com/photos/zeldman/12591652554/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/05/02-css-style-guide.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/05/02-css-style-guide.jpg
  4. 4 http://codepen.io
  5. 5 http://dabblet.com/
  6. 6 http://codepen.io/frytyler/pen/jwlyI
  7. 7 http://codepen.io/frytyler/pen/jwlyI
  8. 8 http://cdnjs.com/libraries/foundation/
  9. 9 http://basecamp.com
  10. 10 https://slack.com/

↑ Back to topShare on Twitter

Brian Krall is a Sr. Front-end Developer at Duo Consulting, a web design agency in Chicago, Illinois. He has been working in the web for 7 incredibly fun years. Brian writes at Sideproject, speaks, and plans, builds websites for a living. He holds a degree from the University of Iowa, and spends his free time with his lovely wife and slobbery golden retriever.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Niels Matthijs

    May 15, 2014 4:57 pm

    Cannot agree more, especially when working on more complex websites, for big clients and with specialized people handling separate tasks within the project. While planning might be tricky (especially when people are working on multiple projects at once), the gain in quality, speed and overall customer satisfaction is immense.

    • 2

      This EXACTLY the philosophy that drives RapidMoon (we are a London-based responsive web-based frontend builder platform – currently in Beta) and we want create a collaborative platform that makes the designer-developer-businessowner iterations (READ: Bickering!) a thing of the past. Our vision is Lean UX – a lot of people confuse RWD with ‘mobile-ready’ and look at it as a tactical tool; in our view, RWD and Adaptive are key enablers of Lean UX and superior CX.

  2. 3

    I applaud the efforts of Monkey #4. (the one holding the ladder)
    However, I’m a bit undecided concerning its full purpose and motivation.

    Is this a Yoga monkey, and just stretching out the bum some?
    Is it a Yoda monkey trying to use the power of the force to get something?
    Is it shaking the ladder to see if it’s safe to ascend to a higher place or does this represent a desire for a higher dimension?
    Is it wishing for a banana up there, but unwilling to make the first step?
    Perhaps it’s more sinister: could it be trying to knock off the big banana who is at the top of the ladder? Whoa – evil monkey!
    Not seeing the top of the ladder adds so many questions to this entire process.
    Does biting the tongue really help?

    Did monkey #3 already try all the stuff #4 is up to now, and decided that a nap is a better solution?
    Why is one leg of the ladder is on monkey #3’s butt?
    Is this a set up for a prank or perhaps a critical safety issue?
    Critical question . . . is monkey #3 actually alive?
    Perhaps monkey #4 is reenacting the compelling story of how #3 fell from this shaky ladder.
    (#4 could be a trial lawyer monkey)

    Also, which of our team members are best characterized by monkeys # 1, 2 and 5?

    In consideration of the full complexities of this situation, there are just far as too many unanswered questions and points for discussion. Conducting a collaborative discussion concerning “collaboration” would be best, at least compared to monkeying around with a long email sting.

    Great article.
    My pet peeve is long stringing reply riddled email conversations that have to be deciphered.
    Ironic: After emailing this article to our entire team, we are actually having a collaborative discussion of this!
    Humor is my tool of choice to survive the design and development dysfunctions in our office.
    Super combo of monkeys and process sanity.
    Awesome and well done Brian!

  3. 4

    Great points. It took a while, but our team finally made a shift in mindset. We bailed email and now are completely on a team chat program called Glip and still use google drive for our file sharing. We all work remotely. Stable video, task management . . . Its a great way to keep the conversation flowing throughout the day.

    • 5

      Hey do try http://www.teamgum.com, its great team collaboration tool for designers/marketers. It helps share webpages/articles/links directly through browser extension. You can access what others share ,discuss, recommend, comment there and then. No distractions of leaving your workflow, yet your team is right next to you, when you need them or they need you. ;)
      We sell our view points, help solve teammates issues, hit acknowledgements, drive a culture and access what others are reading through this tool.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top