Not too long ago, as I was browsing the web on my MacBook Pro with Retina display, I came across a typical form on a typical website. The buttons were fairly standard faire — gradients, rounded corners, colored text — just like those that can be seen on innumerable forms elsewhere on the web. However, it was obvious that this particular form, nay, this particular website had not seen a designer’s or developer’s love in a long, long time. The buttons, you see, were completely graphical, bitmapped GIFs, and on my high resolution monitor they looked terrible.
But it didn’t have to be that way. For years, we as developers and designers have had tools at our disposal that would have made the coming transition to HiDPI monitors much less painful. In this article, we’ll examine some of the tools you can use to prepare your websites for the high resolution future.
Step 1: Use Fewer Images
This is either a huge shock or the biggest no-brainer, I can’t decide which. CSS3 has become so powerful, and support so nearly-ubiquitous, that it has eliminated a large portion of what we used to use images for. Rounded corners, drop shadows and gradient backgrounds, which used to require hours of very precise image cutting in Photoshop, are now achievable through a few lines of CSS. Rounded corners have been replaced by border-radius. Drop shadows can now be achieved via box-shadow and text-shadow. Gradient backgrounds are now available by the linear-gradient value of the background-image property.
There are two major reasons for avoiding images when possible: by having the browser draw the elements for you, you are assured that the resulting pixels will be as sharp and as crisp as the monitor is capable of displaying them. I’m delighted when I look back at my old sites and see how well my pure-CSS elements are standing the test of time. Rounded corners are smooth, text is clear and legible, and gradients blend seemlessly from one color to the next.
Pure CSS elements have the added benefit of being lower in the file-size department. As many HiDPI displays can be found on mobile devices (where users are facing slower connections and the specter of bandwidth caps), quicker-loading and easier-on-the-data-plan elements are certainly preferable to their weighty, bitmapped counterparts.
Step 2: Use Icon Fonts
However CSS, by itself, is not going to solve all of your design problems. There are times where you’re going need to use graphics of some sort. Fortunately, we still have tools at our disposal that make actual bitmapped images less necessary than they once were. Enter the emerging world of icon fonts.
Icon fonts are really neat because they have all the advantages of ordinary, Latin character fonts, with none of the drawbacks of bitmapped graphics. For instance, you can add shadows that match the outlines of the icons via the text-shadow CSS property. Their color can be easily modified via JavaScript and CSS3 transitions (although, like any other text, you’re limited to your icons being one color).
Best of all, icon fonts always look sharp, no matter what the monitor resolution. There’s no messy spriting to have to deal with, and as we’ve seen earlier, sprites can be difficult to manage when accommodating for HiDPI, even if you use a sprite generating tool such as Compass.
Icon fonts are a web asset that is only now beginning to come into its own. There are some great fonts out there, but they’re not common on a lot of the webfont services such as Google Web Fonts or Typekit. Also, many are commercial, and the prices range from extremely affordable to rather steep, although there are many free options available as well. And, as with any icon set, different fonts focus on different kinds of icons, including those for social media services, web conventions (shopping carts, conversation bubbles, etc.), and more. Chris Coyier’s CSS-Tricks website (of which Treehouse is a sponsor) has an extensive list of icon fonts available on the web.
Step 3: A Little Help from JavaScript
There’s no getting around it: sometimes you just need to put pretty images on your website. This is a multimedia platform, after all, and no one is advocating to get rid of all the pictures. But we’d still like those pictures to look as sharp as possible.
For this, we need some help, such as retina.js. retina.js is a tiny (only 1.2kB) script that will try and replace any image on your page with a high resolution version found on the server. For it to work properly, you need to name your HiDPI images according to Apple’s “@2x” naming convention. For example, an image in your document called with the tag <img src="images/my-awesome-image.png"> will be swapped with a high resolution version named my-awesome-image@2x.png.
retina.js also comes with a LESS CSS mixin that does the same thing for your background images.
Looking Towards a Sharper Future
The best way to take advantage of the increasing number of high resolution monitors coming to market is to let the browser do as much of the work as possible. Reducing your reliance on images will ensure that your website will look sharp and beautiful for years to come. If you need to add high resolution images to your site, then tools like retina.js will make the process as easy as possible.
The future will be in high resolution. Fortunately, preparing your website for it isn’t as hard as you think.
The post 3 Quick Steps to Get Your Site Retina Ready appeared first on Treehouse Blog.