Web Design and the Retina Screen: First Thoughts

13th February 2014

Yesterday, after many years as a loyal Windows user, I switched to a Mac. There were many reasons which I won’t go into here but suffice to say one of the biggest attractions, despite the price, was the stunning high density Retina screen.

Before I took the plunge I read quite a lot of articles by other designers who were either working on the Retina screen or considering it. One of the biggest pitfalls they all talked about is that the vast majority of websites are not yet optimised for anything greater than 72 DPI. The industry has spent a lot of time focussing on device size but not a great deal on resolution.

I have to say though, after 24 hours on this thing I haven’t yet encountered too many problems. Yes, some images are looking a little fuzzy, but it’s not unbearable for general web browsing.

My next task, now I’ve started to get to grips with the new machine, is to look at how the Retina screen will change the way I design websites. The first issue to tackle is images. Here are my first thoughts:

  1. Upload higher resolution images, scaled responsively to fit the device. The down side to this is that on standard resolution screens you’re loading a bigger image than you really needed, so you’d need to keep quite a strong leash on your file sizes. Compress, compress, compress.
  2. Replace bitmap images with vectors wherever possible. This will be great for shapes but not so helpful for photographs. You can read my full piece on Scalable Vector Graphics (SVG) here.
  3. Use Retina ready icon sets, such as FontAwesome, to replace bitmap image based ones. I started using these about 6 months ago anyway because they’re so useful, check out some of them in use on my home page.

I’ll continue to report back on the Retina screen over the coming weeks as I delve into more complex tasks.

Leave a Reply

What our customers say:

Brilliant website with a huge volume of material made accessible. Really effective and easy to use. Can’t recommend you highly enough.

Marie Wright (OXDOX)