Jun 19, 2012 2
The Retina Display for Web Designers in 5-Minutes
Apple’s ultra-high pixel density displays have been available since the launch of the iPhone 4 in 2011 and more recently, the iPad 3. The newest iteration appears for desktop computing in their MacBook Pro line. Many speculate (and this is a safe speculation) that a stand-alone Retina display, or all-in-one iMac is soon to follow.
What does this mean to web design and the people who design and develop websites? Quite a lot of changes. The need for a change was already called for. Smartphones are outselling features phones. The arrival of the tablet as a major platform is clear. Content syndication for everything from Kindles to TVs is a mandatory for content creators. The Retina display is simply another platform with its own needs and user preferences.
The concept of Design (with a capital “D”) must change. Designers, and those who hire them, need to abandon the idea of precise control over how a user is presented with content, pictures, and branding. The very idea of visual design needs to give way to addressing the user’s (or viewer’s, or reader’s) needs.
This is going to be as true for the Retina display as it is for a smartphone or tablet. Images may have to be presented cropped, expanded, or perhaps omitted entirely based on screen resolution, physical size or connection speed.
The ultra high pixel density of the Retina display will become a playground for high-end visual websites that are able to provide a massive amount of bandwidth, fast servers, and a hungry audience looking for an exciting new experience. This will be a minority of webs users though. How will designers and developers address this gap in capabilities? How will a website owner serve content to an Android phone on one end of the spectrum and the 15.1 million pixels of a 15” retina display at the other?
The simplest solution is that web designers will rely much more heavily on typography. Typekit, Fontdeck, and Google all offer impressive libraries with support on many platforms. There is already a resurgence of type-driven design that is supporting desktop and mobile. The Retina display’s clarity will be the perfect vehicle for such design.
Responsive web design, another growing trend, is another solution. By using the browser’s dimensions to change the design structure, a designer can address a small smartphone screen and a desktop experience by changing type proportions, the size of images, and even hide elements.
Server-side technology is already being used to dynamically alter content based on user and connection variables. Providing high resolution images to target a user’s platform would be complicated, but something skilled developers could deploy. Popular frameworks also support this kind of implementation so that designers with access to their webhosts can upload a variety of different sized images to support all types of users.
It’s not clear how the design and development community will respond to this new challenge, but it does, from a design perspective, shake up how visuals can and should be approached. This will also be a watershed moment for developers as new and more targeted methods are created to push content to bit-hungry users everywhere.
If this subject interests you and you’d like to learn more about designing for multiple devices and a wide variety of users, visit A List Apart, a great resource for standards based design techniques or Dan Cederholm’s website Simplebits.
The last few months have had the web (to be precise, the geeky community that design, develops and writes for the web) buzzing about 
