Theming a Responsive Design Site with Multiple Developers
With consumers freely using portable devices, the need for responsive design eCommerce sites is on the rise. However, with responsive deisgn websites, your design documents can triple in size. This can be an overload for your front-end developers, and necessitate multiple developers working on one project. The issue with more than one developer theme a site is not the technical aspect, but rather the need to maintain a cohesive mindset of multiple developers working on the same project.
To keep things running smoothly, you are going to need three main software tools:
- Versioning application. This allows your developers to commit code and update the latest version through a repository. Some examples are GIT or SVN.
- Integrated Development Environment (IDE). This is a set of programs that runs from a single user interface. Two developers working with the same IDE can help create a unified code format and facilitate front-end best practices. IDEs also help with merging code and debugging code while working with the same code base. A couple examples of IDE’s are Eclipse and NetBeans.
- Voice over Internet protocol (VoIP).This may be obvious, but it is a very useful application that allows your developers to communicate in real time over the Internet. Examples are Google Voice/Chat or Skype.
Now that a toolkit is in place, you will need a list of inner-company-protocols your developers must follow. These protocols are created to increase communication and keep the code base updated. Some examples of these are:
- Developers must update and commit their code at least 3 times a day. This can be a bit of an over-kill, but front-end development using CSS (cascading style sheets) can affect elements throughout the entire site and developers can easily overwrite each other’s code.
- Plan on having a daily scrum. This should not only include developers, but also have a project manager to facilitate the meeting. The reason for the daily scrum (max .5hrs) is to keep communication lines open and point out any red flags/roadblocks your developers might have.
- Have an end-of-week update meeting. This expands upon your daily scrums because developers will be demonstrating their week’s worth of work to the Project Manager.
The last piece of the puzzle, which can be very complicated, is when two developers are working with one CSS file. CSS files are very difficult to merge due to the fact that if one adds or removes classes, it changes the ordered stack within the file. Also, when dealing with versioning software, it is easy to overwrite the CSS file.
A rule of thumb is to have a master CSS file and have your developers commit to separate CSS files. Then have them work on major sections of the site independently of each other. For example, have one work on the homepage while the other works on the category page. Only when the sections are complete do you merge them into the master CSS file.
Tools, protocols, and CSS managing can help put your front-end developers into a cohesive mindset. This will help knock out the growing volume of responsive comps constantly being thrown at them. Getting everyone on the same page will make for a smooth and successful responsive design project.
Ryan Hutchinson is an Applications Engineer on the LYONSCG Implementation team, and has been with the company since 2011. While focusing on front-end development, Ryan also is a Magento Certified Developer Plus and works with multiple platforms such as Demandware and WordPress. Ryan recently purchased a turntable and is currently collecting records, so please send him as much vinyl as possible!