Beyond Just Code: Tips for Building Your Photography Website
Text copyright Jason Hahn, all rights reserved

I built websites for years before nature photography ensnared me, so when it came time to build a site to show my photos I thought it would be a breeze. I applied every skill I had used building corporate intranet sites, and produced a site that was, well, blah. It had no life; it was sterile and it did not compliment my work.

A few designs and many clients later, I have found that to build an attractive, functional, and successful website to showcase your photography requires more than just technical knowledge of how to code a website. It requires planning, foresight, and a thorough understanding of the elements of design. As with photography, learning just the technical side of the craft and ignoring the art does not produce the best results.

Looking to build a site for the first time, or thinking of redesigning your site? These steps will help you plan and build a site that truly compliments your work.

Define your site’s purpose
What is your site’s purpose? Defining the purpose of your site is a critical but often overlooked step. Are you building a place for your friends and family to see your photos, do you want a searchable database for editors to look for stock photos, a virtual storefront to sell prints, or some combination of these? Really think about what you want to achieve with your website and the reasons for having one. Don’t start building a website just because everyone else has one. Clearly define your goals, both immediate and long-term, for your site. This will give your site the ability to expand as your goals change over time.

Understand your audience
Hand in hand with defining your site’s purpose is the need to identify your target audience. At first you will need to make some educated guesses about who will be visiting your site; later, as traffic grows, website statistics programs will let you analyze the habits and demographics of your visitors. For example, if your target audience is graphic artists and editors, they will want the ability to quickly search a database or stock list of your work. This function requires gallery software that may not be necessary if the site is mainly for family and friends to visit. Also, study your visitors’ typical screen resolutions, browsers, operating systems, and whatever other relevant information you can collect. Building a site that only looks good on a monster 24” monitor will alienate the vast majority of visitors who will most likely be on a 17” monitor. Defining your audience will also help you better develop a floor plan, design, and infrastructure for your site.

Design a floor plan
I believe that every visitor that comes to a photography website should be treated as a shopper. Not that every person who visits is going to give you money (wouldn’t that be nice), but they are searching for something: information, photos, or just otherwise browsing your merchandise. You will want to make it easy for them to find what they are looking for. Take a lesson from retail stores who have made marketing to the masses a science. While no two commercial chain stores are exactly alike, the overall structure and floor plan of each is often the same. They know where to put target merchandise, what items to put near entrances, what to put near cash registers, how people will browse through the store, and how to direct the flow of customers through the various departments within the store. Your website should do much the same, with certain key items carefully positioned within the site to draw attention. The pages should be intuitive and easy to understand, and you may be able to direct the visitor through your pages. Define the content you want on your site, organize it into logical sections, and develop clear and consistent navigation for getting between the different parts of your site.

Define your look
Your website is the frame, not the art. A good frame compliments the art; its purpose is to showcase your photography – it should never overpower it. Not every photo is complimented by a black or white background. Find a color scheme that enhances the majority of your work. If you specialize in scenes from the desert, find a color scheme that matches the hues and tones common in your portfolio. Likewise, if you specialize in winter scenes, a bright red and yellow site is probably not the best color scheme, as it will overpower the softer tones seen in these types of shots. In addition to colors, textures can be an important element of your look. If you integrate textures into your backgrounds, graphics, or other site elements, pick textures that compliment instead of compete with your work. It’s very easy to overdo the use of textures, so try to pick only a few to use that work with each other, use them sparingly, and have a reason for using them that is consistent with the rest of your design concept.

Develop your brand
Developing a brand, a look, logo, and theme for your site is probably the most difficult step in the design process. But it is a crucial step, adding a level of professionalism and consistency to your site that is otherwise difficult to achieve. Most importantly, by doing so you define who you are and what your work is about to your customers before they have even browsed your portfolio. Likewise, poor branding can lead to preconceived notions about you and your work. If you do not know who you are, neither will anyone else.

