Sir Alex Ferguson History Website

Introduction

Welcome to my first project. This project is a history website based on Sir Alex Ferguson, many consider him to be the best football manager of all time. This website shows you why he is one of if not the greatest football managers of all time. You will find many stats and facts about managerial.

A live website can be found here.

Table of Contents

• 1. UX
  • 1.1. Strategy
    • Project Goals
      • User Goals:
      • User Expectations:
      • Trends of Modern Websites
      • Strategy Table
  • 1.2. Structure
  • 1.3. Skeleton
  • 1.4. Surface
• 2. Features
• 3. Technologies Used
• 4. Testing
• 5. Development Cycle
• 6. Deployment
• 7. End Product
• 8. Known Bugs
• 9. Credits

1. UX

Go to the top

As a big football and Manchester United fan, I have always seen articles on why Sir Alex Ferguson is the greatest manager ever. However, I have not come across a dedicated website to showcase his whole career.

This project will showcase statistics and facts that prove that his legacy was one of the greatest of all time.

1.1. Strategy

Go to the top

Project Goals

The main goal of this website is to show more awareness of this man. I want to teach the target audience why he is rated so highly by his peers and colleagues.

User Goals:

• First Time Visitor Goals

  • As a First Time Visitor, I want to learn about the history of this person and understand why he was rated so highly.

  • As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.

  • As a First Time Visitor, I want to look for statistics and facts to tell me why he's proven to be the greatest of all time.

• Returning Visitor Goals

  • As a Returning Visitor, I want to find information about Sir Alex Ferguson.

  • As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.

• Frequent User Goals

  • As a Frequent User, I want to check to see if there are any newly added stats and facts.

  • As a Frequent User, I want to check to see if another manager will be rated as highly.

User Expectations:

The content should prove why Sir Alex Ferguson is the greatest manager.

• The content is displayed in a clear and understanding format.
• The user interface is easy to navigate.
• The website is responsive on all devices this includes mobile, tablet and desktop.
• To have the ability to contact the creator of the website.

Trends of modern websites:

• Multimedia experiences
• Offering Audio
• Consistency of design
• Easy on the eye colour pallets
• Dark Mode

Strategy Table

Scope

As I am unable to include all of the features from the strategy table. I will phase this project in multiple phases. Phase 1 will be what I have identified as a minimum viable product. Please find below the plans I have for each phase.

Phase 1

• Add educational content
• Highlight his achievements
• Responsive design
• Increase awareness
• Contact me form
• Career history
• Testimonials

Phase 2

• Dark Mode
• Honourable mentions

1.2. Structure

Go to the top

It is really important to include responsive design in this project as many users are using different devices (mobile, tablet, laptop/PC). This gives the user the best experience on their device.

• Responsive on all devices sizes
• Navigation bar is placed on the top left of the screen and is clear and easy to use. This is also placed in the same position on every page.
• Footer at the bottom of each page that links to the social media websites.
• All elements will be consistent including font size, font family, colour scheme.

1.3. Skeleton

Go to the top

I used Balsamiq to create my wireframes as this gives the template of the UI. This also shows where all elements will be placed within the screen.

There are 2 versions of each wireframe as one shows the design on a web browser and the other shows a mobile browser format.

Wire-frames

Web browser home page

Mobile browser home page

Web browser career page

Mobile browser career page

Web browser awards page

Mobile browser awards page

Web browser gallery page

Mobile browser gallery page

Web browser gallery page

Mobile browser gallery page

1.4. Surface

Go to the top

Colours

Please find the colours schemes that I used here.

Typography

I decided to use Roboto as my font of choice with sans serf as my backup font for browsers that might not support Roboto.

2. Features

Go to the top

All pages:

• Navigation bar is placed at the top of the screen, for ease of use and consistency. It has a hover effect and changes colour to improve the user experience. The page that you have selected also highlights red so the user knows exactly which page they are on.
• Social media links, - all links are placed at the bottom of each page in the footer. All links open in a new tab.
• Logo/text - a Sir Alex Ferguson logo is also placed on the top right of each page. This gives the context that the website is about him.

Landing page:

• Main image - a large image that shows who the website is about.
• Summary - a summary of what Sir Alex achieved.
• Video - an embedded tribute video from youtube that gives the user the multimedia experience. This helps the user to be engaged with the website.

