Running head: WEB DEVELOPMENT PAPER

Web Development Paper Nelson B. Brock University of Arkansas, Fayetteville

WEB DEVELOPMENT PAPER Abstract This paper provides a detailed analysis of the development of a website. The purpose of the website is to provide information about Greenwood FBC Praise Team and educate users about worship music. Personas were used to guide the development of the website. A team was used to provide feedback and guidance throughout the development of the website. The team members consisted of Tom McCone, Minister of Worship Arts at Greenwood FBC; Susie

Thompson, Praise Team member; Joanna Schoolcraft, a peer reviewer; and myself, also a Praise Team member. Other outside peer reviewers were also utilized in developing feedback. Specific questions regarding the development of the website include the following topics: usability, navigation, search engine optimization, accessibility, copyright and fair use, multimedia in web pages, and website promotion. The heuristic evaluation approach was employed in user testing. Members of the praise team were recruited for an initial user study. Results of that study prompted some revision such as renaming of a web page and addition of information. Plans are in place to use evaluators from the church congregation to analyze usability of the website during the deployment stage. The website is currently in its final development stages. Further development will be needed concerning acquisition of usable recordings to include on the Recordings page and a more complete listing of lyrics for the Lyrics page.

WEB DEVELOPMENT PAPER Web Development Paper The task of developing a website can be daunting, especially when a person has limited experience in the matter. Throughout the design of this website, I acquired a plethora of knowledge and skill in developing a comprehensive usable website. The choice of building a website for a non-profit group, Greenwood FBC Praise Team provided an opportunity to learn about the various facets involved in developing a website as well as analyzing the necessary processes. Choice of Resources

An array of resources was available during this process. Both web and print sources were used to guide me in planning and developing this website. The primary source was Prioritizing Web Usability by Nielsen and Loranger. This text provided a comprehensive guide to a wide array of web site development considerations. Other sources from the web such as usability.com, Copyright and Fair Use by Stanford University, and 508 Web Accessibility by Jim Thatcher were valuable in guiding my decisions. Lynda.com provided excellent tutorials to guide me through learning much needed skills in using Adobe Dreamweaver and other design concepts. Subject Choice and Design Team The beginning of this project demanded the choice of a group to design a website for. I chose the Greenwood First Baptist Church Praise Team of which I am a member to develop a site that would be informational and educational. We have been together as a group for about six years and have served in many venues as worship leaders for various events. We are occasionally asked about our group and its function and what music we provide. I approached our leader, Tom McCone, and asked him if we could use a website to provide information about

WEB DEVELOPMENT PAPER our group. He was delighted that someone would offer to work on this for a project. He agreed to provide his expertise as worship arts minister and act as an SME (Subject Matter Expert). According to Brown and Green (2006), an SME is an individual who is a specialist in and an authority on the content area of the product (p. 64). I also recruited another Praise Team member, Susie Thompson, to provide guidance and feedback. She is a computer operator at her job and has experience in providing feedback for different web design projects. I chose Joanna Schoolcraft to be part of my team as an outside source. She is familiar with the project requirements since she also is a graduate student taking the same web design class as me. Besides these three I also received valuable feedback from other peers enrolled in Web Design (ETEC 5373). Personas I wanted to target an age group between 14 and 64 years old. Those in this group were

those that would be most likely to look up information on our web site. I created two personas to represent the intended audience for my website (see Appendix A). The rationale for the Persona of Rhianna was to present a viewer that is seeking to be educated about the types of music that is used in worship. I wanted to develop a website in which she could learn more about the people who lead her in worship each Sunday, find a repertoire of songs that is played and sung, and have links to other sites where she can play, purchase, or view the lyrics of the songs. The rationale for the Persona of Hayden was to present a viewer who is researching possible styles and genres of music that can be incorporated into worship services. I wanted to develop a website in which he can contact Praise Team members to discuss what goes into preparing a blended style of worship service. I would also want him to be able to hear samples

WEB DEVELOPMENT PAPER of the music as he views the webpages. Mock-up of Web Site My first mock-up of my website (Appendix B) provided Jillian Young, a peer reviewer, something to look at to see the general structure of my web pages and subject matter to be presented in this site. I had mentioned that I planned to use a slightly modified generic logo banner on subsequent pages. She presented a concern that the banner needs to give enough information to show the users where they are and what the site is about for any users who enter using a deep link (Young, 2011). I believe that the banner logo that I created in Photoshop does present the user with enough visual information (people singing, piano keys graphic, and text that provides name of the group) to realize what the web site is about. Usability

Not only did I want to understand the users that would use my website, but I also wanted to know how I could build my site in a way that would be easy to use. Lynda.com defines Ease of Use as the understanding of how an individual user navigates, finds information and interacts with your Web site (Usability 101, 1:58). To find out what worked and what did not I

