Lynnandtonic.com'un yazarı, 2025 yılı için portföyünü yenileme sürecinde, sağlık sorunları nedeniyle basit ve stressiz bir yaklaşım benimsemek istedi. Geleneksel duyarlı tasarım yaklaşımlarından farklı olarak, eski sabit genişlikli web sitelerini ve orantısız gerilmiş görselleri düşünerek benzersiz bir fikir geliştirdi: "esnek" bir web sitesi. Bu konseptte, tarayıcı penceresi yeniden boyutlandırıldığında site içeriği orantısız bir şekilde geriliyor veya sıkışıyor, ancak boyutlandırma durduğunda orijinal haline geri dönüyor. Bu, kullanıcının siteyi yeniden boyutlandırma çabasını "nafile ama eğlenceli" kılan bir etki yaratıyor.
Bu "squash and stretch" (sıkıştır ve ger) etkisini elde etmek için JavaScript kullanılması gerekti. Görselleri CSS ile esnetmek kolay olsa da, metin içeriği tarayıcı boyutu değiştiğinde akışını değiştirmeye eğilimlidir. Yazar, metnin akışını bozmadan gerilmesini sağlamak için transform: scale() özelliğini kullandı. Bu, içeriğin genişliğini dinamik olarak değiştirmek yerine, tüm siteyi bir bütün olarak ölçeklendirmeyi gerektirdi.
Uygulama, içeriğin sabit genişliğini, yeniden boyutlandırma başladığındaki tarayıcı penceresi genişliğini ve yeniden boyutlandırma sırasındaki tarayıcı penceresi genişliğini izleyerek dinamik bir scaleX değeri hesaplamayı içeriyor. ResizeObserver API'si kullanılarak, tarayıcı penceresi her değiştiğinde bu değer güncelleniyor ve app.style.transform = "scale(" + scaleX + ", 1)" koduyla site içeriği yatayda ölçeklendiriliyor. Bu sayede, kullanıcı tarayıcıyı daralttığında metin okunamaz hale gelecek kadar sıkışıyor, genişlettiğinde ise orantısız bir şekilde geriliyor, ancak fare bırakıldığında site anında normal boyutuna dönüyor.
Web tasarımında yaratıcı ve sıra dışı bir duyarlı tasarım yaklaşımı sergileyerek kullanıcı deneyimine eğlenceli ve interaktif bir boyut katıyor.