How to Optimize Your Web Designs for Retina Devices

Retina displays are becoming much more common amongst tech enthusiasts. The Apple iPad and iPhone 4 introduced the retina displays and changed the face of modern technology and modern web design. Using these newer screens the pixel density is double that of a typical mobile resolution.

This means images and page elements will appear more crisp than with any ordinary LCD screen. But this also means web developers have to work around settings to get images looking nice in both normal and retina formatting. In this article I want to discuss some basic ideas for optimizing your website’s performance on retina devices.

Utilize New CSS3 Properties

I want to start by saying the fewer images you’re using, the better. Retina devices will make normal images appear very blurry, and so you’ll want to provide a dual-resolution alternate. However this can become exhausting if you have literally hundreds or thousands of images to sort through.

When it comes to basic stuff like background gradients or box shadows always use the CSS3 properties instead. These are now widely supported by all modern web browsers and even mobile smartphones. You’ll be saving a lot of headaches and time running around to fix duplicate images on mobile.

Additionally think about how you’re creating sprite sheets for background icons or logos. It may be worthwhile to generate a single sprite .png file with common website icons and another @2x version with high-resolution icons. Then instead of adjusting the CSS background-image you can simply update the positioning instead.

Fluid Content is Readable & Enjoyable

The retina screens are perfect for reading tiny crisp text on any webpage. Typography is still the major player among information transfer online, and along with images these make up a large portion of the World Wide Web. You want to make sure your website can handle displaying basic content without appearing too overcrowded.

It is best if you can stick to sizing fonts in ems as opposed to pixels or alternate units. These fonts will resize based on the complete width of the user’s browser. ems are very fluid and these are certainly the best solution for any modern layout.

There is one strange getup about ems which happens when you switch from portrait into landscape mode. Most of the time you’ll notice your headers and paragraphs will either increase or decrease in size. This is a peculiar default with Mobile Safari which automatically resizes fonts based on the screen real estate.

To disable this feature add -webkit-text-size-adjust:none; into your stylesheet document. You should use this property on a larger parent element such as body or html. This will target all text on the page so it will not become warped and resized on retina screens.

Automatic Retina Images

I have mentioned this script in previous articles but it deserves another mention here. The open source script retina.js is one of the easiest solutions for retina images on the web. You simply download a copy of their JavaScript library and include this into your webpage.

Then when creating your images you will need to also create a dual-resolution version. So if you have a photograph on your webpage named town.jpg sized at 550×300, you should also have a file named town@2x.jpg with exactly double the resolution(1100×600). This sounds annoying at first but you would need to do a lot more work to get this working without a pre-made script.

Often times you’ll find this method easier to create the dual-sized images first. Then it’s simply a matter of scaling down to the proper size and you will already have a retina copy prepared. The problem here is adding retina support to an already existing website. You would need to go back and fix up all the images within your layout.

But fret not, as there is a fairly quick workaround you can try. If you open an image in photoshop and resize the image to double it’s resolution, you’ll get a semi-blurry copy which will pass off nicely on a retina device. That’s because even if your photo is 1100×600 pixels it will display on the retina screen at 550×300. So you can get away with slightly blurry retina copies of images in these circumstances.

Moving Away from Static Content

It appears the Internet is becoming a more fluid beast than before. We are seeing more videos and audio support now than in previous generations. Also support for vector file types such as SVG means we may include these images to render directly onto the page.

Web designers should be on the lookout for new trends as they emerge over the coming months and years. Scalable, fluid content is on the rise and it doesn’t appear to be slowing down. Read up a bit on flexible svg images if you have never heard the topic before. They require some extra work in the design phase but the payoff is totally worthwhile.

Also having your layout in a responsive manner is not a totally useless idea. Retina devices are often using very small screens, and so you need to fit an entire layout into more dense pixels. Think about each region in your layout and consider if the elements are honestly necessary. You shouldn’t need to perform an entire website redesign – but it’s always a good idea to go back into your code and fix up some stuff every couple of months.

Gather Feedback

Don’t be afraid of contacting other developers or even asking your userbase for new ideas. Sometimes the best ideas will come from people you would not expect. And generally new things are worth trying at least once.

Take any feedback you acquire with a grain of salt, as not everybody is a user experience designer at heart. Not everybody you ask will truly know the best solutions for catering to retina devices. But if you have users on retina screens you may want to specifically target them for bug checks with messages or modal windows. This process will help you learn from past mistakes and correct new issues with HTML/CSS code.

Final Thoughts

There are plenty of web developers who do not spend any time building support for mobile. I feel that the growth of consumer digital products is growing, and we will see a spur of new mobile users over the coming years.

I sincerely hope this collection of ideas will prove useful in your website projects. Retina display devices are mostly geared towards mobile screens, but there are even newer MacBooks slated to be released with a retina screen as well. Ultimately you need to determine what your audience is looking for and how to provide that user experience. Offering a uniform solution to all pixel densities is just one caveat which comes as being a web developer.