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.

Comments

  1. User Avatar
    christopherisaak
    Permalink to comment#

    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?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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.

  2. User Avatar
    Jason Neel
    Permalink to comment#

    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…

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag