Developing Responsive, Pixel-Perfect Image Grids in Drupal

We just got word that the site we designed and developed for KSS Architects has been featured as a case study on drupal.org.

The case study focuses on one of the central development challenges for this project: creating pixel-perfect image grids for any screen size. When we kicked off the web design portion of this project, the central goal was to build a site that would set KSS apart from the competition in both form and function. The site we designed does look very different than your typical anti-branded architecture site — but the complex layout we envisioned proved to be a substantial development challenge.

 

 

The site needed to be responsive, while also displaying pixel-perfect image grids across a variety of browsers. The challenge here was that different browsers handle subpixel rendering in different ways — many newer browsers do have subpixel rendering, while others do not, and Internet Explorer 10+ simply rounds up any time there are floating point numbers in CSS layout calculations. Many of the existing solutions to this problem admit defeat and find that the occasional one- to three-pixel gap is acceptable.

Subpixel rendering is a relatively new feature in modern browsers that allows fractions of a pixel to display when an image or background color is rendered with a non-whole number pixel dimension. For example, if your screen is 1000 pixels wide and you want three equal columns (333.3 pixels wide), then browsers with subpixel rendering will attempt to render the extra .3 so the three columns fit together perfectly. This isn’t something that can be turned on or off either — it happens automatically with supporting browsers.

To move forward, we needed a fix that would take different browser subpixel rendering standards into account, and then display varying grids of pixel-perfect images to line up properly, regardless of screen size.

Our solution was to use JavaScript as a fallback to ensure that all browsers behave the same way and simply round down. This caused the total grid width to be either wider than or equivalent to the browser viewport. When the grid is too wide, the JavaScript automatically cuts off extra pixels by wrapping everything in an element with overflow: hidden. Since only a handful of pixels end up being cut off, the fix is not noticeable to the end user, and the end result is a pixel-perfect layout on any device or browser.