Ok, so I just listened to Laura’s interview last night, and started to wonder the same thing. She was very adamant about designing mobile first…which leads me to think that she sets up her media queries with min-width (for scaling up) instead of something like max-width (for scaling down). I just checked out her site and it seems like she did just that. The illustration on the right isn’t loaded on the body element until you reach min-width 1200px. According to the media query article posted by @mmoutstafa, this seems like the best way to go about setting up your images.
The one thing I don’t quite understand yet is, what do I do with inline images (img)? Does this suggest that I need to add extra unneeded markup and load them as bg images, in order to prevent their loading on small screens? I know there are js plugin solutions out there, but it would be nice to accomplish without having to rely on loading more files. Any ideas?
I like your explanation @paulie_d. I ask though because I’ve had situations where I’ve added inline img’s that were actually decorations, just because I would have had to add extra markup in order for them to be visible as background images (ex: empty span or div). Is this semantically incorrect (using decorative inline images)? I’d assume that for responsive designs sake, I should probably add the extra markup and load them as background images.
As ‘web people’ we tend to get hung up on what things ‘should’ be and often we can get quite defensive of our various positions.
I’m a little more relaxed about it, perhaps. If your code requires extra markup to achieve the required design then so be it. I would make sure that my divs/spans/whatever have classes that are descriptive as to what they are doing.
Often there are ways to avoid extra HTML with, erm, creative CSS but that’s how we learn?