Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web

Since the introduction of high pixel density displays, the classic notion of the pixel, as well as the concept of a standard dpi, are fading. Web designers are no longer constrained to fixed-width web elements. With the evolution of modern display devices, designers are now responsible for thinking beyond layout and must also consider the impact of resolution. This paper will focus on various tools and techniques web designers can use to achieve resolution independence. Topics will include the pros and cons of delivery methods, resolution independent design alternatives, common responsive design techniques and more.

Keywords: retina, resolution, web, design, pixel, responsive

1. Introduction and History

More than half of U.S. laptop owners also own a smartphone, and nearly a quarter of them own a tablet as well. (Mitchell, 2012) Users are now interacting with our content on an ecosystem of screens. Digital products and services are expected to function coherently across devices, and their features to be optimized for the wide array of devices they may be accessed on. In order to accommodate a synchronous user experience in a device shifting world, we as designers, must prepare our designs in a fluid and focused manner. Cross-platform interactions should complement each other and work in tandem with one another in order to synchronize, and at times, extend a user experience.

The rapidly changing technology market requires designers to remain agile in their thinking and process. Mobile devices with higher pixels per inch (PPIs) than ever before continue to multiply amongst our users. Before we make hasty decisions on the direction of our websites, we must first identify problems and opportunities, and then decide on the best way forward.

The problem with immediately jumping on the high pixel density display bandwagon is that we don’t want to make vast assumptions about our users’ device performance capabilities. How do we serve different images across different devices and contexts while using the same HTML tag? The two key factors in determining a successful approach to a resolution independent design are performance and audience.

2. The Pixel

With the advent of high pixel density displays, the pixel itself is now a relative unit. Pixel ratios can now be quantified as a pixel ratio of 1 for standard resolution devices or a pixel ratio of 2 for high pixel density devices.

A device pixel (or physical pixel) is the tiniest physical unit in a display.

Screen density refers to the number of device pixels on a physical surface. It is often measured in pixels per inch (PPI). Apple has coined the marketing term “Retina” for its double-density displays, claiming that the human eye can no longer distinguish individual pixels on the screen from a “natural” viewing distance. (Lemeden, 2012)

Three of the top five smartphones during quarter three of 2012 in the United States were high pixel density display devices (NPD Group, 2012). Each of those three devices were Apple products, which currently hold 31% of the US smartphone market share. As more users move to these high pixel density devices it paves the way for a new wave in design standards.

Pixels, whether in terms of device real estate or device density, should be treated as an enhancement or feature that some browsers have and others do not. Build a strong baseline of support, then optimize as necessary (Rupert, 2012).

Use

Museums are beginning to use technologies to expand their offerings, grow and diversify their audiences, and bring technology into the act of creating art itself. Technology usage in the museum space changes the efforts needed to keep up timely and well designed content that is easily accessible on our visitors’ devices.

As John Allsop stated in his design manifesto, “The Dao of Web Design:”

Firstly, think about what your pages do, not what they look like. Let your design flow from the services which they will provide to your users, rather than from some overarching idea of what you want pages to look like. Let form follow function, rather than trying to take a particular design and make it “work.” (Allsopp, 2000)

There are several factors to consider when designing a retina optimized website or application, namely audience and performance.

If the majority of your website’s visitors are browsing your site with a Windows desktop browser, you might not want to spend the time devising a high pixel density interface design. Standard resolution images are still an optimal solution in many cases.

Website performance is another consideration. Slower page load time results in an increase in page abandonment. People access the web on a wide array of mobile devices and still expect a web-browsing experience that is comparable to what they experience on a desktop.

Above all, it is most important to make digital web experiences that are accessible to all users.

Implementation

Below, we’ll discuss a maximum quality, minimum effort approach to various methods of achieving websites and applications that cater to high pixel density displays.

Designing With Code (CSS)

Because of varying device resolutions, a pixel on one platform does not always translate to a pixel on another; however, when used properly, CSS enables designers to suggest the appearance of a page, not to control the appearance of a page.

A CSS pixel is an abstract unit that browsers read to precisely and consistently draw content on Web pages. On standard density displays, 1 CSS pixel corresponds to 1 device pixel. On a high pixel density display, the resulting shape has four times more pixels.

CSS is also the means by which we can control page elements for fluid screen sizes. Say you’d like for a header to be larger than the body text on all display devices. With CSS, you can specify an overall font size as a percentage of the font size of the parent element. We can make headings and other elements stand out by specifying that headings of level 1 should be 20% larger than the body text, level 2 should be 15% larger, etc. This allows for headings to scale proportionally regardless of the users device size and display type.

Responsive Design / Flexible Design Foundations

Rather than tailoring specific and therefore disconnected designs to each web device, we can treat them as facets of an overall seamless experience. Responsive design uses CSS media queries to target specific device sizes. The responsive design framework enables us to move away from the fixed-width web layouts we used for desktop-only websites and move toward a framework that allows users to access the same site across a variety of devices.

The web is responsive on its own—by default. It’s us that’s been breaking it all these years by placing content in fixed-width containers. (Hume, 2011)

A popular fixed-width grid dimension used is 960 pixels wide based on the notion 1024 pixels covered the majority of audience displays. Though the grid concept remains the same, the notion of having a fixed-width is quickly diminishing. Web designers are instead opting to use flexible design foundations to implement a tailored user experience.

High Resolution Imagery

Including images with double the pixel density means images need four times the pixels they would in a standard resolution image. It’s important to think twice when using higher resolution images because they can negatively impact performance. Is there a sensible compromise or rule of thumb to apply throughout your interface? Retina images are great for a beautiful, sharp experience, but often cause slow download speeds. In most cases, speed should take precedence over aesthetics, especially on devices with small amounts of memory and slower connection speeds.

