Home -> Articles -> Website Design for Photographers
Website Design for Photographers
written by Greg Cope
So you are thinking of creating your own photography website. Be it to share photos with family and friends or to display and sell your work, creating a website can at first seem like a labor intensive process. Difficulties such as design, presentation, promotion - just to name a few - can seem daunting. While many in this situation may opt to use simple photosharing websites or hiring a professional website designer, undertaking the website design yourself can be a fantastic and rewarding experience, giving you the artistic control you'd like in order to present your photography.
This article is meant as an introduction to those wishing to design their own photography website. Many textbooks have been written on the subject of website design, and while this article may fall quite short of a textbook, I do hope to convey some general ideas in the effort to help people design and develop their own web page. Of course, a small amount of knowledge of hypertext markup language (html) is very handy. For the novice and experts alike, there are several easy to use tutorials available on the internet - such as those from W3 - to not only help you learn the language, but to also serve as a reference when you are writing your webpage. In addition, design software such as Dreamweaver, iWeb and even Photoshop can make a lot of the work that much easier.
Alternatives to designing your own web site can include photo sites such as flickr, smugmug, and webshots.
As a final introductory note, if your intention is to simply share photos with family and friends, the many alternatives available - for example online photo sharing web sites like Flickr and Smugmug - can make the process extremely simple. In addition, many of these websites can be used in a custom format to create very professional looking photography websites.
A note on Image Protection: Placing your work on the internet, be it photographs, text, or design, makes it freely available to those that see them. As a result, there will always be those who will download your work for a variety of purposes - be it to post on a blog, use in a presentation, use in a publication, or countless other reasons. How you proceed with making precautions to avoid theft is based upon your level of paranoia. For a more thorough discussion on image protection and precautions you can take as a webmaster, I refer you to my article on image protection on the internet.
Where to start
There are two requirements to begin a web site: a URL (www.yournamehere.com) and a place to put it (hosting service). Unique URL's seem difficult to come by these days, and choosing one from the few available can be tough. From a photographer's standpoint, using your full name can be more beneficial than any catchy title. It gets your name out there, and people then associate your photography with your name. In many cases, URL's and web hosting can be purchased through the same company. There are many hosting services available, and short of suggesting a few names, hosting services can run less than $3 a month, depending on the service, plan, and contract. Things to consider with regards to hosting is the amount of space you need, any server side includes (PHP, mysql, perl, ASP, etc...) that come with your site, costumer service, email accounts, and server downtime, some of which can only be determined through either reviews of the service or trying out the service yourself.
Note: A consideration in website design is deciding whether to use a 'static' or 'dynamic' design. In static design, html pages are written and designed on a per-page basis. This may not seem problematic for smaller websites. However the larger a website becomes, the more difficult static design becomes to not only maintain, but to make sitewide changes. For example, NatureFocused has over 1000 pages online, and it would be incredibly time consuming to make design changes to each of those 1000+ webpages. This is where dynamic website design comes into play. Any number of images can be displayed using a single 'scripted' webpage, the output of which is driven by a database. In this context creating a new page can be as simple as uploading a photo and creating a new database entry. It sounds simple, but all this being said I would not recommend a dynamic web design for smaller webpages, and would not recommend a dynamic website design for those with little or no knowledge of server side scripting languages (perl, asp, or php), databases (eg MySQL), and security measures (for example, preventing PHP injections). .
Organization
Web site organization can be broken down on a number of levels, however I've always found it easy to consider it as a three hierarchal level system. The first level holds the actual page design - things that visitors see (web page colors, layout, and text) as well as what visitors do not see (html and css organization) - much of the web page coding is found on this level.
The second level has to do with site organization: the organization of links from one page to the next - and back again, throughout the web site. Does the site flow well from page to page? Can a user navigate back and forth and between easily? Behind the scenes, are directories and file locations organized in a fluid fashion?
Finally the third level is how your site is organized with the rest of the web. Links to your site, through various means, are extremely important to gain attention not only through those sites linking to yours, but also in search engine rankings. These three levels are all tightly intertwined, and while together they may initially seem overwhelming, they are relatively easy to conquer. Something to consider when it comes to design: you can't please everyone. Although there are some basic rules that can be followed, don't live strictly by these rules and create a design you are happy with.
-
Second Level: The best starting point is to draw out a second level design on paper. What are your goals or intentions of your website? What (and how) do you intent on presenting? To garner ideas and address these questions, the best place to start is of course the internet. What sorts of designs are other web sites you like using? Search the web and look at designs that catch your attention. How are these web site organized? Is it easy to navigate back and forth from page to page? What aspects do you like, and also what aspects do you dislike? Use these observations to sketch out a rough flow chart as to how you would like your web site organized.
Once a rough organization is laid out, you can concentrate more specifically on the page by page site layout, the best place to start is with a main index/welcome page. This welcome page should be a portal to the rest of the web site: many of your other pages may be designed around the main page design, and it will usually be the page visitors first see. While other's may differ in their approach, I prefer to keep main pages as simple as possible, providing as many links to the rest of the site without overwhelming a visitor. Images, links that lead to other pages, and of course text describing your web site, photography, and/or yourself are all things to consider putting here. It helps to also draw a layout of how these will be organized - where the major and minor components should be, possible colors you would like to use, etc...I usually find that when I draw out a web page, the design will innevitably change as time goes on.
Templates: Website templates can be found all across the internet, and in many instances can be purchased or even downloaded for free. Template websites are a fantastic place to start in the search for a design, and can be an excellent starting point should you find a template that suits your goals and desires. Templates however, are just that: re-usable designs that have been implemented by who knows how many other websites. Something to keep in mind should you wish to create an entirely unique design.
-
First Level: Once a layout is created, its time to begin writing code. Unless you are fluent in html code however, this can appear to be a major impasse. Be it html, xhtml, php, css, javascript, if you are writing the code yourself you must be at least partially fluent in at least one or a few of these languages. The good news is that each of these is quite simple to learn. Programs such as Dreamweaver, iWeb, and even Photoshop make design even easier, writing much of the actual code for you while you add or modify the layout. Taking the steps to learning these tools should not appear daunting - even for the technically illiterate - and the internet has a wealth of resources and tutorials available to help you learn.
Some things to consider when writing html code includes using external files. For example, having css style sheets and javascript files external to the html webpage not only allows you to use these scripts and layouts in multiple webpages, but also can make subsequent design or script changes much easier and can also help pages load faster. If you intend on using thumbnails to link to images, it saves page loading time to have two image files - one being the normal size and the other your image the size of a small thumbnail: simply using a single larger image as a thumbnail (by changing its display size through html code using the width and height properties) can potentially create very long page loading times.
Photographers should also consider at this stage what sort of measures - if any - should be taken to protect your images. For example copyright symbols and/or gif overlay images. For a more thorough discussion on this topic, please see my article on image protection.
-
A note on browser compatability: Once website coding is nearly complete and the page(s) look the way you want, an important measure to consider is to test your site on various web browsers, and if possible on various operating systems. Browsers such as Safari, Internet Explorer, Firefox, Opera, and Netscape may each display a webpage in a slightly different way depending upon design. The goal is to create s design that is relatively consistent from one to the next.
-
Third Level: Settling into the grand scheme of the internet takes a long time, and getting noticed can be quite difficult. If you use an online photo storage web site such as flickr, webshots, pbase, photo.net, etc....you can link back to your web site through your profile and/or photos. In addition, if you participate in web forums, you can add a link in your profile or your signature. Ultimately the content on your site will drive traffic to it. The quality of images and text will drive links and visitors to your web site.
Search Engine Optimization (SEO)
If you want to share your web site beyond just family and friends, bringing in visitors is a difficult task. Search engine optimization can serve a vital role here. Several code and design techniques can be optimized, and while doing these will never guarantee you a number one google spot, they will help people find your web site using search engines. Search engine optimization is an enormous and constantly changing topic. Below, I provide a summary of just some small things you can do to optimize your web site
First and foremost is to understand how a web 'spyder' works - the tools which crawl through your web site looking for keywords and links to index. Of course only the designers of the spyders understand the details of how they work, but based upon their goals there are a few things we can assume. A spyder will not find a web page unless it is told where it is, either through a link to it or a direct submission to the site. Submitting your site to google and yahoo are a few of the first things that should be done, but also building links from outside is just as important. Google offers a specific webmasters website with many tips and tools to help. Content-wise, spyders are also based upon parsing an html file - the harder it is to parse, the harder time the spyder will have finding keywords, links, and ultimately indexing your site. Here, clean html code helps - while lots of flash animation and javascript may not harm your site, they may not help either. A very nice way to see how a spyder views your web site is to use a text only web browser such as Lynx. Validating your web page towards W3 guidelines helps in keeping clean code as well, as does storing css and javascript in external files. A spyder must also find keywords that relate to your site. I DO NOT recommend any black hat techniques, such as stuffing your site with keywords or placing 'invisible' text/images/forms/tables on a website - doing so can not only ruin a ranking, but can even get you removed from a search engine index entirely.
This being said there are a few things you can do. Always have a meaningful webpage title, descriptive meta tags, and most importantly include meaningful and high quality content. Rather than having links to a jpg photo, it helps to design a specific html page to display each photo, allowing you to add some text and a title describing the photo that a search engine can index. For your images, it is always good practice to use the 'alt' tag to describe the images, especially if your image is a link to another web page or image. Further, images can be named with keywords as opposed to a database type name (IMG_0030). Of course, search engine optimization is never a perfect science, but avoiding black hat techniques and optimizing content helps increase traffic.
Maintanance: Once you've finally accomplished launching you web site, your work should not be over. Websites need to be maintaine with quality images and content. You can shuffle, add, and remove the photos you put online. Should you remove pages, be sure to update links so users don't receive the dreaded 404 not found (these pages can most likely still be found via search engines, and 301 redirects are the more appropriate way to deal with page removal). Behind the scenes web counters can help give you an educated guess about what photos or pages are popular, allowing you to swap out those which are seldom visited, or give higher priority to those that are. Furthermore, even for small websites dead links (aka 404 Not Found) can become a troublesome problem. Several programs or online tools (Integrity, Xenu, W3 Link Checker) can help you sort through your web site top find dead links.
Greg Cope
Tips:
- Use external css and javascript files (allows reuse and faster page loading).
- Test your website in multiple browsers.
- Make use of page titles.
- Maintain a consistent structure throughout.
- Use alt tags for images.
- Always look to acquire links coming into your webpage, unless they are from 'black hat' sources.
- Link out to other legit websites.
- Place your url at the bottom of your signature to any forum you frequent.
- Create a custom 404 Not Found.
- Create a Sitemap.
- Provide a source of contact.
- Frequently check for 404 not founds.
- Provide text rich content (for photography-centric webpages this is easier said than done).
- 301 redirect pages you move or remove.
- Validate your webpages to W3C standards for transitional or strict markup.
- Clutter
- Uncontrollable blinking or Flashing text.
- Avoid bold, italics, or ALL CAPS for the majority of text.
- Avoid scrollable whitespace.
- Music (eats bandwidth, loads slow, not all browsers are compatible).
- Do not use scripts to try and garner attention (includes faking Referring pages).
- Avoid Spam: avoid sending out spam emails, posting spam on internet forums, etc...
- Avoid purchasing links coming in (some search engines frown on this behavior).
- Do not use black hat SEO (hidden text, etc...).
- Pop-up windows.
- Avoid publishing your email for spambots - use forms where appropriate.
- Avoid duplicating content.
- W3 Online Schools: A comprehensive web site with tutorials in HTML, css, Javascript, and other web building languages. Possibly one of the best online resources for tutorials and references.
- Google Webmaster Tools: Webmaster Tools provided by google
- Image Protection: Image Protection for Photographers.
- XML Sitemap Generator: Webmaster Sitemap generator, free for web sites with less than 500 pages.
- Google Rankings: Online tool to inspect your web page rankings in search engines with certain keywords.
- World Wide Web Consortium (W3C): Standards and tools for website markup (HTML, xHTML, css, etc...).