Our team is lucky enough to be in a position where we have both
designers AND developers working on the same code base in parallel.
Since Ruby on Rails adopts the Model-View-Control pattern for separating
business logic from the presentation layer, weāre able to give our
designers a lot of breathing room to to design the interface, whether
itās for interaction or aesthetic reasons. However, sometimes this
breathing room has resulted in small bugs slipping into the application
interface. In general, nothing disastrous, but each bug that slips into
the queue, slows down the project and we want to avoid as much of that
as possible.
Iād like to share a few issues that weāve seen occur on various
occasions, and then show you what weāve done to avoid them happening
again.
Scenario #1: The case of the changed div id, (victim: designer)
- Designer adds a few HTML elements to the page, defines an
id on a
<div> tag and styles it with CSS.
- A few days later, a developer needs to make some changes, tests it
in their favorite browser and commits.
- Later, the designer doesnāt understand why the styling is all messed
up. āIt was working fine.ā
- ā¦minutes, hours⦠go by where the designer tries to track down
the issue. āOh! Someone renamed the
id in this <div> tag. Sigh.ā
- Developer apologies, but explains that he needed to do it because he
needed to make it work with his new RJS code.
Scenario #2: The case of the changed div id, (victim: developer)
I could outline a few other examples, but I really wanted to highlight
these two types of situations, as our team has seen this happen on
several occasions. Luckily, weāve learned through these experiences and
have taken some measures to try and avoid them in the future.
Moving forward (together)
Both of the examples above, were essentially the same problem, but
resulted in problems for a different role in the design and development
cycle. While, Iāve definitely been the victim of #2 several times
myself, I know that Iāve also been the guilty of #1. So, what can we do
as designers and developers to work with each other without causing
these little problems from occurring? (remember: many little problems
can add up to a lot of wasted time spent resolving them)
Several months ago, I had a meeting with
Chris (User Interface Designer) and
Graeme (Lead Architect/Developer) to
discuss this very problem. At the time, we were implementing a lot of
Ajax into an application and were occasionally running into Scenario #2.
We discussed a few possible ways of communicating that, āyes, this div
id should NOT be changed (without talking to a developer first)!ā
We discussed using ERb comments in our views to do something like the
following.
<% # no seriously, please don't change this id, it's needed for some Ajax stuff %>
<div id="notification_message">
...
We all agreed that, while effective, it was going to clutter up our
RHTML code more than any of us desired.
Team Response: Meh.
Idea 2: Reserve idās for developers
Another idea that came up, was to ask that designers only use classes
and ids wold be used by the developers when they needed it.
<div id="developer_terriroty" class="designer_territory">
...
Chris pointed out that this wasnāt an ideal solution as there is a
distinct case for when to use ids versus classes.. and he is very strict
about adhering to the HTML/CSS standards.
Team Response: Not hot about itā¦
Idea 3: Naming convention for Ajax-dependent elements
The third idea that was discussed, was specifying a naming convention
for any elements that were needed by our Ajax code. We played around on
the whiteboard with some ideas and settled on the idea that weād prefix
our idās with something easy to remember for both designers and
developers.
We agreed on⦠x_ (x underscore), which would make an element id look
something like this:
<div id="x_notification_message">
...
x == ajax⦠get it?
While this adds the strain of typing two more characters to much of our
RJS code, we donāt run into Scenario #2 very often anymore.
render :update do |page|
page[:x_notification_message] = 'Something exciting happened... and this is your notification!'
page[:x_notification_message].visual_effect :highlight
end
or in client-side JavaScript (where we also use this)ā¦
$('x_notification_message').do_something
I find that this helps our team keep a clear distinction between what
can and shouldnāt be changed in the views by our designers. Sometimes
they have a good reason to do so, but they know that if there is x_,
then they should ask one of the developers on the team for assistance in
renaming it without causing any problems in the application. It also
allows our designers to add classes to these elements, or style the id
that weāve defined.
Team Response: Wow, was that all we needed to agree on? Hooray!
This leads me to some other problems that have/may come up, but Iāll
discuss that in my next post on this topic, when Iāll show you how we
can use RSpec to avoid these sorts of designer versus developer
problems.
If youāre working in a similar environment, how are your designers and
developers working, together, in perfect harmony?
Until next time, remember to hug your
designer.
ā¦and if youāre still having developer design your applications,
consider hiring a designer. ;-)
UPDATE: changed examples after a few comments about using div_for as
another solution. (see comments for details)