We have the basic gallery header in place, but it’s missing the little blue people that Erica put in the original illustration. We had talked about it in advance, and decided it would be pretty cool if when the screen was resized, the people would stay put as the gallery wall moved behind them, so it looks kinda like they are browsing the gallery in awe.
Since the people graphics are purely ornemantal, using markup for them isn’t ideal. Fortunately there are two of them and we get two free pseudo elements on every element (::before
and ::after
). We use those to add them.
We introduce a concept in this video that will continue to be useful, the concept of “reverso media queries”. We’re largely working desktop-down in this design, so our media queries are based mostly on max-width
. But if we set up the same media queries based on min-width
, we can target the screen only when it’s larger than a certain size, not smaller.
In this circumstance, the people graphics just don’t fit on small screens. So we use a reverso media query to load them, that way we’ll load them on large screens that they work on, but don’t load them on small screens. That’s better than loading them all the time and hiding them on small screens.
That was a cool technique to save bandwidth on smaller devices. You might address this in a later screencast, but in your testing, did this work?
I does work in desktop Chrome like I was using here, yep. As evidenced by the flash of white you can see while the image loads after resizing, but also you can check out the Network tab in the web inspector.
I’m not sure if it’s 100% guaranteed not to load in all browsers, but here’s some relevant research by Tim Kadlec.
@christopherisaak, starting with Safari 6 (and I think you might need iOS6), you can can actually inspect web pages on your iDevices via the web inspector on your desktop!
On your iDevice: Set Settings > Safari > Advanced > Web Inspector to ON.
In Safari: go to Safari > Preferences > Advanced check the Show Develop menu in menu bar checkbox.
Plug your iDevice into your computer and open Safari and go to the page you want to inspect. On you Mac, go to Develop > [Name of Your iDevice] > [URL of site you’re viewing on your iDevice].
Then you have the full suite of developer tools (which got a sweet upgrade in Safari 6) at your disposal, but you’re inspecting the page on your iDevice!
For example, go to the stopwatch icon and reload the page on your iDevice. You will see all the items in the page as they are loaded, etc. You can do this with your iPhone and see whether or not the header-image-left.png or whatever it was called gets loaded. I only have an iPad, and that’s the Mama Bear breakpoint which is supposed to load them, so I couldn’t test this specific item, but now anyone with a $2000 Mac and $500 iPhone can! =)
Nice technique on using the pseudo elements here, Chris! My original thought when I saw this was, “Why not declare multiple backgrounds on your header?” So I whipped up a CodePen to try that out and ran into some problems, i.e. you can’t really fine tune right positioning with background images (at least not yet) which would hurt your crowd control there on the right. And according to caniuse.com generated content actually has slightly better browser support than multiple backgrounds (looks like IE8 is the only issue there). That was surprising to me. The more you know…