blog by

rob kircher

Wednesday, January 30, 2008

Building a Photo Website

My photo website started well over a year ago with a thought and a concept. The thought? Well that came about as I was helping my cousin Mike with some issues on his site. As I was going over his images I thought, “It might be cool to build my own website for some of my photography.” The concept? Well that would evolve over time but basically I wanted a simple site, easy to navigate, and most of all a clean looking site that wasn’t cluttered with what you see on many sites today, animation (Flash), music, fancy typefaces, etc. The task was to create an attractive, well functioning site that would showcase the photography and not my abilities to create fancy websites.

The first thing to work out was a color scheme… Hmmm… what colors would help complement my work? I find that most images seem to pop when places on darker backgrounds so I picked a darker shade of gray to use as my background color. Then keeping in mind the goals, I decided a more monochromatic look would be best. It’s simple and won’t detract from the images.

Now design. Simple... It has to be simple. I don’t want the viewer distracted by design elements on the web page so I decided to use single line rules to separate the major sections of the page and to keep the header of the page as plain as possible. The same holds true for the font style used. I needed something easy to read but plain enough to keep the viewer interested in the photos and not the text. In my opinion, nothing says simple and plain, yet sophisticated then a Helvetica style font.

The other very important design item for me was that page movement, meaning the changing of height and width, had to be kept to an absolute minimum. Nothing is more distracting then when I click on a link and the next page is completely different than the page I just left. To this, my images must be the same size and display in the same place as the images before and after. If done properly the only thing that should look like it changed, as the viewer navigates, is the image itself.

Now to the photographs. How to organize them. How to display them. Again here the overall driving factor was simplicity. Too many categories or nested categories and the viewer will quickly get lost. Too few and the viewer will get bogged down in a single gallery that seem endless with images. So I settled on the simple. People, Places, and Things and then added Theater, Sports, and Wildlife. These 6 categories pretty much cover everything I shoot.

How many images per gallery was something of another matter altogether. My hope was to keep it down to 10 or 15 at most but when it came down to actually picking the photos I just couldn’t do it. So as it turns out each gallery has around 25 images. A few more then I intended but not too many assuming the images are interesting.

Ok so the goals and idea were set forth and it was time to create an actual design. I’ve found that Microsoft Publisher is an excellent tool to create design mockups. So using Publisher I created my first pass at the graphical design of the page. One particular reason why I like to use Publisher, and there are other tools that will do the same types of thing, is it’s very easy to work with color schemes and pull the hex values from those colors when it comes time to actually build the site in HTML. I can also create graphical elements such as rules and buttons and then export then to gif or jpg to be used in the HTML of a given page.

Now to translate the graphic design into an actual web page. I use Microsoft Front Page as my basic HTML editor. Again there are many other tools one could use but I find FrontPage more than sufficient for the type of website I build.

The first thing to do is break up the mockup into table and cell layout that represent the major sections of the page. Header, Body, Footer, Menu area, Image area, navigation area and so on. Using this basic table design I created a template page that each and every other page would be derived. This way I’m certain that all the pages are the same. I then created shared components such as menus and in this case the gallery HTML which are embedded into the template page, again assuring that every page is exactly the same. Making a change to the component is immediately reflected in every page using that component.

Next item to create was the code that drives the actual image galleries. I needed something simple that wouldn’t require major rewrites each time I added an image. The solution was quite simple. Create an array of images making sure the names of the images were simple, e.g. places-001.jpg and then write code that would cycle though that array within the gallery page, displaying each image. This way, to change an image all I need to do is replace an existing image with a new image making sure the new image has the same name as the old. Adding addition images is as simple as adding a line to the array code. Couldn’t be any simpler.

Formatting; let’s not forget about formatting. Font type, size, color, spacing, mouse over behavior and all other style behavior is defined in style sheets. By using styles there’s no reason to repeat formatting on each and every element, just assign the proper style and it looks and behaves just as it’s supposed to and constantly throughout the site. More importantly a simple change to a given style is applied to the entire site without the need to manually change the formatting throughout. This makes tweaking the appearance of the site a breeze; just edit the style sheet. Want to change a color? Change it in the style sheet. Want to change a typeface? Change it in the style sheet. Paragraph spacing? Style sheet. Border size and color? Style sheet. As long as you were diligent enough to use the styles throughout your entire site, the changes are applied as you tweak the style sheet.

Now assembly. With the template now containing all the functioning components, menu, gallery etc, and all the proper style defined and assigned, all that was required to create a specific gallery was to copy the template, renaming it appropriately, and then create the companion image array file. That’s it; a fully functioning gallery page that displays the images defined in its associated array file. Of course the images needed to be chosen and copied to the site but that’s another issue altogether.

Well now the pages are in place and working as prescribed but there aren’t any images. Uuuuggghhh. Now I have to go though all my images and pick out the best 25 of each category. Well it turns out that this process was more difficult than the creation of the site itself. So difficult in fact that I put it off for weeks, then months until I finally decided that I just needed to get it done. So over the past several days I sifted though about 4 years of images slowly but surely quelling them down to 6 categories of 25. Once each set was defined they needed to be resized, renamed, and copied to the website location, along with creating 6 array files reflecting the exact number of images per category.

Once all this was done the gallery page was ready to go and once all the galleries were done the website was finally completed.

So there you have it; how I created my new photography website. Of course I’ve left out a lot of detail such as the time and effort put into finding, writing and testing the actual code that drives everything but I hope after reading this you will have a better appreciation for what goes into designing and creating a well functioning and pleasing website. To which, I hope I’ve accomplished the goals set forth at the beginning of the project and indeed did create a well functioning, and simple site that is pleasing in design, function and forum.

Well here it is: RRK Photos


  1. Whoa! Very in depth. Hope you didn't pull a muscle typing that!

    Good info, though.

  2. It looks great Rob. I love all the images your chose. And the design compliments them perfectly. Well worth all your effort!