I recently did some traveling and, yada yada yada, I ended up with a bunch of photos I wanted to share. I’m not a photographer and have never been a big user of any of the major photo hosting/sharing sites like flickr or smugmug. So I put together a simple photo gallery: http://rawr.gr/kenya.
While brainstorming how to I wanted to display these photos for people, I came up with a few requirements:
- Work on any size screen. I knew many people would view this on their phones/tablets and it needed to be a painless experience or they weren’t going to look at this stuff.
- Avoid a gallery/slide show presentation, including light boxes. I didn’t want to require a click or tap per photo.
- Do not use a thumbnail/full size combination. Again, this would require a click or tap (plus more work on my part to generate two copies of each photo).
- Photos should take up all available screen real estate.
Since the fold is a lie and everyone knows how to scroll, I decided to put all my favorite photos (40 or so) in a single page. Great. But that poses a problem: it’s a terrible idea to fire off 40+ requests for images when a page loads. Luckily, I’d just come across a micro library called echo.js to lazy load images. Echo.js waits to load photos until they’re close to the visible part of the page, which is exactly what I needed. With that, I was pretty much finished.
There are two other minor webby things to point note about the photo page:
- CSS is used to specify width: 100%; on img tags. This is all it took to meet the last requirement in the list above.
- I’m using an .svg file with the text “hold tight, pic comin'” as a place holder so I don’t have to worry about my loading placeholder looking pixelated on retina screens (again, important on phones/tablets) or when a browser window is large.
I’m happy with how this turned out, both in terms of presentation and performance. I didn’t get much feedback on the design, but I did receive a number of comments on photos pretty far down on the page so I know people who visited the page took time to look at most if not everything.