A recent conversation between Design & Tech at Rent the Runway:
Design: We want to let the user decide which size images they see.
Tech: Great, we will use percentage widths for the images and they will stretch with the page.
Design: Ok, so what size images do you need?
Tech: As big as the largest view you would like us to support.
...first implementation...
Design: The detail in this image is terrible when the browser is small.
Tech: Yeah, browsers are just ok at resizing images.
Design: We have all of these great photos, professionally edited, can we pick one depending on the browser dimensions?
...second iteration...
Tech: Clown Car Technique FTW!
Clown Car Technique
Why We Care...
Clown Car Technique
We started using the Clown Car Technique (h/t Estelle Weyl) recently when our crack team of designers came up with a new design for “shortlists” -- RTR-speak for a user-defined collection of dresses.
The idea was to give users the choice of which image sizes they'd prefer, while maintaining flexibility with all browser dimensions, and resizing. The clown car technique allowed us to implement the pages to the designer’s liking, while keeping network traffic down and maintaining high quality images.
Why You Should Care...
Many of the best APIs we like to code against, return sets of images of many sizes and shapes. You should use them all to provide the best user experience possible!
What You Should Know
The Smashing Magazine article will do the technique far better justice than I ever could, but if you would like to see it in action:
open a shortlist on renttherunway.com
open your browser's developer tools
go to the Network Tab (filter on Images)
change the image size using the "VIEW" icons and monitor your network traffic
The "VIEW" choice updates the width of the image (nothing more), and the SVG -- the essence of the technique -- determines which image to display.
Questions? Comments? Tweet at us: @rtr_tech