Man. I tried to create responsive images today, and it was more trouble than I would've expected.

I think the biggest problem for me was a long detour through srcset. If all you're interested in is making sure a different image is presented on mobile, what you really want to use is picture.

Here's an example:

<picture>
  <source media="(max-width: 500px)" srcset="./resources/mudSmall.png">
  <source media="(max-width: 1000px)" srcset="./resources/mudMedium.png">
  <source media="(min-width: 1001px)" srcset="./resources/mudLarge.png">
  <img src="./resources/mudLarge.png" alt="Responsive screenshot of MarkUpDown">
</picture>

That's it.

Excellent, though not quite great, tutorial on creating responsive images here at MDN.

Biggest win? Now my screenshot changes when I tip my phone from portrait to landscape and back. Observe!

Landscape on iOS (iPhone 5 size)

Portrait on iOS (iPhone 5 size)

RapidWeaver Theme Removes ALL br Tags. Rly.

Now to figure out how to get that content centered for mobile portrait in the RapidWeaver theme I'm using (called Offroad). Hit a really nasty snag today where whoever made the theme -- a pack-in for the RapidWeaver application, no less -- decided they'd erase all br tags from your pages on the site. No, honestly. Some theme designer thought this code was a good idea:

if (
    $(".site-logo img").width(t / 2),
    $("br").remove(), 
    $(".thumbnail-wrap, .thumbnail-frame").attr("style", ""), 
    $(".photo-frame")[0]
) { //...

Can you spot it? Of course you can. It's the $("br").remove(). WTFBBQ, man?

I changed it a bit to make it less invasive, but still, REMOVING EVERY br TAG PROGRAMMATICALLY IS A CODE SMELL, FOLKS. I'm not bitter. ;^)

if (
    $(".site-logo img").width(t / 2),
    $("br").not(".site-content-inner br").remove(), // <<< EDIT MADE HERE! -RUF
    $(".thumbnail-wrap, .thumbnail-frame").attr("style", ""), 
    $(".photo-frame")[0]
) { // ...

Everything seems happier now.

Labels: coding, css, rapidweaver