Melk in de Meterkast is the second website I’ve built in 2017. It’s a static, bootstrap powered, responsive gallery for a photo series about women pumping milk at work. The site would also need a bio of the photographer, a project description and a page with reference to her work. Because all images are black and white shots the primary colors for the site are also black and white with exceptions for in-article links.
Originally I had designed the site to display all images in full width but after reviewing this design with the client we decided that a 2-row gallery would look better. In a gallery with multiple images next to each other, the absurdity of some of the locations is even more profound.
The final design uses bootstrap 4 cards with an image on top and the caption below. When clicked the image will transition to full-screen mode until clicked again. I use JQuery here to move the image object to an empty div with a higher z-index. When the image is clicked again the object is moved back to its previous parent and the scroll height is set to that parent’s position minus a small offset.
Because there are so many images on the site we use the srcset attribute from the img tag to provide the browser image preloader with differently sized versions of the same image and specify the actual pixel width for large.jpg that is
1900w. Because it is a responsive page with a breakpoint at 768px we have to specify that on pages bigger than that the size of the image will be half the view width (2 column gallery) minus 30px padding per image:
(min-width: 768px) calc(.5 * (100vw - 60px)).
Smaller than that the image is full width minus the padding.
An example of this code:
<img srcset="large.jpg 1900w,
sizes="(min-width: 768px) calc(.5 * (100vw - 60px)), 100vw - 30px"
alt="picture one" />
I found this guide by smashing magazine pretty clear and straightforward in explaining srcset. To check the performance of your website.
The launch of the website was a success with 2.3k visitors for the first 3 days. This was mainly due to the photo project being published in a Dutch magazine for new parents and a morning newspaper and another popular magazine, the Linda (around 12:00) picking up on it. in the evening one of the bigger news networks, RTL (18:00), also used some of the images and referenced the website. As you can see below, these two events really drove large amounts of traffic to the site.