I had kind of a weird 2025 health-wise, so when portfolio refresh season rolled around I knew I wanted to keep things simple and avoid stressing during holiday time. So what might be fun and not too complicated?
I usually start by thinking about responsive design and the physical act of resizing the browser. In 2024, I played around with stretching text; maybe I could expand on that and think about content stretching but in an undesirable way? Like when you see an image that’s stretched to fit its container but isn’t maintaining its aspect ratio and it’s all wonky.
This got me thinking about the olden days and that means fixed-width websites. When you resized one, nothing typically happened, though. If you sized bigger, you’d get more blank space around the site and if you sized smaller, you’d get overflow and a horizontal scrollbar. What could it mean for a fixed-width website to be responsive?
I liked the idea of trying to resize a website to make it fill more space, but it just stretches the site like it’s elastic. And when you stop, the content just bounces back to the size it was before. And if you resize it smaller, it squishes it until it’s basically unreadable (until you stop, of course). Resizing is futile—but fun! The grain of this website is polyester.
Here’s a preview of the final effect:
Sorry, your browser doesn’t support embedded videos. browser window resizing to show a narrow column of website content stretching and squashing and then bouncing back to its former width
Squash and stretch
To produce the effect I wanted, I needed to use some JavaScript. It’s easier to make images squish and stretch with CSS, but text wants to flow when its container changes size. That’s normally a good thing!
But this meant I couldn’t just change the width and I needed to use a scale() transform. Something like transform: scale(2,1) will stretch text content so it looks like this:
So to have the site continue to scale() as the browser changes widths, I’d need the value to be dynamically updating. And to calculate what that value should be, I need three other values:
... continue reading