A View from David Zax
Will the Retina Display Influence Web Design?
When hardware drives the web.
ReadWriteWeb has an interesting take on one of the unintended consequences of the MacBook Pro’s new high-res retina display: an epidemic of headaches for web designers. The site’s John Paul Titlow reports that web designers now have to perform a delicate balancing act: designing web pages that won’t look lousy on the retina display, while also not forgetting the millions of people out there who will be sticking to their old-fashioned non-retina displays for the time being.
It’s an argument that has been taken up before on the web, with the launch of the retina display on the iPad 3. “The new retina display is supposed to make our digital word a more beautiful place. But as far as the web is concerned, it actually does the opposite,” wrote the blog easelsolutions in March. As the retina display comes to the MacBook Pro, the problem will only be compounded.
The crux of the issue is, intuitively, that graphics and typography need to be beefed up if users of the retina display aren’t going to notice flaws. But with larger images comes longer page-loading time. It’s a headache for someone with a retina display to spend more time downloading a page to begin with–it’s a double headache for someone without a retina display to spend that extra time without even having the hardware to enjoy the fruits of that wait.
Isn’t this the 21st century? Why do web designers have to adopt a one-size-fits-all approach, the way fit models are chosen because they approximate an average body type? Shouldn’t the web be dynamic enough to figure out what sort of hardware is interacting with it, and delivering an appropriate version of the web site accordingly?
As a matter of fact, this is exactly what web designers are experimenting with and increasingly calling for. The website A List Apart (tagline: “For People Who Make Websites”) is an industry leader here, a repository of thought and advocacy and shop talk. In May of 2010, Ethan Marcotte coined the term “Responsive Web Design” on the site. Inspired partly by an emergent field of architecture called “responsive architecture,” in which built environments sometimes slightly change by the presence of people within them, Marcotte advocated for something similar in web design. “We can design for an optimal viewing experience,” wrote Marcotte, “but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.” How? It all hinges on something called a “media query.” “A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work.”
Marcotte’s essay and the web design innovations that inspired it have spawned a dialogue among web designers of how to build the responsive web he envisions–and the responsive web that would make the web the best place it can be for users with diverse devices. Designers still have a ways to go, and new standards of web design may have to be implemented. In January, Mat Marquis, also writing on A List Apart, detailed some of the problems that remain for designers wanting to work with a particular subset of responsive web design, “responsive images.”
Some complain about the influence that Apple has in the design community; Tim Cook from up on high declares that this is how it shall be, and everyone else must scramble to serve his whim–or so goes the argument. But Apple shouldn’t be condemned here. Transformative inventions influence the environments in which they operate; our cities wouldn’t look the same if humanity hadn’t so fallen in love with the automobile, for instance. That a variety of devices is encouraging web designers to think flexibly about how they do their work, to best serve the myriad devices out there, is actually in the best tradition of the open internet.