Tips on coding a web design close to reality

Throughout my experience as a front end developer I've often heard designers complain about how developers fail to code a design accurately. Many designers ask their developers to make a webpage "pixel perfect". Queue developers rolling their eyes! Here I'll share my tips for bringing your code as close as possible to that psd.

Setting expectations

One of the most impactful changes you can do is to make sure to set expectations with your designer. At the start it's a good idea to get your team together and figure out which parts of the design will or will not work in reality. If you're lucky you'll have an amazing product team that has done this for you. In reality the developer usually comes up with a technical pain point in the design. For example, if you find that some of the design won't translate in all browsers, you could come up with a compromise with your designer. For example, our gallery of canned responses uses a masonry layout. This layout doesn't look as perfect in Internet Explorer, but we were willing to put up with this because it meant we could use CSS for the masonry layout and not require to use a heavy JavaScript polyfill plugin. This slight compromise means our website will not have to forsake any page speed for the design.

Canned responses gallery view in a modern browser
Clarabrige Engage Inbox canned responses gallery view in a modern browser

Canned responses gallery view in a Internet Explorer
Clarabrige Engage Inbox canned responses gallery view in Internet Explorer 10

Ideally you only use JavaScript when absolutely nescessary for a design. I've seen it happen before that designers have asked for a <select> dropdown list of <option>'s to be styled, as the default is not as pretty as in other browsers. This requires a JavaScript plugin (I wrote one to do this myself at one point). But it's completely unnecessary when it does not affect the user experience that deeply. Users are used to the style of the default option list and it's not worth adding the extra JavaScript to your website. It's important to weigh up where your JavaScript is really enhancing the user experience. A slower website makes for a less smooth user experience!

Useful Plugins

Let's check out some plugins that can come in handy to keep you and your designer happy!

Pixel Perfect

Designers love when I use this plugin! You can pop in your design image and then overlay it on top of your webpage. Then you can use the inspector to adjust margins and padding in between elements.

My main advice when using this plugin is to be careful about fonts. Use the plugin to measure the distance between elements rather than making the entire page a perfect copy of the PSD. This is because the font in a PSD will not look the same in every browser. The most important part is getting the line height, margins and padding correct between the text and the next element. In this example you can see that the "Canned Responses" title is not the exact same in the PSD layover.

Using the pixel perfect plugin
Using the pixel perfect plugin

Using the pixel perfect plugin with the inspector
Using the pixel perfect plugin and adjusting padding to match the overlay mockup

Ruler plugin

A good ruler plugin is great for when you want to maintain a consistent guttering/spacing between elements in your design. It also prevents arguments with the designer over whether some spacing is 15px or 20px ;)

Usually spacing between elements is consistent in the design - so if you do spot an inconsistency, ask your designer. E.g. If your webpage h1 headings are normally 16px, but in the design they are 15px, this could be a slight mistake!

Using the ruler plugin
Using a ruler plugin to maintain consistent spacing

Useful software

Zeplin

Zeplin is a program that acts as a middleman between developers and designers. The designer can input the font sizes, spacing between elements and content for the developer to copy. This prevents the developer having to guess the dimensions of the design. It also generates a little bit of CSS - although in my experience you don't end up using most of that. Some CSS properties like box-shadow are useful. It's also useful for translating hex colours.

Examining the spacing between elements in Zeplin
Examining the spacing between elements in Zeplin

Examining font details in Zeplin
Examining font details in Zeplin

Examining CSS rules in Zeplin
Examining CSS rules in Zeplin

Invision

Invision is an alternative to Zeplin, but it also includes project mockups. The inspector tool is very similar to Zeplin, so it depends on if you need software for your mockups in addition to software for being the "middleman" between developers and designers.

Using the inspector in Invision
Using the inspector in Invision

Using the browser inspector

This is the most important tool of course! Using the up and down keys in the CSS rules section you can tweak the width of elements until you get it right. Editing the styles in the inspector is where I spend most of my time when coding a design.

Using the browser inspector
Using the browser inspector

Utilize the device toolbar to get a preview of your site in other devices. When you're working on compatibility for Internet Explorer, I recommend utilizing the inspector on IE11 (or the latest IE version) as it will give you a preview back to IE8. The inspector in IE11 for compatibility mode gives you a pretty good idea of what something looks like in older versions. When you've done enough tweaking using the compatibility mode you can double check the real IE browser in a tool like Browserstack. If you don't have BrowserStack you can download a VM on modern.ie.

Always account for responsiveness

It's likely your designer will give you a separate spec for the mobile version of your webpage. If they don't, you can ask them if they'd like you to improvise one. But whether you have a mockup for mobile or not, you should always write your code to be responsive. Responsive design is a whole other article, but I recommend reading up on it!

Conclusion

As a frontend developer you need to work amicably with your designer to find the best technical solutions when implementing a design. Graceful degredation and user experience are the most important, but hopefully these tips also help you to come to a solution that works well for both the designer and the developer!

What developer tools do you use to help you implement designs?

Categories: UX