provided questionaires for my web team to fill out as they navigated and used the site. I looked at samples at usabilityhome.com, but could not find any questionaires that I felt comfortable with or really understood, so I created my own. Feedback from the team provided good suggestions for informational content, navigation, and welcomed praise for the logo banner graphic. Navigation Once I had established the types and names of pages that would be contained in my web site (see site map, Appendix C), I explored the possible choices of creating a navigation bar that would be used throughout the website. I started with a vertical side bar because I had experience

WEB DEVELOPMENT PAPER in coding that type of navigation tool. I created the style for the navigation bar in CSS. I was not completely satisfied with the look of it, but through user testing it proved functional. By a third generation iteration, I did change the side bar to a javascript generated top navigation bar.

A tutorial from lynda.com provided insight into creating the new horizontal navigation bar. This provided a more modern look and feel to the site. Feedback from peers as well as family proved my intuition had paid off. Search Engine Optimization I wanted people to be able to find my website so search engine optimization had to be addressed. Search Engine Watch (2011) says that Search engines are one of the primary ways that Internet users find Web sites. To optimize my web site I paid attention to how I titled each web page and what keywords I used as meta tags. I placed keywords as near the top of each web page as possible. Accessibility According to Nielsen and Loranger (2006), An accessible site is one that removes obstacles that get in peoples way; removing the obstacle overcomes the disability (p. 226). My site had potential obstacles that could limit users ability to use my site. The most obvious to me were for sight impaired and hearing impaired users. Solutions for making my site more accessible for sight-impaired users were: (1) using alt tags on all graphics and pictures, and (2) writing styles and html code to accommodate screen readers and text enlargement tools. To accommodate hearing-impaired users, a page for song lyrics would provide words to the songs that we sing and play.

WEB DEVELOPMENT PAPER Although my website will not be used in the Federal Procurement process (Thatcher,

2011), I wanted to accommodate as many users as possible with my web site. To check to see if my website passed Section 508 Accessibility I used Firefox Section 508 validation tool. Another element that I plan to add to my web site is a Skip Navigation ability. This would allow users with screen readers to navigate more quickly to the area that they are seeking without having to listen to a long list of hyperlinks to other pages. Copyright and Fair Use Since this website contains song lyrics and recordings of music, I was concerned about copyright infrigments. When I met with my SME, Tom McCone, he provided the CCV Licenses that the church purchased to cover the use of the print of lyrics and use of recorded music for services, printed material, and web sites. As of this writing, I am still debating were to place the CCV License comment on the webpage. One peer, Jillian Young, suggested that I place the copyright notice on the Lyrics page. I have chosen to place the notice in the footer of all of the pages so that there is no question that it was posted. This should put users at ease when they are viewing copyrighted material. Besides providing material that is copyrighted, I also wanted to show that the web site itself is copyrighted. Even though it is not required I opted to place the numeric entity and the full word Copyright so that if the symbol could not be translated in a certain browser at least the word would be seen (Website Protection, 2011). Writing Xhtml Code and Style Sheets I enjoyed learning more about xhtml coding and the specifics that go with it. I did not spend enough time learning many of the specific coding that may have helped me be more proficient in designing the web site. I did seem to better master placing div tags in the code.

WEB DEVELOPMENT PAPER Using Adobe Dreamweaver is becoming easier with the practice required to build this website. Some of the tools that I learned to use included: spry tools, designing a template, adding behaviors to certain page elements, and modifying styles in CSS and javascript. To check to see if the html code was correct I used the Firefox html validation tool. When the tool showed a problem it was easy to locate the line of code in question. This was very valuable feedback. I also used the Firefox CSS validation tool to locate potential problems with the style sheet coding. As of this writing there are no known coding problems as verified by the aforemention validation tools. I had success in adding behaviors to the Vocalists and Instrumentalists pages. I watched a tutorial in Lynda.com that showed how to add behaviors to pictures. I used behaviors to

manipulate the thumb nail pictures to provide a trigger to change the larger picture to the selected team members larger picture. This was completed with ease although I do need to finish the behavior of providing text to the selected pictures. Web Site Analysis and Redesign Iterations Using comments from the website mock-up and addition design ideas of my own I created a first iteration of my website (Appendix D) that provided the basic color scheme and layout that I would use. My main concerns were the navigation bar and inclusion of photos in the website. Since my site did use many photos I decreased the file sizes to allow for faster loading from the server. I still some lag time, but it is a trade off. After reading feedback from the various team and peer reviewers, I considered their comments and made more changes where I believed they were needed. One suggestion by Victoria Green was to make the footer a lighter color. She said, Although Im a huge fan of contrasting colors, I dont think the white on black works for your site. (Green, 2011). I did

WEB DEVELOPMENT PAPER change the footer to a light grey drawn from a color in the logo banner. With that and the new horizontal navigation bar, my site took on a new look (see Appendix E). Promoting My Web Site I plan to promote my web site by including a link to it on FBC Greenwoods website as

