Redesign of the Website of St. George's Church in Maplewood, NJ

I first launched the website for my home parish, St. George's in Maplewood, in March 2001. Nearly four years later, in late 2004, I completely redesigned it for St. George's centennial year in 2005. Since then I've created a number of other websites, and greatly expanded my knowledge of CSS and JavaScript as well as my skills in web design. I've also grown more skilled with my digital SLR camera and built up a photo library of literally thousands of digital photos of St. George's ministries -- many taken by me, as well as some taken by other parishioners. "A picture's worth a thousand words," and I knew that if I could find a way to incorporate these photos into the website design, it would be more effective than any mission statement at conveying what St. George's is all about. So last winter, I began thinking about a new website design that would do that.

The problem was, I wanted to be able to show as many photos as possible, as large as possible, but without giving up valuable "real estate" on the site that was needed for text. Then one day a friend directed me to the website of St. Olaf College to see her daughter in a video of the choir. That's where I got the idea to use photos cropped as long panoramics in the header of each page.

(Click on image to enlarge)

The two white arrows at the top right of each page can be used to scroll through the header photos. The main page has over 30 header photos representing all the ministries of St. George's. Each sub page has two or more photos representing that particular ministry. In the few cases where relevant photos weren't available, generic photos of St. George's grounds and stained glass windows were used.

New header photos can be added very easily, thus keeping the website fresh with minimal effort.

(Click on image to enlarge)

I hand-coded an original template using HTML, CSS and Javascript which was used to create all 24 pages on the site. Some technical considerations taken into account in the design:

• The website can be displayed on even the oldest, smallest monitors without horizontal scroll bars -- the gray space on either side will simply grow or shrink to fit the screen dimensions.

• All links to email addresses are encrypted using JavaScript so they can't be harvested for spam. On computers where JavaScript is disabled, emails will be spelled out as text ("parish-office AT stgeorges-maplewood DOT org").
  

• The website is search engine optimized by the appropriate use of header tags and by putting the most important content at the top of each file.

• The use of CSS (Cascading Style Sheets), and include files for repeating code such as menus and footers, allows design changes to be made to the entire site by changing just one or two files, rather than having to modify every single HTML file.