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.