In developing your brand do not be afraid to look around for ideas, and not just on other photographers’ sites. Often your own photographs are the best indicator of who you are. Early in the design process I suggest to clients that they select their ten favorite photos from their portfolio. Then, compare them. Do you see a consistent theme in terms of subject, composition, mood, or color? Next, have a friend pick their ten favorite shots from your portfolio and look for consistent themes among this selection. Also see how their selection differs from yours, this is a good indicator of how others perceive your work and may uncover strengths in your work you wouldn’t otherwise have seen. These photos can also give you ideas for logos (my personal logo is a stylized egret inspired by one of my favorite shots). A logo can be as simple as your signature, but it should be unique and be complimented by the rest of your design. Other good sources for logo and design inspiration are magazine layouts, retail store displays, or nature itself. And don’t just go with your first design idea. Develop ideas for two or more different layouts. Often you will find that it may be your third or fourth idea that is the best, or a blending of several earlier ideas.

A word of caution as you look for inspiration: logos, web designs and even source code may be protected by copyright or trademark, just as your photography is. While it is okay to look for ideas, never copy someone else’s design. If you have any questions about copyrights, there is a wealth of information available here in NatureScapes.Net’s Business Forum.

Develop your infrastructure
Once you have your floor plan and you know how you want your site to work, it is time to actually build it. This article is not going to delve into all the possible software packages out there, or the variety of programming languages: HTML, XML, CSS, PHP, etc. There are scores of books and websites devoted to each language or software package. The key is to find the current trends and industry standards. Then, determine the simplest way to realize your design ideas and make your desired functionality come to life. You should learn HTML; it is by far the easiest language to learn, and is the fundamental language to understand to move on to the others. There are a number of different visual web development tools available, such as Dreamweaver or Adobe GoLive, or dozens of HTML editors available (see the links at the end of this article). Even if you are using a design package like Dreamweaver, you should know the basics of HTML code to be able to tweak your pages if necessary. Sites like www.w3schools.com are a great source to pick up the basics of these languages.

To determine the trends for gallery sites, look at other artists’ websites, especially big names, and don’t be afraid to ask them what they use behind the scenes to make the site function. The worst that can happen is they ignore your message. Generally, the trends for larger sites have been towards server side-gallery applications that can store thousands of images, such as Coppermine Gallery or Lightbox Photo. These systems are great for mid- to large-sized sites, making updating and cataloging your portfolio easy. Again there are a variety of gallery software packages out there, look for ones that are well supported, have a large user base, and are relatively easy to learn and integrate with your site.

This last point is key; failing to integrate the gallery so that it matches the look of the rest of your site is one of the easiest ways to detract from the professionalism of your site. All gallery programs come with theme templates you can use, but unless you modify the rest of your site design to look like one of these templates, you will need to spend the time to learn how to correctly modify the template to match your site. By going with gallery applications that have good support and a large user base, there will be many people you can ask for help in this. There will also be plenty of developers who you can hire to do this integration, usually at very reasonable rates.

Stay away from gimmicks
In building the code for your site, stay away from gimmicks and flashy programming, especially if these things take time to load. This is time your visitors would rather spend seeing your work. They came to be entertained by your photos, not by clever JavaScript tricks. If someone is seriously perusing your portfolio, they will quickly become annoyed after the tenth time the screen dissolves as they try to open a new page, or the dancing snowflakes trailing their mouse cursor around or sitting over the photo they would like to see. Just because something is nifty the first time you see it does not mean you should make it a part of your site. Try loading it a dozen times and see how quickly the novelty wears off. By frustrating your visitors, you are giving them a reason to leave, and odds are they will not come back.

There is the often-debated subject of splash pages, an automated slide show of sorts on your website’s main page. While a well-done splash page can capture a viewer’s attention and set the tone for your site, it is also one step more for visitors to take to get to your portfolio or arrive at the information they seek. Avoid poorly designed splash pages, especially slow and lengthy animated sequences, which will only frustrate your visitors. Have a reason for your splash page, what you hope to accomplish with it, and how it enhances your visitor’s experience at your site. If you are really burning to show off your skills in developing Flash slideshows, embed them elsewhere in your site, and leave it to the visitor to choose whether they want to view it or not.

Get feedback
Before you go live with your site, ask everyone you know to look at your site, and ask them for brutal honesty. Tell them to nitpick it, what they hate, what they love, and how the site makes them feel. Take everything they tell you and start looking for consistent problem areas. You don’t have to make every change suggested, but you may need to refine your site. If it really is just not working, it’s best to know now than six months from now when you are studying your web logs and can’t understand why the average visitor is only staying on your site for mere seconds.