Adding media queries in your CSS stylesheets is a great way to determine when you should serve higher resolution images.
Example media query for “Retina” or “2x:”

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
/* High pixel density stuff here */
}

Though minor, a drawback to consider is the possibility of ending up with a lot of CSS definitions to maintain. Even denser displays would require yet another media query. As browsers continue to mature and the specification for device-pixel-ratio is completed, vendor prefixes will no longer be required.

JavaScript

Another popular solution for optimizing digital projects is with the use of JavaScript. The good thing about using JavaScript, is that it is more or less automated. One JavaScript library that eases the development of a site with retina images is Retina.js. The main requirement is that higher resolution images are created and named in the same capacity as standard resolution images. JavaScript will check each image on the page and detect whether or not a high resolution version exists. If a high resolution variant exists, the script will swap in the image.

Here’s how Retina.js works:

Create an additional version of a graphic saved with a filename ending in @2x.Standard resolution graphic:
my-image.png
Double resolution graphic:
my-image@2x.png

Include the script on your page.

A drawback of using this method is that JavaScript must check each image on the page. Depending on server load and site traffic, this may negatively impact website performance.

Scalable Vector Graphics (SVG)

SVG images are resolution independent, lightweight, and infinitely scalable graphics. Compared to raster-based graphics, SVG is the most future proof file type. SVG images are an XML-based vector image format for two-dimensional graphics that support interactivity and animation. SVG graphics are supported across all modern web browsers. SVG is also a much smaller file type than its bitmap counterparts.

Figure 1: Scaled up version of Raster vs. scaled up version of Vector

Though SVG images may be hand-coded, most designers prefer using a visual editor such as Adobe Illustrator to create these images. Adobe Illustrator now comes with a full set of SVG exporting options for web.

Text Rendering / Web Fonts

Web fonts are another resolution-independent web design tool that can be used to maximize a user’s experience on high pixel density displays. Retina displays provide an extremely legible environment for web typography. Web fonts that include pictograms are an excellent option for presenting sets of resolution independent icons. Techniques like @font-face provide a multi-device typography solution. When targeting browsers that may not support web typography, browsers will gracefully degrade to a standard text rendering.

3. Case Studies

ArtBabble – Launched December 4, 2012

Figure 2: ArtBabble design examples

ArtBabble was conceived and built by the Indianapolis Museum of art (IMA) as an art video website intended to showcase art video content in a high quality format from a variety of sources and perspectives. On December 4, 2012, the IMA launched a redesign of the site with almost 3,000 art-related videos and 54 partners.

ArtBabble was optimized for high pixel density displays because our analytics showed that our top three mobile traffic sources were the iPad, iPhone, and iPod. Our analytics also showed that our traffic was coming from a wide variety of devices and screen sizes, therefore we chose to use a responsive theme. During implementation, we incorporated the use of web type, icon fonts, and media queries to ensure a fluid experience across the site.

With ArtBabble, there were two main approaches to making the site retina optimized. First, the simple, clean design enabled the use of mainly CSS and little to no graphic elements on the site. This allowed for quick load times within the interface and for the video content to take precedence.

Because there were few graphic elements (simple icons, web typography) used in the interface, we chose to always serve high pixel density graphics and to scale them down only on standard resolution displays; however, poster images were kept at a standard resolution. If we were serving a lot of graphics and getting much more traffic, we might revisit this approach.

IMAmuseum.org – Launching February 2013

Figure 3: IMA design examples

Figure 3: IMA design examples

The IMA’s web team is working on an extensive website refresh. Areas of focus include an updated information architecture, interface design, and content adjustments. Due to the increase in mobile traffic to the website, the refreshed site will be fully responsive in order to deliver a seamless experience across devices.

The site is being optimized for high pixel density displays through the use of SVGs, high resolution imagery, CSS and Javascript, and web typography. The IMA Lab’s approach to technical implementation of the above are as follows:

SVGs will be delivered via CSS as background images

Image cache settings will be enabled on large images of great importance. On smaller thumbnail images and images that aren’t as important, we will leave them at their standard pixel density.

Finally, Javascript will be queued on page load to detect the pixel density of a user’s device.

AIC LaunchPad – Launched October 28, 2012

Figure 4: LaunchPad design examples

The Art Institute of Chicago hired the IMA Lab to design and develop an in-gallery interactive application installed on iPads in the European Decorative Arts Galleries as well as the Ancient, Roman, and Byzantine Art Galleries. There were several obvious reasons our team made the decision to use high pixel density graphics throughout the web app.

The project’s goal was to engage museum visitors and give them the opportunity to further explore objects surrounding them. The app is filled with full screen imagery and rich content. Because the web app was being installed on “retina” iPad’s in the galleries, we knew that the device would be capable of supporting high pixel density user interface elements and imagery. For the more graphical views within the app we had to remove retina images because they became too memory intensive and were causing the app to crash. The entire process was a game of give and take. In the end, we used retina interface elements everywhere and retina images only when they were adding to the overall user experience.

4. Future

The web is undergoing many major shifts and attaining complete resolution independence will be a long journey. There are no absolutes and until there is a standardized methodology, we must move forward and continue to provide the best experience possible to our users. According to projected device growth from 2010-2015, we will only continue to see more growth in the devices that offer high pixel density displays. (Sigler, 2012) As a web design community, we must continue to make strides toward building our websites to be as resolution independent as possible in order to move toward a more device agnostic future.