Can’t We All Just Get Along?

Daniel Coxon

Intern

It takes many skilled people to create a website; from interaction designers and content strategists to visual designers and web developers. With so many people involved it can be easy to end up with a camel instead of a horse. One part of the process that can lead to tension is the Design hand-over from the visual designer to the developer. This is especially true when the latter has to ensure a responsive Design is built. All of this tension can be avoided though.

Two people on computers with their backs to each other.

Respond To My Design

Why is responsive Design a source of tension between designers and developers? Doesn’t everyone want to create a well-designed, user-friendly website that works well on every screen? It comes down to how the designer hands-over the final visual Design to the web developer. These are the instructions the developer has to follow to build the site. A designer normally focuses their efforts on two screens – mobile and desktop. These are the most common screens people are going to interact with the website on. The developer has to build a website that will look, and work, well on every conceivable screen size. They have a much broader canvas to work with and may have to interpret aspects of the Design. These interpretations will lead to friction between the designer and developer, especially if they alter the intent of the Design.

Give Me a <br />

So where do these potential pain-points in the designer / developer relationship lie? Examples of the main issues for the developer when building a responsive website are:

  • Was a defined grid structure used and do all the elements on the page conform to that?
  • Have margins and padding been determined accurately or is the designer using the terms in a different context?
  • Has the designer considered breakpoints and media queries to make the site responsive?
  • Do the content blocks have fixed widths and heights or has the developer gone for a more fluid structure?

If these questions are only asked at the end of the Design process, then there will be problems. The designer will be reluctant to make changes at this late stage in the Design process. It could be unclear to the developer what the exact specifications are, or what happens on different screen sizes. This will cause them to have a lot of questions for the designer. No one likes being bombarded with questions about a project when they think they have finished with it and moved onto the next one. Conversely, the developer just wants to build the website and does not want to keep having to ask for specifications. Nor should they have to. All of this can be avoided.

Man sitting in front of computer in discussion with other people around a table.

Pixel Perfect

Effective and early communication is the key to solving this problem. There are a number of aspects that the designer and developer can agree upon before the full work begins. This can help reduce stress, ensure everyone is on the same page and stop the developer hassling the designer with questions later on.

For example, before a designer sets out the grid they are going to use it should be agreed with the developer what type of grid it is going to be. Bootstrap is a common grid system used in web development. It comes with defined padding for the columns within which the content sits. This is something that the designer could be aware of and incorporate into their Design. The grid structure is a key part in making the website responsive.

Other responsive Design considerations should be agreed as early as possible too. Setting break-points and deciding how measurements will be defined at the different screen sizes is critical. Do we really want to use pixels to measure margins, padding or font-sizes? Pixels introduce a level of rigidity that goes against responsive design. Maybe percentages, ems, vh or vw should be used instead. Agreement on these points ensures everyone is working within the same constraints and prevents problems. For example, it stops content overflowing its container when the screen reaches a certain size due to incorrect styling.

Responsive Design

This is just a short list of potential problem areas that could arise, and I am sure every developer or designer could add to this. Ultimately it is the designer’s job to Design the website and the developer’s job to implement that Design. The designer and developer should talk to each other early in the process using a lingua-franca to bridge their respective worlds. This will reduce any tensions that will arise later when implementing the Design. It will also ensure everyone is working towards the same goal of having a website that works well on every screen. Maybe then, as Joao Guerra has argued, we can ‘give peace a chance’?

At Graphic Mint we always use a collaborative approach on our Web Design projects, following the principles of User-Centred Design.