Study your traffic, retool your site, and don’t get stagnant
Most web hosts provide a wealth of tools to study the habits of your visitors, such as AWStats or Webalizer. Other tools available include Google Analytics, which requires you place a snippet of code on each page you would like to track, and will capture all sorts of information about your visitors. The data gleaned from these logs and services can be priceless. It will tell you all sorts of things about your visitors you may have never considered before. For example, I had considered a redesign of a site to use a larger layout that would have only worked on screens at a resolution of 1024 x 768 or higher. After reviewing my web traffic I found that 14% of my visitors were still using 800 x 600 resolution or lower screens. I risked alienating over 1 in 10 of my visitors with this new layout, so I put it on hold. On the other hand, I found that less then 3% of my visitors used a browser other then Internet Explorer or Firefox, so instead of pulling my hair out making my site compatible in every browser out there, I focus only on compatibility in these two.

After a few months of your site being live, see if you are starting to place with search engines and study your viewer’s browsing habits. If they consistently exit the site before they get to your work, consider whether your site navigation is clear enough, or whether you have elements that are loading too slowly for your visitors to wait around for. Early in your site’s life don’t be afraid to make major changes if necessary; it is later on when your site is well established that you want a measure of consistency for your site’s repeat visitors. If you are not appearing in search engines, check your content. Be sure the words (key words) and phrases that you want people to search for are present in good quantity, but not so much that the content makes no sense.

Visitors and search engines like fresh content; it gives them a reason to come back to your site. Using gallery software applications is a good way to make it easier to maintain your site and add new content frequently. Realize it will take time and work to get good search rankings, but having a site that is well laid out, with good content, will make it easier for the search engine spiders to index your site, and in time your rankings will improve as you add more content and crosslinks.

Avoiding becoming stagnant is also a key consideration you should make when you are deciding what software will power your photo galleries. Pick software that is not a chore to use, or that does not make you recreate your entire site when you want to add a photo. So many times people come up with a great design, only to let their site fall by the wayside because it is too hard to update. Packages like Coppermine and Lightbox are dynamic and easy to maintain, making them a good choice to keep your site fresh, even for the smallest of sites. While they do take more time to learn and integrate into your site design, the payoff in the long run is well worth it.

Get help!
You don’t have to do it all yourself! For about the price of a midrange zoom lens, you can have a designer build a site for you. There are many, many designers out there; talk to them, interview them, and find one that embraces your style. Ask for references, review their past work, and determine if their design style is a match for what you want in your site. Besides, having someone build and maintain the site for you gives you more time to go out and take pictures!

Links
Below are some links to popular applications and resources available on the web. These are only a small sample of the wealth of resources available, and are not intended to endorse any site or product.

Web Development Software
Dreamweaver - http://www.adobe.com/products/dreamweaver/
Adobe GoLive - http://www.adobe.com/products/golive/
Coffee Cup HTML Editor - http://www.coffeecup.com/html-editor/

List of other editors on Wikipedia: http://en.wikipedia.org/wiki/List_of_HTML_editors

Web Gallery Software
Coppermine - http://coppermine-gallery.net/
Lightbox Photo - http://www.lightboxphoto.com/

JAlbum - http://jalbum.net/
Gallery - http://gallery.menalto.com/
iView Media (soon to become Microsoft Expression Media) - http://www.iview-multimedia.com/

Web Design Resources
Web Page Design for Beginners - http://www.wpdfd.com/
Web Style Guide - http://www.webstyleguide.com/index.html?/contents.html
CSS Zen Garden (incredible source for inspiration) - http://www.csszengarden.com/
WebDev Forums - http://www.webdevforums.com/
Webmaster World - http://www.webmasterworld.com/

Jason Hahn is a Florida nature photographer whose work has been published in numerous books and magazines which can be seen at www.jasonhahn.com. His web design company, GalleryCraft, specializes in building gallery websites for artists. You can find out more about his web design services at www.gallerycraft.net.

Feel free to send your comments on this article to the at NatureScapes.Net.

All content on this site is copyrighted material as indicated. Unauthorized use or reproduction is prohibited.