From the course: Making Your Site Retina-Ready

Options for making your site content look better on HiDPI

From the course: Making Your Site Retina-Ready

Options for making your site content look better on HiDPI

- When it comes to making our sites HiDPI, or retina ready, as we say, there is no magic bullet. There's no magic line of code or plug-in, well, unless you're using WordPress or Drupal, that we can employ to get our site retina ready and be fully, I guess you could say, all-encompassing, as far as retina or HiDPI is concerned. There is, as a matter of fact, a whole list of things that we typically will use to accomplish this, and I wanna jump right into what each is, and just a brief description of each. On the site here we talked about, in the previous video, what exactly HiDPI was, and if I scroll down here you're gonna see that we have what's called HiDPI, or retina, main features. In order for us to make our site look good and serve well on HiDPI, or retina, devices, there are some features that we're gonna look at. We're gonna look at icon fonts. We're gonna look at SVG. We're gonna look at favicons. We're also gonna look at, what are called, retina images, and the many ways to be able to work with them. The retina images refers to working with raster images, if you will. The things that we are gonna touch in this course, we are gonna go through, of course, some tools. We're gonna talk about, you know, different tool that we're gonna use as we go through and we build, create, and test. We're gonna talk about icon fonts, which are a great way to use a font that is, essentially, vector that is something that you can put on your site for a lot of different things, including buttons, and icons, and social media icons, but they are ready to go for retina, they are ready to go for HiDPI. We're also gonna talk about SVG, Scalable Vector Graphics, which is, if you look here, a great way to be able to serve things like logos, and buttons, and background images, and different things to that effect. You'll see that down here is actually an example of an SVG. SVG is vector for the web, so it looks great on all devices. We're also gonna talk about favicons. Favicons are those little, teeny things that show up in the corner up here. Those little icons, if you will, that show in the tabs of browsers or when you bookmark, but they also show up in a lot of different places, including like tiles for Windows 8, shortcuts in iOS. These are things that we need to consider if we're considering HiDPI or retina. I'm not, in this video, gonna get into the different features and describe each one, but as soon as we start to talk also about raster images, there are a lot of solutions for making your raster images, what has to be raster I should say, into HiDPI, or retina, are ready for those devices. We're gonna go through, basically, four methods. We're gonna go through kind of a simpler method, where we just use the HiDPI image. We're also gonna talk about swapping out background images using media queries, which can be very useful. We'll talk about a JavaScript solution, called Retina.js, which is a little library, that allows you to go in and it just swaps the images for you. And we'll talk about good and bad for a lot of these things as well. Finally, we're gonna wrap with what's called PictureFill, which is a movement towards working with the picture element, a proposal if you will, to make your images serve HiDPI, or retina, images to the right devices. Now, just because I'm going to show you each one of these types of solutions, if you will, doesn't mean that we're gonna use them all on a single website, okay. We are going to use icon fonts, and SVG, and favicons most likely on all of our sites, but when it comes to the raster images, we're gonna pick a solution, or at least a mixture of solutions, to get the right workflow. So, like I said in the beginning here, there is no magic line of code or plug-in we can employ to make our site HiDPI, or retina, ready, but we've got a lot of things that we can look at to accomplish this.

Contents