Career page:

• Overall statistics - a small bordered box that shows his managerial career stats.
• Timeline - this element shows his career in a chronological experience. Reading from the top (when he started his career) to the bottom (when he finishes his career). This section tells you which clubs he has managed and a summary of what he achieved.
• Club logos - These images add a visual to UI and improving UX as it's not just text on the page.

Testimonials page:

• Card style view - this gives the user an easy to read card view that breaks information down into small sections. The user can read from card to card.
• Card images - all images are of the same size, giving the UI consistency. This also gives the context of who the quote was from.
• Card quotes - short quotes about Sir Alex admiring him. These quotes are from players who played under him and other managers giving credit.

Gallery page:

• Collage images - these images are placed in a collage design. This allows me to place multiple sized images to the given screen size. The images show the success and happiness he had in the game.

Contact page:

• Contact form - this gives the user the ability to message me for any issues they are having with the site, any suggestions of improvement and to give their opinions on any other manager that could potentially take his place.

3. Technologies Used

Go to the top

• HTML5
  • The project uses HyperText Markup Language.
• CSS3
  • The project uses Cascading Style Sheets.
• Atom
  • The project uses Atom to code.
• Chrome
  • The project uses Chrome to debug and test the source code using HTML5.
• Balsamiq
  • Balsamiq was used to create the wireframes during the design process.
• Google Fonts
  • Google fonts were used to import the "Roboto" font into the style.css file which is used on all pages throughout the project.
• GitHub
  • GitHub was used to store the project's code after being pushed from Git.
• JS Fiddle
  • JS Fiddle was used as a playground to test all my code before committing.

4. Testing

Go to the top

Automated testing

Google Developer Tools

For every element that I added to my HTML, I would add the basic CSS to my stylesheet. I would then use the inspect element to try different styles. Once I've got it to my liking I would copy the CSS from google into my stylesheet. This allows me to keep track of the code I am using.

Responsive Tools

I used Am I Responsive to make sure that all my pages are responsive to all devices.

W3C Validator Tools

I used W3C Markup to check for any errors within my HTML pages.

I had an error on the index.html page with the iframe attribute of "frameborder". The HTML checker notified me that this attribute is obsolete and to use CSS instead.

I also had an error on the contact_us.html page with a duplicate ID of "form_inline". I rectified this by changing the ID's to a class instead and updated the CSS for this.

I used W3C CSS Validation to check for any error within my CSS stylesheet.

Manual Testing

I have tested my site on Safari and google chrome on multiple devices. I also used JS Fiddle as a playground to test all of my code before staging and committing any changes.

These include:

• iPhone X
• iPhone XS Max
• iPad Pro
• Macbook Pro

Please find below my testing process for all pages via mobile and web:

All pages:

• Navigation Bar:

  • Home - When selecting "home", the browser redirects me to the home page. The text in the navigation bar also stays highlighted in red. It worked as expected.

  • Career - When selecting "career", the browser redirects me to the career page. The text in the navigation bar also stays highlighted in red. It worked as expected.

  • Testimonials - When selecting "testimonials", the browser redirects me to the testimonials page. The text in the navigation bar also stays highlighted in red. It worked as expected.

  • Gallery - When selecting "gallery", the browser redirects me to the gallery page. The text in the navigation bar also stays highlighted in red. It worked as expected.

  • Contact - When selecting "contact", the browser redirects me to the contact page. The text in the navigation bar also stays highlighted in red. It worked as expected.

  • Text:

    • I checked that all text is in the correct and consistent size and font. I also checked that there were no typos.

  • Media:

    • I checked that all images and videos on this page load. Making sure that the video played and that all images have alt text if media does not load. It worked as expected.

  • Responsiveness

    • I checked that all pages and elements were responsive. Checking each page on mobile and website and adjusting screen size to find break points. It worked as expected.

• Footer:

  • Facebook - When selecting the Facebook icon, a new tab opens and redirects to the Facebook website. It worked as expected.
  • Twitter - When selecting the Twitter icon, a new tab opens and redirects to the Twitter website. It worked as expected.
  • YouTube - When selecting the YouTube icon, a new tab opens and redirects to the YouTube website. It worked as expected.
  • Instagram - When selecting the Instagram icon, a new tab opens and redirects to the Instagram website. It worked as expected.

