• Introduction
• UX
• Features
• Testing
• Deployment
• References
• Acknowledgements

This website is the redesign of the existing homepage of The Choir Vorau, originally created in German. The Choir Vorau is a mixed-voice choir located in Vorau, Styria, Austria. The Vorau municipality is embedded in a culturally rich area, which attracts a lot of tourists. Vorau is especially famous for the historical abbey, where the choir organizes several concerts per year. The choir can also be heard during the regular singing rehearsals. Besides, the choir members organize other events, such as trips or singing with another choir.

You can find the website here.

The purpose of the newly designed homepage is mainly to enhance the presentation of the choir's activities. This should attract fans, tourists, and potentially new members of the Choir Vorau. In the future, the current members of the choir will also have the opportunity to see a detailed gallery of all past events and concerts.

• First-Time Visitor Goals

  • US1: As a first-time visitor, I want to easily navigate through the content of the webpage.
  • US2: As a first-time visitor, I want to visit the webpage on my mobile phone.
  • US3: As a first-time visitor, I want to see samples of the visual or audio presentation of some past concerts.

• Returning Visitor Goals

  • US4: As a returning visitor, I want to check the upcoming events.
  • US5: As a returning visitor, I want to read about the choir and its members.
  • US6: As a returning visitor, I want to easily contact the choir.
  • US7: As a returning visitor, I want to follow the choir's activities on social media.

• Frequent Visitor Goals

  • US8: As a frequent user, I want to check the new upcoming events.
  • US9: As a frequent user, I want to see new photos or media from the choir activities.

The wireframes were created using the program Balsamiq. Two versions of the webpage were considered: mobile (left) and notebook (right).

• Homepage

• About Us Page

• Gallery Page

The color pallete was changed during the development of the homepage several times. The initial color schema was chosen manually without checking the accessibility. After testing, it turned out that the colors are very poor in terms of accessibility. Therefore, new schema was selected based on the popular color pallete-generator, see here. The colors also fit to the chosen hero image of the homepage.

The accessibility of the chosen colors was tested by the tool toolness. The usage of the colors follow the advised color combinations, see the full report here.

The heading font, Raleway, was selected after searching for the best fonts in 2023, see here. The suitable body text font, Roboto, was chosen based on the blog post by Figma.

The layout of the webpage takes into account all eight user stories. Firstly, the entire webpage is designed to be responsive to ensure that the webpage is properly displayed on different devices (e.g. a mobile, a desktop). Secondly, the webpage consists of three sites, containing the common components, i.e. navigation menu and footer. This helps the user to easily navigate through the content of the webpage. Lastly, the webpage contains other components or elements which are common practice in web design, i.e. logo, hero picture, copyright notice or external links.

• Navigation Menu

  • All three webpages contain the logo and navigation menu (US1).
  • The navigation menu includes the following items (US1):
    • Home navigates the user to the homepage.
    • About Us navigates the user to the About Us Page.
    • Calendar navigates the user to the Calender Section.
    • Gallery navigates the user to the Gallery Page.
    • Get In Touch navigates the user to the Get in Touch Section.
  • The navigation menu is displayed as a hamburger on the small devices (US2).

• Footer

  • The footer is a common component of all three webpages as the navigation menu.
  • The footer contains the links to the social media (US7, US9), contact information (US6) and the copyright notice.

The Homepage consists of 4 sections including the listed features:

• Hero Section includes the name, slogan and photo of the choir. Additionally, there are two buttons Listen to Us and Join Us ,which direct the user quickly to the Calender Section (US4, US9) and Get In Touch Section(US6) respectively.

• News Banner serves for important announcements, such as upcomming concerts, new published on-line videos or concert cancellation (US8).

• Welcome Section introduces the choir briefly. An embedded YouTube video of the choir singing is included (US3).

• Calendar Section lists all upcoming concerts and singing rehearsal (US4, US8).

• Get In Touch Section includes contact form and the rehearsal location (US6).

The Gallery Page contains a selection of the photos from the concerts or other events (US3, US9).

The About Us Page introduces the choir, including its history. The page also lists the front persons (US5).

• 404 Page: The hidden 404 Page indicates the users that there is an error with their request.
• Thank You Page: The hidden Thank You Page informs the users about the successful form submission.

There are several slight differences between the original and the actual design:

• Generally, there is more text in the actual design than in the original one.
• The hamburger menu was not considered in the original design.
• Four embedded videos were not implemented for large devices due to the difficulties of changing the video sizes, i.e. difficulties with the responsiveness of iframes for embedded videos. This will be implemented with a next iteration.
• The layout of the footer was slightly modified by including more information (e.g. additional contact details)
• The layout of the Gallery Page was slightly modified.
• The content of the About Us Page was differently structured by including the History Section.

• German Language
  • As the webpage presents the choir from Austria, the German language is more relevant for the users than the English.

Generally, testing was considered during the entire development of the webpage. After implementing a feature or styling the component, the the webpage was tested. In the end, more thorough manual testing was conducted. Finally, the existing validation tools were used.

