Cody Capella

Photographer, student, and teen.

On the Maintainability of an HTML and CSS Gallery

Why maintaining pages of images without js or additional languages is good and bad.

6:56 pm on Tuesday, May 28, 2013

Return to Blog Home

This website in its entirety, I am proud to say, is hand-coded in Coda 2 (and partially in Brackets) and is made entirely of HTML and CSS, no other languages required. Aside from the images, that's pretty much all I have to edit. Why is this good? Simplicity. I love writing HTML and CSS, as they are pretty easy. It's also fast in its pure form. Of course, images can slow down page load times, but that's only on pages with many images (or those with large file sizes, such as the full-resolution photos on the individual pages in the Gallery.)

So why is it bad? To fully understand the apparent problems, consider how my site's Gallery is run: for each gallery, I create a page with thumbnails. For each image thumbnail, I create an individual page for the full-size image. Not too bad, until you have to copy-and-paste links into each page by hand for dozens of images. Now, imagine doing that after taking a series of a couple dozen photos. It quickly becomes tedious. And bulky in page count. After creating more galleries, the page count can skyrocket into the hundreds (depending on the images in each gallery).

The solution to this is to create a page that will dynamically load the image into it using a language other than HTML and CSS. Or, use a lightbox to display the image on the current page, again using a different language. So, until I decide to embrace another language for use on my website, this problem will continue to surface. As far as reliability goes, however, I feel my approach is pretty rock-solid.

Unfortunately, the biggest issue here is maintainability. Adding pages by hand isn't a big deal compared to the thought of wanting to change the layout of each image's individual page. Since the pages are all written in HTML and CSS and each page is its own entity as far as its content goes, wanting to make sitewide changes (even in something like the navigation menu) requires copying-and-pasting the code for the changes onto each page that has one of the images. So, my advice on maintainability: don't change your mind once you settle on a design unless you have some serious time on your hands to update each page every time.

I will post updates on this topic as I change my website in the future. If you have thoughts, ideas, or suggestions, feel free to let me know.