As front-end developers, it’s important for our website layouts and presentation to be as close as possible to the comprehensive layouts (comps) that come from our designers. To easily achieve this level of fine-tuning, we can implement an updated application of an old school animated movie production technique: onion skinning.
Developed in the early 1900’s, animators would use transparent celluloid layers on which the moving elements of the frame were hand-drawn while the background remained a static illustration on its own layer.
By stacking two or more of these cel layers on top of each other, they could easily compare the variations between frames. This same concept, when applied to website development, can help you achieve that true-to-comp look with relative ease. And it’s easier to do than you might think—all it takes is four simple lines of code. Read on for a comprehensive guide on how you can bring onion skinning into your dev process.
How Onion Skinning Works for Front-End Developers
In front-end development, onion skinning looks a little different. You can leverage the technique by layering the design comp on top of the page you’re building. Then, reduce the comp’s opacity to reveal the visual differences between the two. Simultaneously, you can use the browser’s inspector tools to adjust styles until you achieve a perfect match.
For years, the Pixel-Perfect browser extension has allowed developers to do just this. Its minimal and easy-to-use interface enables you to drag and drop images to create layers which can be adjusted in scale, position and opacity. It’s definitely a tool that should be in your development arsenal.
However, sometimes we aren’t even working with design comps. When migrating sites across frameworks or when a CMS like Drupal has a major version update, we must often perform one-to-one conversions. That is, we are developing a new site from scratch that is to be identical in design and functionality to the old site.
How to Apply Onion Skinning Without a Comp
If you’re not up for taking a thousand comparison screenshots of the old site for your one-to-one conversion, we can’t blame you. Fear not though, we’ve got you covered. In a mere four lines of code, you’ll be able to layer the old website on top of the new site you’re building within the browser window.
In this way, the “live comp” can respond to any viewport dimensions in tandem with your development webpage. Couple that with a browser extension like Chrome’s Snippets and you have a completely reusable code block at your disposal. Here’s how:
After installing and enabling the Chrome Snippets extension, within the ‘Sources’ panel of the dev tools there will be a ‘Snippets’ tab which allows you to create a block of code that will:
- Determine the overall height of the scrollable page.
- Create and append a div to the end of the <body> tag which will be the comparison overlay container.
- Assign some CSS styles to the div for positioning, opacity, and pointer events (removing pointer events allows the webpage underneath to be accessed and adjusted in the dev tools inspector).
- Insert an iframe into the overlay which will display the webpage we are using as a comparison.
let pageHeight = document.body.scrollHeight; let onionSkin = document.body.appendChild(document.createElement('div')); onionSkin.style.cssText = 'position:absolute;top:0;left:0;bottom:0;right:0;opacity: 0.5;z-index:2147483647;pointer-events:none;height:'+pageHeight+'px;'; onionSkin.innerHTML = '<iframe src="https://u.group/about/" width="100%" height="100%;" frameborder="0" scrolling="no"></iframe>';
Once the snippet has been created, hit the play button to execute the script and voila! You now have a separate webpage in an overlay that will respond to the browser’s viewport in concert with the page you are building. Not using Chrome? You can copy/paste and run the code in your browser’s dev tools console.