Career page:

• Managerial Career Statistics:

  • Checking the statistics element is responsive on mobile and web. This worked as expected.

• Timeline:

  • I checked for consistency within the club logos for each section in the timeline.
  • Making sure the the headers and content text is consistent in size and font.
  • I also checked that the timeline is in chronological order.

Testimonials page:

• Cards view:
  • I tested the responsiveness of the cards view, making sure that the columns decreased as the screen got smaller.
  • Making sure that the images do not pixelate when the screen got smaller. It worked as expected.

Gallery page:

• Collage:
  • Testing all images respond to the screen getting smaller. The columns show a decrease if this happens. It worked as expected.
  • Hovering over each image to make sure that the hover animation is working and displaying the correct text and colours.

Contact page:

• Contact form:
  • Testing that each field of the form is required before submitting. It worked as expected.
  • Checking that the submit button works and processes the form.

5. Development Cycle

Go to the top

There were many elements I changed, re-positioned and added from my original wireframes as they were more visually appealing.

All pages:

• Replaced the Sir Alex Photo on the top right with just a text. This is visually more appealing because the text can fit inside the navigation bar.

Landing page:

• The original wireframe lacked attention from users. I added an embedded YouTube video to make the user more variety with different media elements. This video is also a short introduction to what the website is about.

Career page:

• I added a statistics panel to show the numbers Sir Alex achieved during his career.
• The original design shows the timeline is continuously on the left side of the page. I decided to change this to make the timeline appear on the centre of the page with the content displaying on the left then the right side of the page. This keeps the user engaged as the content isn't just a block of text.

Testimonials page:

• The original wireframe shows this page as an awards page with the same timeline design as the career page however, I changed this to a testimonials page. This is to give the user a better experience with a different format from the career page. As I was planning to use the same design the user would have been less engaged as they felt like they were reading the same content in the same format.
• I added in a cards view, this gives the user smaller amounts of content so it's easy to process. The image on each card also gives the context of who the quote was from.

Gallery page:

• The gallery page has remained the same. I added a hover animation over each photo to give the context of what the image is about.

Contact page:

• After coding the contact page to the original design. I thought that it looked dull, so I added other elements to make this page visually appealing to the users.
• Added google maps location
• Added icons for location, telephone number and contact email.

6. Deployment

Go to the top

I used GitHub pages to deploy my final project. To do this I had to:

1. Create a repository on GitHub.
2. Clone the repository on your chosen source code editor (Atom in my case) using the clone link.
3. Add files to Git (staging area) and use the atom commit to master button.
4. Use git within atom to push the code.
5. Go to GitHub and load your repository.
6. Select settings.
7. Select pages on the left menu bar.
8. Click on the master branch.
9. This will now generate a link with your website live.

7. End Product

Go to the top

Please fine below a screenshot of each page:

Home page UI:

Career page UI:

Testimonials page UI:

Gallery page UI:

Contact page UI:

8. Known Bugs

Go to the top

• On some mobile devices the navigation bar appears behind the content. This was rectified by adding a z-index to the CSS for the navigation bar.
• My first implementation of the navigation bar was not responsive on mobile devices, meaning that the design was floating off the screen. This was rectified by implementing a new navbar that included a hamburger style button when the screen size gets smaller.
• The form styling on some mobile devices do not match the web styles. This was rectified by adding WebKit appearance, appearance in the CSS and set the value to none.
• The video on the home page was not responsive. This was fixed by adding a height value in the CSS in smaller media queries.
• The managerial career stats section was also not responsive. This was fixed by adding a smaller font-size value to the media query of max-width 635px. This allowed the whole section to be visible on mobile devices.

9. Credits

Go to the top

Code

• The navigation bar code came from Code Pen
• The cards view on the index.html was inspired from Code Pen
• The timeline feature on the career.html and awards.html page was inspired from W3Schools
• The footer code came from the Love Running projects
• The collage design was inspired by W3Schools
• The gallery page has a hover effect on the image the code came from W3Schools
• The icons in the footer and contact page came from Font Awesome

Content

• All quotes on the index.html page came from Planet Football
• The timeline content on the career.html page came from Wikipedia
• All images came from Google Images