well as solicit other websites to include a link to our web site from theirs. We will also include a link in the churchs newsletter with an announcement of our new site. More Work to be Completed I still have the audio files to edit and upload. I have another person trying to create audio files, but am not sure this will be completed before the web design project is due. The Lyrics page will take time to create because of the many documents of songs that will need to be scanned or entered as text. Information also is needed to accompany photos on the Vocalists and Instrumentalists pages. Conclusion This has been quite an adventure. I wish I had put more work into reading more of the information that was offered during this course. I believe I have an eye for creativity as far as visuals, but lack organizational skills in gathering, creating, and arranging informational content. I know that it takes all of these skills to develop a highly effective website. This is why a team approach is preferable. I hope that the personas would be able to use the website when it is completed. More study will be needed to modify any deficiencies that may be discovered.

WEB DEVELOPMENT PAPER References Brock, N., (2011) Greenwood FBC Praise Team. Retrieved from http://www.comp.uark.edu/~nbb002/praiseteam.html .

10

Brown, A., & Green, T. D. (2006). The Essentials of Instructional Design. Upper Saddle River, NJ: Pearson Prentice Hall. Copyright and fair use. (2010). Stanford University Libraries. Retrieved from http://fairuse.stanford.edu/Copyright_and_Fair_Use_Overview/chapter6/6-c.html

Develop personas. (n.d.). Usability.gov. Retrieved from http://www.usability.gov/methods/analyze_current/personas.html

Lynch, P. J., & Horton, S. (2011). Web Style Guide, 3rd Edition. Retrieved from www.webstyleguide.com/wsg3/8-typography/2-characteristics-of-web.html .

Lynch, P. and Horton, S. (2011). The site development team. Web style guide. Retrieved from http://webstyleguide.com/wsg3/1-process/2-development-team.html

Lynda.com (2011). Usability 101. Retrieved from http://www.lynda.com/Web-Designtraining/webredesign-strategiesforsuccess/316-2C.html .

Nielsen, J. and Loranger, H. (2006). Prioritizing web usability. Berkeley, CA: New Riders

WEB DEVELOPMENT PAPER Thatcher, J. (2011). Web Accessibility for Section 508. Retrieved from http://www.jimthatcher.com/webcourse1.htm . Usability 101 (2011) Heuristic Testing. Retrieved from http://usabilityhome.com/FramedLi.htm?Heuristi.htm Website Protection (2011). Retrieved from http://www.benedict.com/digital/Web/WebProtect.aspx . Webstyle Guide (2011). Retrieved from www.webstyleguide.com/wsg3/8-typography/2characteristics-of-web.html.

11

WEB DEVELOPMENT PAPER Appendix A Persona #1: Rhianna Morgan is a twenty-four year old college graduate who attends First Baptist Church. She grew up in a small town in Arkansas and rarely attended church while growing up. She has recently moved into Greenwood and was recently hired as a first grade teacher at the local elementary school. She wants to deepen her faith in Christ and desires to

12

learn more about worship through music. She does not know very many Christian songs and would like to look into some of the music that is sung and played on Sunday mornings. She is an avid Internet user and spends up to four hours a day either working, surfing, or researching new material on the web. She is connected by DSL Internet connection. Persona #2: Hayden Fredrick is a forty-year old father of two teenage girls. He and his wife Debbie have been married for sixteen years. He received his bachelor degree in music at Ouachita Baptist University and a Masters of Arts in Church Music from The Southern Baptist Theological Seminary in Louisville, Kentucky. He is a music minister at a two hundred member church congregation in a medium-sized city in Arkansas. Hayden has been the Worship Arts minister for this church for about two years. He has seen slow growth in the variety of music that he offers the congregation to sing. The types of music currently being used are traditional hymns and some popular praise songs (from the 90s). Some younger people of the church recently asked if there are more contemporary and up-to-date songs that could be sung during worship. Hayden is now looking for resources of other churches that have successfully integrated a variety of styles and genres of music into their worship services. He is an intermediate user of the Internet and spends about two hours a day working with web based applications including research and email. He has high-speed cable Internet service at both work and home.

WEB DEVELOPMENT PAPER Appendix B

13

_____________________________________________________________________ Mockup of Website

WEB DEVELOPMENT PAPER

14

Home

Appendix C

Worship Arts Director

Vocalists

Instrumentalists

A/V Tech

Events

Recordings

Lyrics www.greenwoodfbc.com Photo Gallery

www.prismmusic.com

Links

www.absc.com

www.lifeway.com Contact Us www.wordmusic.com

WEB DEVELOPMENT PAPER Appendix D

15

_______________________________________________________________ Website First and Second Iterations

WEB DEVELOPMENT PAPER Appendix E

16

____________________________________________________________________ Website Third Iteration