What is 'pixel perfect'?
Pixel perfection is when the finished coded page and the design file are next to each other, you can not tell them apart. To quote Brandon Jones :
...so precise, so pristine, so detailed that the casual viewer can’t tell the difference.
TL;DR for achieving pixel perfection
- Review design files with an eye for extreme detail.
- Establish relationship with designer.
- Use a style guide.
- Use the Pixel Perfect chrome plugin.
Begin by Reviewing Design Files
From the beginning of the development process we need to have the final pixel perfect product in mind. The first step is to ensure that you have all of the design files you need for all of your deliverables. Often these are provided in threes: mobile, tablet and desktop. Not ideal for a fluid universe, but often the standard. If there are gaps in the files provided, ask for these, noting the areas that are missing.
Ideally these files are provided in a raw format. Whether psd, ai, or sketch, you will be able to open the files and inspect the individual elements. Access to these elements will allow you to measure sizes, get font information and extract other metadata that is not available in a flat file.
Some areas of focus for the raw files:
• Note font families, and also the variants. For example, “Roboto - bold” is slightly different than “Roboto Condensed - bold”. You might address this by only loading Roboto, and using a css rule to replicate the condensed spacing, however it will not be exactly the same as loading the font that was used in the comp.
• If the designer used a grid, they might have included the guides. Toggle the guides on (often under 'view') to see if you can get visual help with your grid.
• Hex colors can be extracted by using the native tools.
• Look for margin and padding values that can be applied to the page/panel templates.
If there are any inconsistencies, it is a good idea to raise these with the designer. Doing this early in the process can reduce rework and save you time closer to site launch.
Pixel perfect front-end development is made a lot easier though the use of a style guide such as KSS or Pattern Lab. When you are creating a style guide, you are abstracting parts of the page. Creating components this way allows you to think in terms that are complementary to pixel perfect results. You will be keenly aware of items that require specific css rule overrides that differentiate them from the rest of the site styles.
Perform Testing with the Pixel Perfect plugin for Chrome
This plugin allows you to overlay images over the current webpage. This is ideal for testing your work. You can upload several images to one page, adjust opacity and scale. This can be used for your peace of mind, but also it allows you to take screen shots for times that there are uncertainties over the results. I use this daily.
Pixel Perfect Design Resources
Some references that I have found to be helpful toward achieving pixel perfect design include:
- Pixel Perfect Front-end Development Matters
- Design a Pixel-Perfect Website
- Does 2015 Mark the End of Pixel Perfect Design?
- Great Design Hurts: Striving for Pixel Perfection
- Front-end Style Guides (old, but included to show how long this concept has been around)
- Generating Your Own Styleguide
- PerfectPixel by WellDoneCode
- This 1 Neat Trick For Pixel Perfect Web Pages (a slightly sarcastic approach)
Connecting the Dots
In summary, this process is best started early. A good foundation will significantly reduce the amount of work you are doing. Pixel perfection can be frustrating, by using these tools you can reduce the amount of back and forth that can occur.
Additional Resources
Why Good Markup Matters | Blog Post
Drupal 8 Theming Without Panels | Blog Post
Advanced Layouts in Flexbox | Video
