The Kitchen Window Gardener

The Kitchen Window Gardener website is a side-project centred around a passion of mine: I like to grow vegetables. Currently I don’t have a garden, so I decided to see what would grow in a few tin cans on my kitchen window sill.

My aim is to document my exploits and the lessons I learn. The basis of this record is a monthly snapshot of my kitchen window sill.1

With the emphasis on the snapshot—photograph—this gave me the opportunity to experiment in a couple of areas: firstly, full screen images; and secondly, image as interface. This presented a challenge when thinking about how the site should appear at different screen sizes (mobile, tablet, desktop etc). How and when the image should be cropped, and at what points the user should be able to pan across the image.

Using the image as the interface has meant that there is a lack of cues to guide user interaction. It is up to the user to discover that clicking or tapping on a plant will reveal more information about that plant. Custom Google Analytics events are triggered at this point—to show the popularity of each plant—and the data indicates that discoverability of these interactions is reasonably high amongst visitors to the site.

When building the site there were several things that I did to progressively enhance the experience:

  • By default the site uses a low resolution image, and a higher resolution version is loaded in for larger screen sizes.
  • Media queries are used to build the full-screen image layout–enhancing a basic single-column version–for capable browsers.
  • Javascript files, including the jQuery library, are only loaded for browsers capable of understanding media queries–this is achieved with a simple javascript test for the match media property.

These techniques have the added bonus of keeping the site incredibly lightweight for older browsers.

1 This record only lasted a month as my life was quickly taken over by wedding planning. I intend to resume the site in the coming months.