New Macbook Pro with Retina Display – What this means for your website!

The WWDC 2012 just concluded moments ago, while there are a number of hot topics to discuss I wanted to specifically touch on the news about the new Macbook Pro and its Retina display.

We have become familiar with the retina display on our iPhone & iPad devices, but Apple is now bringing this higher resolution display to the personal computer. This will be great for viewing your HD movies and photos, BUT what does this mean for your website? In this post we will talk about what to expect as a website “owner” as well as what to do as a website designer and developer.

What to expect on your website:
If you had an iPhone app that was released during the iPhone3 era or an iPad app developed during the iPad2 era you have already lived through this. Your once pristine app suddenly looked pixelated and blurry! Generally this is more obvious when your product uses a mixture of “live text” and image assets with text. The new screen resolution makes your live text more crisp and clear and the contrast between your images and text suddenly becomes apparent. Images will also suffer a similar effect, but its the text elements that will seem most jarring. Now on websites more and more often CSS is used to transform what once once a web font into a custom font for things like navigation elements. These will be “safe” and most of the time “retina ready”. But things like headers, and graphical text elements will not. The impact will also grow over time, as more people acquire these devices and more websites adjust to a retina ready format you will see your website appear lower quality in comparison to newly developed or adjusted sites.

Do not panic, just as we have adjusted for retina on mobile devices the similar adjustment will be made for web. The impact also comes into play with your video content and images, you will need to be conscious to supply higher quality assets moving forward. If your website is media heavy, you may also want to keep an eye on your hosting solution once you make this transition. You will be broadcasting larger file sizes to your audience and you want to make sure you are set up to support that on a bandwidth level from your hosting provider. But again, this will be gradual and increase slowly over time.

If you already have a website, you may want to consider revisiting with your design and development team and get these adjustments for retina compatibility underway. Also consider that this request will be coming in from multiple clients, so plan ahead and get on your agencies schedule for this ahead of time.

Next lets talk about what you need to do as a designer and developer. Here are a few tips to keep in mind when adjusting for retina as well as what needs to change in your process moving forward.

Adjusting an existing website:

  1. First consider every asset that includes text as part of an image. The preferred method would be to replace that asset with CSS text if possible. This way you are not increasing file size for elements that don’t require it. However if your text asset is heavily treated you are going to need to double the resolution of that asset. Background images and texture are a bit more forgiving, focus on text first as this is what is going to really stand out as being pixelated or blurry.
  2. Next you must decide if you are going to support both high and low resolution. While managing one asset directory is easier, you are now going to force low resolution users to download larger files for no reason. This decision must be made on a case by case basis and depend on what is best for that specific project or client. If you opt to support both low and high resolution you may consider two asset libraries and a resolution detect to serve up the appropriate directory based on the users screen resolution. This also applies to new websites.
  3. Third, prioritize. Don’t feel that you need to jump into reformatting every photo and video for a higher resolution. Start with your user interface and next consider the purpose of your website. If, for example, you are a photographer, event planner, interior designer or hotel; your images are the core of your business and people go to your website specifically to see these photos or videos. Then adjusting these to be higher quality is a worthwhile investment.

New websites – Say goodbye to 72DPI PSDs:

  1. Designers, this tip is important! Say goodbye to your 72dpi PSD files. From today forward you will be better off planning ahead and making your source file at least 150dpi. We all know that you can not make something larger than the source file. Even with smart objects, it can be a real PAIN in the *** to adjust an entire UI to a higher resolution. So start now, even if the intention or client doesn’t require a retina ready website, at some point they will ask for it. Be proactive and get your files ready for this output now.
  2. Designers also need to evaluate their design decisions, it’s time to start thinking more like a developer. As you create ask yourself… can this web done with CSS? As you design, make smart decisions that allow for more CSS driven elements in order to avoid excessive dual asset creation.
  3. Manage expectations, if you are in the middle of a website or about to start a new one be sure you communicate with your client about your retina intentions. Don’t assume they understand that this will or won’t be ready for retina when these devices become available.