Journal 45-51: Module 4....the Thinking behind My site

Part of what made Albert Einstein the great thinker that he was stemmed from his ability to ask almost childishly simple questions that were maddeningly complex (most notably, “What is time?”)…and his ability to answer those questions. Following this example, perhaps the most fundamental question about a website for a designer is this: Why am I building this site? It seems simple, but upon further reflection, the answer may not be so much. This one question, to be answered properly, brings up numerous others to be answered first: What is the purpose for this site? Who do I want to address? Who are the main users? In this write-up, I will attempt to answer these questions and then delve into an analysis of my design for this module.

Good Hart Bible Church (GHBC) has a proud history stretching back for over a century, but until recently, there was a period where we were losing members and frankly, becoming a little dormant. About 7 years ago, however, Pastor Gary Compton came in and began reshaping this beautiful church from the inside. We are proud to say now that we have increased our average attendance by at least 300%. We are becoming very active in our community with new ministries, a Sunday school program for both adults and children and an addition to our building almost doubling its size. There still is, however a feeling in the community that GHBC is “that old church house out in Good Hart.” With this website, among other things, GHBC hopes to change that perception. Big things are happening at GHBC, it’s time we told the world about it.

The purpose of this site is to help members and potential members of GHBC to connect each other and with the Church itself, obtain information about the Church, Church related events and Ministries run out of GHBC as well as increase awareness of the new GHBC in the community. By including several forms including a contact form and a prayer request form, GHBC hopes to become more accessible to its members and the surrounding community. Also, the contact information of GHBC is readily available in the footer of every page, further extending the accessibility of GHBC to the community at large which is paramount for a successful church.

With this site, GHBC hopes to address its members, potential members and the community as a whole. GHBC believes that it is of the utmost importance to have its doors wide open to any and everyone that needs its services. While this is a well-known fact to many, it may be hard for one to contact GHBC if they do not know where to look. GHBC is not the most well known church in the area and having a website with contact information readily presented and an in-depth explanation of who we are and our beliefs is the most clear answer to these problems.

With this said, however, the main users will most likely be the members of GHBC itself and those hoping to contact us or find information for church services and events. The main demographic that I expect will use the site are people ranging from late teens to early 50's in the lower-middle to middle class. Good Hart is not very close to any major cities, and therefore users will most likely have slower connection speeds. Also, due to the economic standing of the main demographic, there will most likely be older computers and technology which means slower machines and smaller computer displays.

So now with the question of why answered, answering how the page is put together would be the logical next step: The first thing the user sees is the banner at the top of the page clearly informing the visitor where they are. Next is the navigation bar with links the user, new or returning, may find useful. To the left, there is a div with service times, a link to Google maps where the user can obtain directions to the church, links to the contact and prayer request forms as well as a link to the page about the pastor (which are still under construction). There is also the address, the phone number and an email address of the church in the footer.

As for the content, on the homepage, there is a 3-column system in place. The left column, as mentioned, has service information and other important links. The middle column is the where the most important information appears with a general welcome for new and returning users followed by pertinent information and announcements. The right column is more for human interests with a preview and link to a daily devotional, the pastor’s blog and perhaps small clips of news. The second page I built for this module is the photo gallery. Its layout is almost identical to the homepage. The banner, navigation bar, left column, footer and background image are all the same. The only change is the area where the middle and right columns would be. This area, while identical in size, has transformed into a gallery of thumbnail images. When the user clicks on an image, they see the full-size picture pop onto the screen via a JavaScript called Lightbox.

The layout of the homepage itself is very simple. Many users will most likely be older and less apt to dealing with a visually complex site (most of the congregation is in its thirties). Along with this is the contingency mentioned earlier that many users will be using slow internet connections on older machines. As a result, I designed the website to be as simple as possible. There is only one image on the homepage and it is relatively small in file-size. The rest of the content is mostly text-based, rendering the page friendly to slower machines and text-based browsers. Along with the streamlined content, I have made it so that the user does not have to scroll down the page. The two columns with information scroll independently. Because I have no solid information as to what screen sizes my user base will be using, I compiled the page with percentages rather than finite pixels. This allows for a relatively elastic site that can perform on most screen sizes. With such a simple and universal layout, I have greatly reduced the chance for confusion and frustrations.

Possibly the best result of the simple layout is that it is not overwhelming to the user upon arrival. I have seen too many sites to count that bombarded the user with navigation, too many bright colors and graphics scattered all over the place. This site is practically the opposite. There is one image on the homepage, there are relatively few links, but still enough to navigate the site efficiently and possibly most significantly, the colors do not look like I grabbed random crayons out of a box to decide the color scheme. I chose neutral earthy colors (more about this later) and an overall color scheme that is soft to the eye.

The main reason I was able to do all of this comes from the fact that I used CSS, or Cascading Style Sheets to design what I had constructed in HTML. In days past, people would build their site entirely in HTML with design attributes written in-line. This was a hassle for obvious reasons in that every time a change was made, if one wanted the site to look consistent, they had to go back in and change every single attribute that had the same property. Things could fall through the cracks very easily…and little details that look wrong can ruin a web site. Enter CSS. CSS allows for consistency across the board and it also makes it harder for one to miss small details. Fonts, indents, margins and colors on text only have to be defined once in a CSS sheet rather than all throughout a document. Something new CSS allows is that it allows the author to define line widths, which makes it that, much easier to make columns rather than the older table method. In short, CSS allows for a cleaner HTML document and changing the look of web sites faster and more consistent.

When designing a site, one must keep in mind that not all people are fortunate enough to have full function of everything it requires to fully access a web site. In the article “Understanding Disabilities When Designing a Web Site” Leona Tomlinson presents some guidelines I incorporated into my site to ensure full access. I ensured my link text was as descriptive as possible as well as made my page titles descriptive but not overly verbose. I also plan on making succinct alt text on the images once they are ready to be put into the site and titles and headlines will be descriptive. I will not be using images of text and all the text is re-sizable. My color scheme has relatively high contrast and my design will be consistent from page to page seeing as I will be incorporating a template for my site.

I also am taking into some guidelines from “User-Centered Design and Web Development” by the Society for Technical Communication (STC). The first guideline the author mentions is to make the memory load of the site as low as possible. I accomplished this by only including one image on the homepage and putting a script into the gallery that makes the images preload. I am also making information “highly accessible” with drop-down menus in the navigation bar and the quick links in the left column. This enables the user to find wanted information while not overwhelming them with links. Perhaps the most important guideline I incorporated from the STC was making the site “interesting but uncluttered.” Again, there is only one image on the homepage and the color scheme of the site stems off of the background causing the user to be drawn into the site and because I made the rest of the site is text-based and fits into 2 columns, it is uncluttered.

And now for the color scheme: as I mentioned earlier, I am going for a relaxing feel where the user can feel comfortable and at home when on the site. With only 3 colors, the user is not bombarded with a sensory overload upon entering the site and by making the major color white with complimenting shades of green, gray and brown, the site gives off a natural, organic tone. In Photoshop, I put a blur effect, a transparent white overlay and a Gaussian blur on the edges. The result is an image with muted colors and no definite ending of the image. This creates a dreamlike tone to the site causing the user to relax and feel at ease. And by using the predominant colors of the image for the color scheme on the site, I am able to create a visual intrigue causing the user to become subconsciously drawn farther into the site.