- With Picturefill added in to our project,…we have to test to male sure this actually works…the way it's supposed to.…Here, we have to jump ahead.…I'm gonna show you some code here…that we'll explain later on in the course,…so just bear with me.…First, I'm gonna open my project in Firefox.…The reason why I'm using Firefox here…is because Firefox has this really neat…responsive testing environment that we can use.…If I go into Firefox,…right click on anything and go Inspect Element…and then click on the Responsive Design Mode button…in the web developer tools,…you see I can open this site using this responsive area…where I can change the size of my viewport…while I'm still inside the browser itself.…
This is quite useful because you can also set specific sizes…that target specific types of screens.…For example a 1280x600 screen…or maybe a tall tablet so 768x1024.…And you can test out and see how your content…will behave on all these different screens.…For our purposes,…this actually will work really well…because what we're testing is to make sure the image in here…
- How responsive images work
- Adding Picturefill to your site
- Making regular images responsive
- Using the <picture> element
- Identifying breakpoints and layout changes
- Using the <picture> elements for image type fallbacks
Skill Level Intermediate
Q: When I use Firefox's Responsive Design View, the images aren't automatically reloading when I resize the window. What do I do?
A: This is a known bug that only affects Firefox version 38. If you update to Firefox 39 or later, this should be resolved (at the time of writing, Firefox 39 is slated for release June 30, 2015).