Photo Corners headlinesarchivemikepasini.com
A S C R A P B O O K O F S O L U T I O N S F O R T H E P H O T O G R A P H E R
Enhancing the enjoyment of taking pictures with news that matters, features that entertain and images that delight. Published frequently.
Site Tweak: A Little More Responsive
25 February 2016
We're still chipping away at the responsive site design thing here. And tonight we made a little progress on resizing images in portrait orientation on small screens.
We do use the
heightandwidthoptions in theimgtag because that's how we did it when we were writing with charcoal on the walls of the cave. It saved layout time to know how much space the slower-loading images would require. So when everything had loaded it wouldn't, you know, have to redraw the page.But that's not kosher in responsive design. You let the device figure out the dimensions on the fly. Which forces a redraw. We suspect you've noticed a lot of redrawing Web pages over the last couple years on sites where
heightandwidthare omitted.A better approach is to have CSS override our
heightandwidthoptions when necessary. We knew that but what we didn't know was the magic incantation to get it to actually work.Tonight, we figured that out.
So on our headlines pages you now see full-width images, not those 60 percent wide thumbnails (where did those come from?). And in our stories, you get a closer approximation to the full-size layout, too. Although there we had to fiddle with images that are not full width.
We haven't figured out the trick to making our image slider behave but we're working on it.
And for problems like that, all you have to do is rotate your phone to landscape mode to see the full-size layout.
Use the Feedback button below to let us know if you run into any other problems, though. We like fixing things.