DMDC - Danebury Metal Detecting Club

Danebury Metal Detecting Club, abbreviated to DMDC, have commissioned a website to be made to help them recruit more members and provide information about the club. The site is targetted towards individuals who may be interested in joining the club for recruitment purposes and also toward existing members, providing information about their weekly meet ups.

User experience considerations available here. Initial wireframe concepts available here

Features

- Navigation Bar

• Features on all 4 pages, the full responsive navigation bar includes links to the Home page (Index), Join Us page, Online Finds Table page and About Us page and is identical in each page to allow for easy navigation
• Navigation bar features a central DMDC logo, enhancing club identity and offering a recognisable symbol for the user. This also functions as another link back to the home page.
• Page links are positioned symmetrically, 2 on each side of the logo
• Links are concise and one word for aesthetics and ease of use
• Simple font and colour choice for clarity and accessibility

- Hero Image on each page

• Visual display to promote a positive emotional response from the user
• Helps identify the site's content and solidify the identity of the club itself
• Displays a visual of what the user can expect to come across while a member of the DMDC
• Hero image is accompanied by emotive Headline message on the main page, providing brief information about the club, embedding it in the local area
• Priority again sustained with a visible bright 'JOIN US TODAY' link to the Join page

- Online Finds Table

• Layout is mirrored from the 'About Us' page across the top
• Title identifying the page 'Online Finds Table' under the hero image
• This is included as the page isn't an expected page on a website
• Includes three most recent finds of note from members of the club, along with accompanying information: Find title, Historical date, Item description, Finder's name and Find date
• This page is designed to peak the interest of a prospective member, and also as a point for existing members to have their great finds highlighted.

- About Us Page

• Mirrors layout of the Online Finds Table across the top half of the page
• Includes meetings information, displayed through a split image 4x identical sizing, facilitating one of the high priority site goals.
• Brief club information in the centre of the page as this is the main focus. Minimal text as with the rest of the site, also contains a contact email.
• Google maps embedded at the bottom right to display the meetings location to prospective members
• This page is the main information point for users, and also fills an expected convention of a club or group website.

- Sign Up Page

• This page will allow the user to sign up to the DMDC, declaring their interest and giving the club a point of contact to send over meeting information. The user will be required to submit their name, email address and experience via text inputs.
• This page was the main project goal of the website, to provide an area for new members to sign up to the DMDC. I chose the below image specifically as it was high definition, like all other large images across the site, and also fitted the theme nicely. The image was not too busy in terms of colour or content and because the main focus was actually blurred, the metal detectorist in the grass, I felt that it would not detract from the sign up form.

- The Footer

• The footer section includes links to the relevant social media pages for the DMDC, they will open in a new tab, contain an aria-label for accessibility, as well as rel="noopener" for added security. These links will work towards the original goals of conveying club information and offering potential members extra ways to connect with the club.

Future Features

- Future Feature Idea

• A page where members could pay their membership fees online. This could also branch out to provide a site for members to order or reserve club merchandise.

  • This concept falls outside of the scope of the first iteration of the site. Both in terms of time investment and knowledge of the developer. It could feasibly be introduced a few months after first release, once members have got used to the layout and nature of the site in its current form.

• Creation of a forum / chatroom for members and prospective members

  • As with the above, this concept would require a large investment of time and outside knowledge to implement. Both ideas would be useful and relevant for a site such as this and would provide the site with more interaction from users, and could provide another stream of income for the club.

Testing

Separate testing file linked Here.

Validator Testing

HTML -

When passing through HTML validator - W3C validator there are 2 areas related to the 'join' page, namely the lack of a 'method' or 'action' value in the sign up form. This was a conscious decision to avoid any site errors or crashes when a submission was attempted. Were the site to go live, this would need amending as a first priority. This is mentioned in more detail in the testing document.

CSS -

No errors were returned when passing through the official (Jigsaw) validator

Accessibility

I confirmed the colors and fonts chosen are easy to read and accessible by running it through lighthouse in devtools.

Unfixed Bugs

Discussed on Testing page.

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master / Main Branch
  • Once the master or main branch has been selected, the page will automatically be refreshed with a detailed ribbon display to indicate the successful deployment. The live link can be found here.

Credits

Content

Instruction on how to embed a google map without using Javascript where possible was found here The icons in the footer were taken from Font Awesome Further tutorials used are detailed in the Testing page.

The footer HTML and meeting information CSS / HTML were based on those covered in the CI Love Running project.

Media

Images used are not copyright free as they need to pertain to the 'DMDC', a fictional metal detecting club created for the TV show 'The Detectorists'. I also had great difficulty locating appropriate images via copyright free sites, so had to look elsewhere.

Homepage: Hero image taken from Amazon Prime

About: Image taken from TheTVDB.com, Meeting image taken from pexels.com

Finds: Image taken from Thecustardtv.com

Find One image taken from ashmolean.org Text from same source.

Find Two image taken from etsy.com Text taken from compassrosedesign.com

Find Three image taken from vcoins.com Text taken from logicmgmt.com

Join Us: Image taken from mattiasnyberg.com