Hey there!
Today we're releasing 20 new videos in the "Front End Development" collection, this time covering the basics of Responsive Design and adding responsive images. This is some fun and mind-bending stuff if you've never seen it before. If you have, you might find some fun tidbits in there you didn't know.
Enjoy!
The pros and cons of using high resolution images New!
In this video we create a high resolution image, demonstrate how browsers interpret those extra pixels, and how we can wrangle the image with CSS to get it to display at the size we originally intended.
How to serve both low and high resolution images with Retina.js New!
In the last couple of videos we explored the pros and cons of serving low or high resolution images to our visitors, but in this video we discuss a simple way to serve both using a JavaScript library.
How to set up a lightweight web server with Node.js to get around local file browser issues New!
So far we've simply been opening up a .html file in the browser in order to run our example. However, with the introduction of Retina.js, we're going to need a server of some kind since our browser is limited in the kinds of local files it has access to. Here we quickly install a Node.js extension that can spin up a lightweight server so we can get Retina.js working.
How to avoid 404 errors when using Retina.js New!
In the previous video we fixed some JavaScript errors, but we're still getting some 404 browser errors due to images that Retina.js is looking for and can't find. No worries, it's simple to tell Retina.js to look for images that actually exist.
What a 404 error is and why we should try to avoid them New!
The downside of using Retina.js to serve high density images to high resolution screens New!
The solution of serving a high-resolution image only to browsers that can support it is fantastic, but there are some downsides. Here we talk about what those are and pave the way for an alternative, future-proof solution that's sure to excite and enthrall!
What "responsive design" means and a brief history New!
(This one's FREE!)
If you started watching this series because you wanted to learn more about "responsive design," it probably seems like it's taken a long time to get to this point. But rest assured that everything you've learned so far will help to serve your understanding and mastery of responsive design. In this video we summarize what responsive design is and why it's better than some of the alternatives front end developers have used in the past.
What responsive design implies for the layout of our site New!
Now that we know what responsive design is, we discuss the implications when it comes to the layout and design of our entire site.
What responsive design implies for our images New!
While we'll find that it's relatively simple to support responsiveness for a number of HTML elements, one of our biggest challenges is working with images. It's not that they're impossible to work with, it's just that many of us have become used to the idea that images are a simple tag you can slap into the site and be done. Once we realign our expectations to include the diverse possibilities for our images, we'll be set up to enjoy what the following videos illustrate for a solution.
Why the browser can't serve the right images for the right scenario without our help New!
(This one's FREE!)
Browsers are smart because they know when to be stupid. If a browser makes too many calls to the server, or waits to load a page until it has all the information it could possibly use from the server, us users of the web would revolt because we've come to expect a faster web. Because of this, there are some things a browser can't know unless we tell them, and we explain how that works for images here.
How to use the "srcset" property in the image tag to help the browser fetch the right image New!
Even though browsers can't know the resolution and density of images on the server, we can tell them before they go fetch the image by using the "srcset" HTML attribute. Though browser support for this attribute is slim at the time of this recording, in the future all major browsers will support it.
How "media queries" work to pull in different CSS based on conditions in the browser New!
(This one's FREE!)
Giving the browser information about the resolution and density of images on the server is just part of the solution for building responsive images. The second factor has to do with telling the browser when different sizes of browsers might trigger a different layout, and thus a different image. The way we explain these scenarios to the browser is through something called a "media query."
How the "sizes" image attribute works to provide breakpoint information to the server New!
Now that we understand how media queries work, the "sizes" attribute for images will make a lot more sense. With "sizes," we can tell the browser what size the image will be in different browser situations, something the browser usually can't know until it loads the complete CSS from the server.
What a "breakpoint" means in connection to CSS media queries New!
From this point on, we'll be using the term "breakpoint" to make reference to media queries where the condition has to to the size of the browser. It's a cooler word, but is really more along the lines of slang in the front end world.
How to use the srcset attribute safely until there's bettter browser support with picturefill New!
The "srcset" and "sizes" attributes are a lifesaver when it comes to coding responsive images, and because the attributes are part of the HTML spec now, eventually all browsers will support it. In the meantime, however, we need a way to improve browser support and the way we do that is through a JavaScript polyfill called "picturefill."
Setting up our logo image to match the mockup New!
We've pretty much already created the code we need for our logo image, but here we cinch it up by checking the size of the image in our mockup and making sure our code matches up.
How to use SVG images for scalable vector graphics on the web New!
So far we've used a couple kinds of images: We've used a bitmap PNG file for our logo, and vector font icons for our icons. In this video we introduce another vector option that can give you greater versatility than a font icon, but with better scalability than a bitmap. That is, an SVG or "Scalar Vector Graphic" file.
The difference between bitmap and vector graphics, and saving our slideshow background images New!
In this video we talk a bit about the advantages and disadvantages of using bitmap versus vector graphics, and go through the process of creating various versions of our slideshow background image.
Adding the HTML and CSS scaffolding for our slideshow background image New!
To get started building out the image background for our slideshow, we need a place for it to go. In this video we build up the basic HTML and CSS we need to get a working example.
How to set a background image so that it covers an element but does not repeat New!
(This one's FREE!)
In this video we explore several CSS properties at our disposal for adjusting the behavior of background images. While it's all good to know, we eventually discover the killer combination that will give us exactly what we want, which is to align the image to the bottom and have the image stretch to fit our entire element. It sounds like a tall order, but CSS has us covered.
