Freelance work done for Art For Indigenous Survival

Home Page	Sample Page

This is a non-profit organization that travels to various parts of the world to help native peoples preserve their heritage through soft sculpture. They make approximately one trip per year, and the Web site was set up to share very brief summaries of their visits and a few pictures.

Goals

Three new pages needed
Three pictures needed to be scanned
Spelling of one of the native tribes needed to be changed

Analysis / Solutions

The first entry dates 1998, and the code and site design are reminiscent of that time. The code is non-standardized. Font and center tags are frequently, but inconsistently used. In some cases, h3 and h5 tags were used instead of paragraph markers. Strangely, font tags were used for titles instead of h1 tags. There were a few paragraph nesting problems.	I brought all the code up to date, making them XHTML 1.1 compliant. I used CSS to control the formatting and removed all the layout tables. Made appropriate use of header tags. The code is now clean and the web site is consistent.
Two documents had "untitled document" for titles.	Gave the documents appropriate names
Document titles inconsistent	Adopted a standard title followed by the year format.
Some files had spaces in them. Generally this is a no-no since some of the older browsers have trouble with them.	Renamed html files to give them consistency and make it easier for the developer to match links with documents. The images could have also used this convention, but I only had time to rename those images that had spaces and capital letters in them.
No favicon file. Trivial, but it does cause 404 errors in the logs.	Favicon.ico made from eagle image
Home page navigation width	The navigation was in a 5 column, 2 row table. I needed to add two links to this table and one below it. I made the table 4x3 to make it fit inside the margins better. I had thought about making these all div tags that would automatically adjust to the browser width, but decided it would take too much time. Besides, the next step would likely include implementing a navigation system, so there was no sense in modifying the current structure.
No headers and footers on child pages	The engraved wood logo on the home page made a decent header graphic for each page. I also made it a link to the home page to give the visitor another option besides having to scroll to the bottom or click the back button to get to the home page. In the footer section, each page had a link to home and e-mail. I added the footer text from the home page, which includes a request for donations. The addition of the header and footer really help to frame the content.
Not having default pages in sub-folders allowed visitors to see the files directly.	Added default pages to the images and style folders and redirect back to home page.
Backup files were in the images folder	I created a separate backup location "below the root."

What Went Well

Since this is a static web site with only a few pages, it was very easy to download and edit. Even with a broadband connection, the wait can be quite tedious if you are doing global search and replace. Despite the inconsistencies in the content, the header markup was pretty consistent, which made those updates much easier.

Lessons Learned

One of my objectives was to keep the look and feel of the site the same (I was not hired to redesign the site). One thing the table layout made real easy to do was to create a limited width box that floated in the middle of the screen. Ideally, this can be done with the max-width attribute in CSS. Unfortunately, this CSS2 attribute is not recognized in Internet Explorer 6. I found a solution at svendtofte.com. The style to accomplish this is:

.content {

max-width:800px;

width:expression(document.body.clientWidth>800?"800px":"auto");

padding:10px 18px;

margin:auto;

}

Opera 7 and Netscape 7 (and possibly earlier versions) recognize max-width but ignore the proprietary expression attribute. However, since the expression only runs the JavaScript when the page is loaded, it will not adjust itself when the browser client is resized from wide to narrow (it does work when going from narrow to wide).

I have noticed here and in other places that IE does not always handle the padding correctly, but the effect seems difficult to reproduce.

Total Time

7 hours

Recommendations

Keywords and descriptions - some search engines still use these, so it might be useful to incorporate them at some time in the future.
Photograph problems - The previous designer had converted all the photographs to gif files. Jpeg files have better compression and quality. The other problems were in the photographs themselves. The first one was taken in a relatively dark room with an overhead light. Flash was either not used or was ineffective from that distance. The result was a very contrasty picture, especially noticeable on the faces. Perhaps more Photoshop work could have softened this effect. The second picture was backlit, making it difficult to color correct. The third picture had the subject blurred. It looks like the focus was on the artwork in the background, but I also suspect it was taken in low light with a slower shutter speed because of the motion blur on the ribbon. My guess is that the subject moved during the picture. I cannot tell if a flash was used, but it might have solved the problem. I was able to make a good amount of improvement in Photoshop.
Navigation - A left-hand navigation bar is fairly standard on modern web sites, however, the scope of this site is fairly limited, so that would not be needed unless more sections are to be added. What might help is to have previous and next links on each page, along with a home button. This would accommodate the timeline approach of the site.
Background - having the tiled background is considered old-fashioned and can make the text more difficult to read. The positive side is that it does give a rustic theme to the site, which is consistent with the message. A good compromise would be to either use a lighter image or (perhaps better) a solid in the content area, with the leather image all around it. I have set up the pages to make that kind of change easy to do in the future if desired.
Content Management - Ideally, I would like to set up web sites where the customer can make simple content changes at any time. However, since site is only updated annually, it is probably not worth the effort. If frequent changes (at least once a month) eventually become important, a blog or simple content management system might be appropriate. I did not asses what programming languages were available since this is likely to remain a static site for the time being.
Accessibility - Not a problem with this site, especially after cleaning up the code. I did add access keys to the home page links, but nothing else is needed at this point.
Favicon.ico image - I just chose the eagle image for this. It probably would be better with a less detailed icon.
Copyright disclaimer - Probably not an issue, but most sites have one in the footer of each page to remind visitors that they should not copy the content or pictures into their own works without permission.
Images folder - I noticed at the end that there was a used subfolder in the images folder. There did not appear to be any reason to have them separated out, so it would probably make development easier in the future to have these images merged in with the others.