Anybody who has collaborated on a project knows that one of the more challenging aspects of working in a team is communicating clearly. People tend to use slightly different terminology to say the same thing or use conceptual instructions to describe a specific result. None of these things are inherently faults: They are part of the creative process. On a good team, individuals will learn one another’s tendencies and, essentially, translate for each other to create a product that everybody is happy with.
When it comes to web development, however, broad instructions can end up slowing a project down as clients and developers struggle to communicate in clear, actionable ways.
It’s time to start bridging some of the communication gaps that can exist in a web development initiative. Read on for five tools that will help you provide stronger instructions to web developers, but first, here’s some general advice to get you started.
Communicating with web developers 101
In general, a web developer is going to go into a project attempting to blend personal expertise with the exact instructions given by a client. Conceptual guidance can be a great starting point. However, once you get into the nitty-gritty of a project, it is useful to provide instructions and feedback to ensure you get exactly what you need quickly.
Furthermore, it is vital to give developers as much information as you can, in the most organized way possible. For example:
- At the start of the project, provide an organized list of URLs to be worked on. Don’t assume devs will know based on your site structure and sales calls.
- Offer background into why you want changes made so developers can consider that context when executing your instructions on what to change and create.
- Use visual resources to help explain your ideas. From mock-ups to examples of sites you like, visuals can convey your vision more clearly than words.
- Ask questions yourself to create cohesion with the team and ensure you understand what the developers are thinking.
- Include precise instructions to as much of a degree as possible to avoid unnecessary back and forth on edits.
With these baseline concepts in mind, here are five extensions that you can use within the Google Chrome browser to help you communicate with developers.
1. Page Ruler
If you’ve ever looked at an image, header, navigation bar or any other part of your website and thought, “That doesn’t quite fit the space correctly,” then this is the tool for you. Instead of having to use general terms to ask a developer to adjust the size of an element of your site, Page Ruler lets you make pixel-accurate measurements to identify exactly how much something should be adjusted. Your developer can take that feedback and get something to the exact dimensions you want. Multiple rounds of “make it bigger,” “now it’s too big,” can be shortened to “make it 60 pixels wide.”
2. Chrome Mobile Emulation
You’ve done the background work. You know the people using your site tend to favor iPhones, for example, and want your site to look especially good for that device.
The Chrome Mobile Emulation extension lets you and your developers easily switch between different device and operating system interfaces and emulate those setups on their screen. You can test out different changes in a variety of setups to get a feel for what the user experience will be like and provide more detailed feedback on what needs to be done to the site to meet your demands. To get to this tool, use F12 to open the developer console and click the smartphone icon in the top-left corner. For more information, click here.
3. ColorPick Eyedropper
When rolling out a new site, you need your branding colors to be absolutely correct. You don’t want to go to a developer and say, “We are rebranding the site and want to go with a yellow, but a bright cheery yellow.” This type of description is not only problematic in that it gives developers too much room for interpretation, it also will make it difficult for you to replicate the same color across multiple mediums.
Instead, use the ColorPick Eyedropper to grab an example of the exact color you want. The extension will then give you the hex-code for the color, allowing developers to copy it exactly and making it easier to replicate that tone across channels.
4. WhatFont
Like colors, you need your fonts to be used consistently based on your standards. If you want to standardize text size, the spacing between lines and letters, use of bolding or italics and similar issues within your brand identity, you need to give developers precise rules instead of general guidance.
WhatFont, in simplest terms, offers basic information about the text on your page, allowing you to give precise instructions and feedback to developers.
5. Window Dimensions
Parts of your site will display differently depending on screen size, and being able to simulate different screen sizes can clue you in to issues and give you the visibility needed to communicate clearly with developers. That’s what Window Dimensions offers.
“The right instructions can go a long way in streamlining a development project.”
For example, the tool can let you go from saying, “A colleague on a laptop says the title gets cut off, but it looks normal on my computer,” to saying, “The title gets cut off on screens under 1200 pixels wide.”
Getting more from your projects
The right instructions can go a long way in streamlining a development project. At Pixafy, we work hard to create a strong partnership with our clients, and using these tools can help you get even more value out of services like ours.
