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.

Jo was completely fantastic! I’d been struggling to make a WordPress blog deisgn work and was completely stumped. I made an enquiry to Jo about some help, and she replied within 24 hours. It was easy to agree on a price for the things that needed to be done, and she had fixed everything within 48 hours of the original enquiry. I had thought my problem was too small for someone to help with it, but I was pleasantly surprised that Jo was happy to sort out the small issues with my site for an extremely reasonable fee. Throughout the process, Jo was efficient, effective and stayed in regular communication. She answered all of my questions, even the really idiotic ones, and nothing was too much trouble. The entire experience was great and I would recommend her in a heartbeat to anyone who needs help with a website project – big or small. She is, in short, superb at what she does.

(Imogen Goold)