• The website was tested on various devices (mobile: iPhone8, Samsung A52; and laptop: Dell XPS13) and in various web browsers (Chroma, Safary, Firefox, and Edge). In addition, the Google Chrome DevTool was used to fill the gap with testing the website on even more screen sizes.

Following aspects were considered during the test:

• CSS

  • The W3C CSS Validation did not find any errors.

  • The final detailed reports of all three pages:

    • Homepage
    • About Us Page
    • Gallery Page
    • 404 Page
    • Thank You Page

• HTML

  • The initial validation detected several issues which were fixed, see below.

    Issue	Solution
    button tags cannot be a descendant of a tags and vice verse	button tag was removed
    duplicated class attributes	a class was removed
    div element is not allowed to be a child element of label	div was removed and the menu bar was styled differently for mobile devices
    The type attribute is unnecessary for JavaScript resources	the usage of the type attribute was checked here and removed

  • The final report did not show any errors or warnings

  • The final detailed reports of all three pages:

    • Homepage
    • About Us Page
    • Gallery Page
    • Thank You Page
    • 404 Page

• Lighthouse

  • The lighthouse report was generated using the Google Chrome DevTools in an incognito mode. The tests were run for both desktop and mobile devices.
  • The initial report indicated the low performance due to the size images. After decreasing the size of the images and converting to the webp format and compressing the images, the performance got remarkable better.
  • Mobile devices
    • Homepage
    • About Us Page
    • Gallery Page
    • Thank You Page
  • Desktop devices
    • Homepage
    • About Us Page
    • Gallery Page
    • Thank You Page

In general, the adaptation of margin and padding was often slightly changed to receive better appearance, which is, of course, very subjective to the developer. Such types of changes and the correction of typos were not considered as a bug.

The list of additional bugs/issues, which were fixed, is listed in the table below.

The site was deployed to GitHub Pages. The steps to deploy the webpage were following:

• In the GitHub repository, go to the Settings Section.
• Find the Page Category on the left hand side.
• Under the Branch Section, select the source branch from the drop-down menu (e.g. master branch).
• Click on Save Button.
• Once the master branch has been selected, the page url will be generated - this indicates the successful deployment.

The website can be viewed here.

It should be noted that during the development, the commit type was included in commit messages, following the blog post with a slight difference. The style type commit, i.e. commit -m "style:", was used for the css styling of the webpage. The changes in the code style, such as removing the comments, was considered as the refact type commit, i.e. commit -m "refact:".

The repository can also be cloned locally, the steps are following:

1. On Git
   • Go to the repository you want to clone, e.g. https://github.com/brodsa/mgv-vorau
   • You see the content of the repository, i.e. all the files are listed. On the right side at the top of the list, find the Code drop down button and click on it.
   • Copy the repository HTTPS link to the clipboard.
2. In the terminal (Note: git must be preinstalled)
   • Open the terminal and navigate, where you want to clone the repository.
   • Type git clone and insert the content from the clipboard, leading to the command git clone https://github.com/brodsa/mgv-vorau.git.
   • Once the project is cloned, you can start using the repository locally.

• HTML
• CSS
• Markdown
• JavaScript

• Content and Images were taken from the original webpage.
• Box shadow ware taken for the buttons.
• Scroll back to the top button was taken in order to be even more user-friendly and navigate through the webpage quickly.
• Responsive iframes were considered for the map in the Get In Touch Section
• Profile placeholder was taken for the missing profile pictures. The pictures should be included in a next iteration.
• Lectures of Become a coder from Czechitas helped me to refresh some concepts which were, unfortunately, not a part of the course from the Code Institute (e.g. flex, grid, favicon).
• The hero section inspired the Hero and Footer Section of the webpage.
• The events calendar inspired the Calendar section of the webpage.
• The way of presenting the information in the footer was inspired by the THRIVE Jucies nad Smoothies
• The style and structure of README were inspired by the alumni and mentors of the Code Institute: eleinebroche-dev, MattBCoding, Daisy-McG, and my mentor Gareth McGirr.

• Google Fonts was used to import the fonts into the style.css file.
• Font Awesome were used generate icons for the social media and the contact details.
• Color Pallete was used to select accessible colors.
• Clip Path Generator was used to generate the background of the Hero and Footer Section.
• Image Compressor was used to compress the images.
• Image Converter was used to convert all images in the webp format.
• Logo Creator was used to create the logo.
• Favicon was used to generate the code and files for the webpage favicon. Balsamiq was used to create the wireframes during the design process
• YouTube was used to generate the HTML code for the embedded video.
• Google Maps was used to generate the HTML code for the embedded map.
• GitHub was used to store the code and host the website.
• Gitpod is an IDE and was used to develop the website.
• Formsubmit was used for the form submission. -Mockup Generator was used to generate the mockup for README.

I would like to thank my mentor Gareth McGirr for his guidance throughout my project. I'd like to give a mention to the student Carl Murray for his time to provide me a valuable feedback. And my special thanks goes to my husband for beeing supportive during the development of the webpage.