Press "Enter" to skip to content

Melk in de Meterkast

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.

The original design had full-width images only

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.

To reduce page load the original design added images to the body when the user got near the end of the document. This also provided an obstacle for javascript disabled browsers.

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,
medium.jpg 800w,
small.jpg 256w"
sizes="(min-width: 768px) calc(.5 * (100vw - 60px)), 100vw - 30px"
src="small.jpg"
alt="picture one" />

I found this guide by smashing magazine pretty clear and straightforward in explaining srcset. To check the performance of your website.

Launch

 

Visitor data from the first week to melkindemeterkast.nl

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.

Visitors on launch day

All in all, for us this was a successful launch. If you want to check out the website you can do so at Melk in de Meterkast. It features work from Floor Fortunati, whom I highly recommend.

 

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *