Nothing in the design process is absolute. I am sure many designers can relate, it is frustrating when you create a design and then when you see the final product (after development) the design looks different than what was intended. It is fair to say not all designs translate in the development process but as a designer we should start designing with developers in mind. In a world that isn’t perfect and where you have little control, designers, it is time to be flexible. Designer’s take pride in layouts, making sure each element has a purpose and it’s own place. Crafting “pixel perfect” designs is an achievement that we strive for after years of hard work and practice. Because of the effort that’s put into designs, we have a tendency to get upset with developers when our layouts haven’t been transformed perfectly.
We should not fault the developer
Recognize that this is a glitch within the design process. Our static, “pixel perfect” comps will only ever truly be that…static comps. Once we bring a design to life through code we have very little control over how someone will view it. What we should be striving for is a deeper and closer connection with developers, working in tandem throughout the process. As designers we must be flexible and think of each composition no longer on the basis of exact measurements, but relative proportions. This applies to things like height and width in relation to other page level elements, i.e. margin and padding. The logic is quite simple, an element with a width of 400px over 1300px of visible area is perfectly reasonable, but on a small screen it will be cropped out.
The Solution
The solution here is either create a mobile based layout that accounts for smaller device sizes, or to ensure that the item being cropped out on smaller screens isn’t pertinent to the use of the site. Which ever route you take a certain level of foresight is necessary to ensure that proper design and development are accomplished. I know it can be frustrating to see developers work in non-absolute units of measure. However abandoning pixels and switching to ems, rems and percentages make for a more flexible and fluid layout. If designers start thinking about these more liquid and dynamic measurements initially, there will be an easier transition from static comp to developed website, allowing everything to remain harmonious and relatively intact on different device sizes.
Color
This adaptable mindset also applies to colors. We can’t predict the calibration of each user screen, something that varies according to style, manufacturer and specific light conditions. Websites and apps can’t be handled like a Pantone catalog on printed paper, making it common for subtle color variants – which may appear too dark, shiny or contrasted.
How do we combat the unknown here?
By selecting a broad range color palette that suits both the device that the product is being viewed on, and also the matches the tone of the business. Learning about the technical characteristics and limitations of a browser is vital in order to avoid unexpected surprises when the product is finished. After interpreting the HTML, CSS and Javascript the browser renders a product according to its capabilities. Sometimes forcing us to think beyond devices, and to start thinking in terms of which browsers. For years IE was the bane of a designers existence, limiting the boundaries that we could push, because it was so far behind technically. Knowing which browser your design has to be supported in will help you determine what and where you can push the limits. So, designers – let’s start working and understanding the development process so that we can all be rockstars when designing for digital media.
