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)

landscape view on iOS

Portrait on iOS (iPhone 5 size)

portrait view on iOS


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: , ,