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:
- 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.
- 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.
- 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.
NB: Because this post is more than two years old, and the world of web design and technology moves on so quickly, the information in it may now be out of date