When Ethan Marcotte first wrote about “Responsive Web Design”, I fell in love with the new approach. If you have not yet read the article, I strongly suggest you set aside a few minutes—it’s revolutionary. Responsive Design is the concept that a single design can take advantage of a variety of screen resolutions, media types, and browser sizes. When using anything from mobile devices to HD televisions, a responsive website scales depending on the width of the browser’s viewport.

In the 90′s, as the Internet began exploding, 800×600 was the average monitor resolution and the standard for which designers built their websites. Toward the end of the 20th century, the average resolution adopted by mainstream users increased to 1024×768. Unfortunately for users of this, and larger resolutions, web designers had to continue building websites to fit the 800×600 resolution in order to maintain backward-compatibility. This problem would repeat as even larger, widescreen monitors reached the market. Media queries essentially provide a solution for designers to present their layout in various ways depending on the size of the viewport or resolution of the device. Responsive design combines media queries with flexible images and fluid width grids providing a seamless experience to any device thereby solving most of the resolution segregation problems.

While the race for display manufacturers to produce larger resolutions slows, a new competition emerges: the race for pixel density. Pixel density, not to be confused with screen or display resolution, describes the amount of pixels contained within a designated space. A monitor with a 100ppi (pixels per inch) resolution utilizes one inch of the screen size to display one-hundred pixels. From my research, most devices have a pixel density under or around 150ppi.

In the next few years, I predict history will repeat itself. Instead of competing to increase the size of monitors, the pixel race will hinge on cramming more pixels into a tighter space. The iPhone 4 is a strong indication of where the future is headed. Unlike many other 3.5″ screens, at 326ppi (pixels per inch) the iPhone 4 provides almost twice the pixels as most of its competition. This creates similar issues to what designers had to deal with during the screen resolution race. A small 1px border clearly defined on the 163ppi iPhone 3GS becomes nearly invisible on the 326ppi iPhone 4. Applications built for the iPhone 3GS are upscaled 2x for the iPhone 4. Borders that were once a faint 1px become a more clearly defined 2px. It is important to note, the border occupies the same amount of physical space because the iPhone 4 is exactly double the PPI of the 3GS. Rasterized images are also up-scaled 2x but unfortunately this causes pixelation unless developers provide substitutions that are twice as large.

Progress is slow, but we have SVG

It’s been over a year since its release, but many iPhone 4 owners are still using apps with pixelated raster images. Until app developers include higher resolution material, early adopters of devices with high pixel densities will not experience the full potential of their screens. Designers are already busy enough creating consistent designs across the diverse resolutions, how can we also be challenged with building our apps for pixel densities too? As media queries and responsive design provided a solution for screen resolution segregation, designers require method to consistently deliver images, no matter the pixel density.

Implementing flexible images (graphics that change depending on the viewport) is one of requirements for classifying a design as “responsive”. Coincidentally, delivering various sized images to different screen resolutions is also essential for a consistent design across assorted pixel densities. Using Scalable Vector Graphics is one of my favorite methods of delivering flexible images. In my previous entry, I explained the advantages of SVG. In essence, SVG is a vector format which can scale indefinitely–no matter the size required. Combine SVG with a percentage based width or height and your graphics will look outstanding on any monitor. As an added benefit, the file size is almost always smaller.

Most vector editors provide a quick way to save or export existing vector graphics to the SVG format. With the object tag, you can easily include that vector into your page.

<div id="container">
    <object data="vector.svg" type="image/svg+xml" class="vector"> 
        <a href="vector.svg"> 
            This is my vector image!
        </a> 
    </object> 
</div>

In your CSS, you can throw in a quick line to always display your graphic at 100% width of the parent container. (Your parent container should also be based off a percentage which responds to the width of the entire browser window.)

#container {
    width: 32%;
}
.vector {
    width: 100%;
    height: 100%;
}

By removing fixed-width images, larger monitors will no longer display upscaled and pixelated or small and fuzzy images. Graphics will always fit a percentage of the physical width, rather than the fluctuating digital width alternative. A one-inch graphic on a 326ppi iPhone should occupy the same physical size as a one-inch graphic on a 96dpi desktop display monitor. Alternatively, you can use larger sized images and scale downward. Unfortunately, this method sacrifices a quick load time and the crispness of the image.

Winning the Pixel Density Race

Having alternative methods of delivering images to various resolutions would certainly make a designer’s life easier. Unfortunately, at the time of writing, media queries do not support detection of pixel density. With the exception of a few font rendering and transparency issues, SVG is the most reliable method of delivering images consistently. It would be difficult to predict when, if ever, the pixel race will end or more importantly, if a definitive pixel density will become the decided standard. Until then, it’s important to embrace SVG.