3 low-hanging fruit for retina websites

Here’s three things you can do easily to improve your low-density website or app for people on Retina screens:

• For photos, use high-resolution JPGs with low quality settings. Let the browser scale the image down on normal screens. Bonus: no increase in file size!
• Use the same high-res background images for both normal and retina. This works great if you don’t support IE before version 9 (like Google!)—just replace images used by background-image with high-resolution versions and use background-size to scale them accordingly (works great with CSS sprites!)
• Create a proper Favicon. This will make your websites icon not look ugly in bookmarks and browser toolbars, and will only take a few minutes.

If you’re willing to spend a little more time, I’d highly recommend to look into replacing bitmapped images with CSS gradients and effects, and/or with SVG-based images. It’s more work, but it will pay off in faster loading times, less complex HTML and more flexibility to change designs and adapt them to new requirements (for example, if you decide to implement responsive design).

The devil is of course in the details—but there’s no need to research all this yourself (which likely takes weeks!), just grab a copy of my ebook about Retinafying your web sites and apps!