Web Design Implementation Challenges: Page Backgrounds

When reviewing a designer's mock-up of a web site design, my job as an interface engineer is to look for areas of the design which will be challenging or impossible to implement. Such areas aren't always obvious. In theory, a mock-up and the final site should look identical, but in reality a mock-up and a web site are very different animals.

A mock-up is simply a static image, while a web site is dynamic and needs to function properly across a variety of browsers, devices and screen sizes. The site also must accommodate constantly changing content. Elements of a design that look great in a mock-up often pose serious challenges during implementation.

Take page backgrounds, for example.

Often, the background of a site is either a simple solid color or a constant linear gradient. Occasionally though, designers get more ambitious and come up with a background that can't be represented as either a solid color value or a repeating sliver of a gradient.

For example, in the early draft of the design shown below, the designer used a curved graph paper-esque image as the background of the site which stretched the full width of the design file (in this case, 1,200 pixels):

Almost all design implementation challenges can be found by asking questions beginning with the phrase "What happens if?" The proposed page background in this design would pose little problem at screen sizes of 1,024 x 768 pixels (the target resolution for which we design). However, what happens if you view the site on a screen that is wider than that? My laptop screen is 1,366 pixels wide. At that width, the background as shown above would come to an abrupt stop and cut to white. I added some extra white to the right of the image above to show this.

While not the biggest issue in the world, this issue compromised the design at large screen sizes and it seemed worth it to fix that by some simple alterations to the design. One possibility would have been to ask the designer to extend that graph paper pattern out even further, to say 2,000 pixels, which would cover the vast majority of screen sizes out there. However, that would require drastically increasing the file size of the background image to alleviate a small problem which would only apply to a minority of users.

A better solution, we decided, was to ask the designer to add a layer mask to the background, fading it off to white on the left and right, allowing us to set the background of the site's containing element to a solid white. In other words, we asked the designer to fade the graph paper pattern until it vanished, leaving only white (as opposed to the abrupt stop it originally came to).

The result required a slight alteration of the design, but one that stays fairly faithful to the designer's original vision:

Having the designs fade to a solid color or a linear gradient, as we did here, works well most of the time. This may not be the optimal solution for every project, but in most cases it accomplishes the goal of keeping the design consistent at large monitor sizes without compromising quality or requiring ridiculously large file sizes for a single design element.