Join Brian Wood for an in-depth discussion in this video Options for making your site content look better on HiDPI, part of Making Your Site Retina-Ready.
- 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 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.
- What is HiDPI?
- Adding your first icon font
- Adding hover states and animation
- Working with SVG files
- Creating favicons
- Displaying HiDPI images