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.
Clarabrige Engage Inbox canned responses gallery view in a modern browser
Clarabrige Engage Inbox canned responses gallery view in Internet Explorer 10
<select> dropdown list of
Let's check out some plugins that can come in handy to keep you and your designer happy!
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 and adjusting padding to match the overlay mockup
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 a ruler plugin to maintain consistent spacing
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 font details in Zeplin
Examining CSS rules in Zeplin
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 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
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!
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?