A New Way to View the Web

Apple just announced the new MacBook Pro with Retina display; once again, they're pushing the standards for technology while anticipating our changing needs. After looking at a Retina display, we will never want to view another monitor again. Therein lies a lurking problem.

We work in a pixel-centric industry. The products we work on are measured in pixels because that's how Web browsers work. Current web design standards recommend page designs around 1024-1280 pixels in width. Retina displays shrink the pixel to a super fine size; now, viewing the typical website in its native resolution on a Retina Display renders a tiny version. Surely Apple’s Safari browser and other browsers on the new MacBook with Retina display will need to default to a zoomed in view of the web in order for pages to look proper.

This introduces many new considerations for designers and developers as Retina displays and super high resolution screens become ubiquitous.

What about Responsive Design?

Responsive design is a recent webdesign trend of building webpages that scale to fit to different screen sizes. For example, if you reduce the size of the browser, the page “responds” by moving and scaling the page elements to fit the screen. This illiminates the need to provide separate websites for different displays and enables us to build flexible sites that can serve content from one source on a variety of web-enabled devices. Responsive Design addresses the issue of different display sizes, but not the issue of super high resolution displays.

Are Pixels An Outdated Unit of Measurement?

The issue with super high resolution displays, like Retina displays, is that web pages viewed in a browser's native zoomed-in state will appear very small. 

Web pages on a Retina Display would look tiny in native resolution but chunky zoomed in.

Images and videos that we work with are measured in pixels, but pixel size is now shrinking; on Apple’s Retina display, they have become so small that they are no longer perceptible (hence Retina). Apple has suddenly turned the pixel measurement on its head! When using a web browser on a Retina display, a standard web page's images and text will render at an extremely small size. The browser must zoom in on the page to view it as it was originally designed. 

The Incredible Shrinking Pixel. (image credit)

One could argue that people with Retina displays can just set a standard default zoom in the browser's and be done with it. So what’s the problem? The problem will occur when Retina display-quality monitors become more prevalent and as more people demand websites optimized for these displays. In order for anything that currently exists on the Web to look good on theses displays, it will all need to be redesigned. We'll need to redesign for the new display resolution and a growing number of possible desktop, laptop, tablet, and mobile screen sizes. On the positive side, redesigning the entire Web is bound to provide some job security!

Resolution

The issue is so new and we are still working out a common terminology for some of the issues I’m trying to explain in this post–for one, I’m struggling for ways to reference ideas like native zoomed view. It is clear that we will need to continue to evolve the way we talk about, design for, and develop for the Web in order to keep up with technology.

One of the unanswered questions is how these high-quality displays will impact the way we measure the size of items on a screen. Specifying image dimensions by pixels will be outdated when Retina Display level monitors become prevalent with users. The industry is going to either need a new unit of measure or RFPs and proposals will need to account for two dimensions: one for traditional display and one for Retina display.

W3C has proposed a new HTML element to help address this impending problem. They have proposed a new element that can dynamically choose which image src to use. A sample of the proposed element would look like this:

<pic src="small.jpg (max-width:320px), medium.jpg (max-width:768px), large.jpg">alt text</pic>

Sadly, this approach still relies on pixels to measure size. There are methods to ensure a browser window can be stretched out very wide using percentage-based div containers and em-based font sizes. However, the browser is still not able to detect whether the user is on a Retina display in order to optimize the page. For a true solution, we need a property that indicates the resolution of the screen. The Web remains ill equipped to detect and optimize web pages for super-fine resolutions.

Another quick thought: bandwidth needs will grow exponentially as Retina-quality monitors become the standard and demand for Retina-optimized sites reach critical mass. Internet service providers may find themselves struggling to provide enough bandwith to serve all of this new, high-resolution content.

Thanks for keeping us on our toes, Apple! :-)