Developer - David Gray

Live webpage

Welcome to T&T Consulting.
This is a website that showcases the expertise of Engineering Consultants and offers potential clients the opportunity to review past projects, see the skillset from consultants on offer and the chance to book consultation appointments so that T&T Consulting can fulfill the customers needs.
This site is targeted towards Oil & Gas or Renewable Energy companies that manufacture turnkey projects and are looking for expertise in finding solutions to their issues. There is a section dedicated to allowing the user to get to know some of the managers and employees to give them a better overall feeling about the website.
T&T’s portfolio of projects and their extensive experience is on view through the Projects section while the site also allows potential clients to submit their details and make a request for consultation.
Thank you for visiting my project. I am always looking to improve and learn so please feel free to go to my GitHub and reach out to me with any improvements or suggestions you may have.

1. Project Goals
   1. User Goals
   2. Site Owner Goals
2. User Experience
   1. Target Audience
   2. User Requrements and Expectations
   3. User Stories
3. Design
   1. Design Choices
   2. Colour
   3. Fonts
   4. Structure
   5. Wireframes
4. Technologies Used
   1. Languages
   2. Frameworks & Tools
5. Features
6. Testing
   1. HTML Validation
   2. CSS Validation
   3. Accessibility
   4. Performance
   5. Device testing
   6. Browser compatibility
   7. Testing user stories
7. Bugs
8. Deployment
9. Credits
10. Acknowledgements

• Finding a consultancy firm that they can feel confidence in and can trust.
• See the range of skills on offer.
• Gain a view on basic company work flow.
• View the type of projects that the consultancy can offer work on.
• A contact form that allows a user to detail an issue and get in contact.
• Find the contact details and location of the head office.

• Increase the number of clients.
• Showcase the consultancy firm and its employees to build trust.
• Showcase the different parts of the engineering industry that we work in.
• Offer a way for new and existing customers to contact us through the Contact Form.
• Provide key contact information.

• Renewable Energy companies looking for consultants to work on their projects.
• Oil and Gas companies looking for consultants to work on their projects.
• Potential consultants looking for a new company to work for.

• An easy to use website that can be navigated without thinking.
• Professional layout that displays information useful to the users needs.
• Navigation menu links that work as expected.
• Social media links in the footer that work as expected.
• A layout that has no issues with accessibility.
• A contact form that will submit the information that has been input.
• Contact information and location details.

1. As a first time user i want to see what projects the business have previously worked on.
2. As a first time user i want to get to know the company principles.
3. As a first time user i want to see some of the employees that work there.
4. As a first time user i want to know where the head office is located.
5. As a first time user i want to be able to submit a form so my issue can maybe be resolved.

6. As a returning user i want to find the contact details to call for returning work.
7. As a returning user i want to find the companies social media pages.
8. As a returning user i want to know who are some of the people that may work on my project.
9. As a returning user i want to find the location of the company through the google maps.

10. As website owner i want users to gain a perpective of how the company works.
11. As website owner i want users to see what areas of engineering we can help them with.
12. As website owner i want users to see the faces of some of our employees.
13. As website owner i want users to be able to contact us.
14. As website owner i want users to be able to return to the main page should there be an error with their request.

This website was designed with the idea to promote a professional and efficient company that can work in different industries while working to the highest standard. There has been box-shading added to two pages, Meet the Team and Projects, so that these stand out.

The colors chosen were punchy and stood out in contrast of each other. The background color throughout the website resembles a white chalk that evokes thoughts of whiteboards and chalk, staples of engineering companies while it provides good contrast. The other two colors primarily used resemble steel which is a major part of each industry that we work within. The contrast between these colors with the background color is excellent.

Montserrat was used throughout the body of the website, while Roboto was used for the Navigation menu and for the headings. Montserrat lettering is said to have work, dedication, care, color, contrast, light and life, day and night which sounded very much like what T&T Consulting want to be seen as as a company. Roboto is said to have a mechanical skeleton which fitted the engineering while having natural reading rhythm which made it perfect for the heaadings and navigation menu. Sans Serif was used as a fall back should one of these fonts fail in a browser.

The website is laid out in an easy to read, easy to follow manner where the information that we want to present stands out. The index page has an image of a warm evening with renewble energy equipment that is supposed to ellicit a positive feeling from the user. The Navigation menu and Footer are used throughout each page to give the user consistency and a familiar feeling when going through each page. The website contains rour separate pages:

• A home page with a welcoming image and information about comapny work flows.
• An about us page that details company values and a section that allows to user to get familiar with some of the team.
• A projects pages that offers insight into the different areas of engineering that we offer.
• A contact us page that has a contact form, company contact information and a map that allows users to locate the office.

Index

About Us

Projects

Contact Us

• HTML
• CSS

• Git
• GitHub
• Gitpod
• Balsamiq
• Google Fonts
• Font Awesome
• Favicon

• The title states the name of the company at the top and center of the page.
• The title serves as a navigation link to the Home page as is standard convention and is expected by the user.

• The navigation menu contains links to the Home, About Us, Projects and Contact Us pages to llow the user to navigate through the website smoothly.
• The active page that the user is on will be underlined as shown in the image above.
• The hover over feature has been added which will underline the page link that the user is hovering over while the cursor changes to a pointer.

• The footer is featured on each of the four pages.
• It consists of 4 of the company social media pages, Facebook, Instagram, YouTube and Linkedin.
• User stories covered: 7

• The index page has an image of a warm evening with renewble energy equipment that is supposed to ellicit a positive and hopeful feeling from the user. With Renewable Energy being at the forefront of decision makers minds, this image is also aiming to show that we have the experience and skills to deal with any requests.

• The company slogan has been added just underneath the header so that it is always there for the user to see.

• This section has been added to give an overview of the basic work flow of the company so they have a partial idea of what to expect when we work together.
• User story covered: 10.

• Company values have been added to this page so it firmly lays out who the company is and what standards that the user can expect from us should we work together.
• User story covered: 2.

• Company employees have been shown as this can build familiarity and trust before even starting to work together. The user can put a face to a name and also see the credentials of some of the team.
• User stories covered: 3, 8, 12.

• The project section shows the company portfolio of projects and the varying industries that we can offer our expertise on. This is showcasing our skills as a company.
• User stories covered: 1, 11.

• The contact form is a way for the user to leave their details and submit a request for a consultation to see how we can help them solve their issue.
• User stories covered: 5, 13.

• This is information about the office including phone number, email address and office address
• User stories covered: 4, 6, 13.

• The google maps is embedded into the page so the user can see the location of the office and find us if necessary.
• User stories covered: 4, 9, 13.

• This page is to let the user know there has been an error in their request and the aim is to guide them back to the main website without using the browser back button.
• User stories covered 14.

The website https://validator.w3.org/ offers the W3C Markup validation Service that was used to validate the HTML of the website. The result was that there were no errors or warnings to be aware of.

Index Page

About Us Page

Projects Page

Contact Us Page

404 Error Page

The website https://jigsaw.w3.org/css-validator/ offers the W3C Jigsaw CSS validation service that was used to validate the CSS of the website. The result was that there were no errors or warnings to be aware of.

style.css

The website https://wave.webaim.org/ offers the WAVE WebAIM web accessibility evaluation tool that was used to evaluate the overall accessiblity of the website and ensure that it met the highest standards. The website passed with 0 errors.

Home

About Us

Projects

Contact Us

404 Page

Google Lighthouse, https://developers.google.com/web/tools/lighthouse, is the google chrome developer tool that was used to test the performance of the website.

Home - Desktop

Home - Mobile

About Us - Desktop

About Us - Mobile

Projects - Desktop

Projects - Mobile

Contact Us - Desktop

Contact Us - Mobile

The website was tested on the below devices:

• Apple MacBook Pro (15-inch, Mid 2012), macOS Catalina
• Apple Ipad mini 4, software wersion 15.2.1

In addition to these two devices the website was tested through the Google Chrome Developer Tools toggeling option for various different devices.

The website was tested on the following browsers:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge

1. As a first time user i want to see what projects the business have previously worked on.
2. As website owner i want users to see what areas of engineering we can help them with.

2. As a first time user i want to get to know the company principles.

3. As a first time user i want to see some of the employees that work there.
4. As a returning user i want to know who are some of the people that may work on my project.
5. As website owner i want users to see the faces of some of our employees.

4. As a first time user i want to know where the head office is located.
5. As a returning user i want to find the contact details to call for returning work.
6. As website owner i want users to be able to contact us.

4. As a first time user i want to know where the head office is located.
5. As a returning user i want to find the location of the company through the google maps.

5. As a first time user i want to be able to submit a form so my issue can maybe be resolved.
6. As website owner i want users to be able to contact us.

7. As a returning user i want to find the companies social media pages.

10. As website owner i want users to gain a perpective of how the company works.

14. As website owner i want users to be able to return to the main page should there be an error with their request.

The website was deployed using GitHub Pages by following these steps:

1. In the GitHub repository navigate to the Settings tab
2. On the left hand menu select Pages
3. For the source select Branch: master
4. After the webpage refreshes automaticaly you will se a ribbon on the top saying: "Your site is published at https://dave89gray.github.io/CI_PP1_TTC/

You can for fork the repository by following these steps:

Go to the GitHub repository Click on Fork button in upper right hand corner

In order of appearance:

• A guide on adding the company slogan on the Index page from Code Institutes Love Running
• A guide on how to set up an About Us page from W3Schools.
• A guide on how to set up an About Us page from W3Schools.
• Additional guide to setting up media queries on freecodecamp.
• How to set up 404 page was built following the description on Github Docs.
• How to set up the README file following the guide on CodeTime.

In order of appearance:

• renewable_image: Photo by BNP Paribas at Renewable energy: good for the environment – and good economics
• ceo-john_ferguson: Photo by USNews.com at USnews.com
• engineering_manager_lynne_smith: Photo by aquaArtsstudio on istockphoto
• engineer-harriet_hall: Photo by Womens Engineering Society at Womens Engineering Society
• hydrogen_image: Photo by audioundwerbung aachen at istockphoto
• oil_rig_picture: Photo by noomcpk2528 at istockphoto
• project_management_image: Photo by NicoElNino at istockphoto
• inspection_image: Photo by SeventyFour at istockphoto
• 404_image: Photo by Storyset at Freepik

• I would like to thank my mentor Mo Shami for his invaluable guidance, support and expertise. Without that i wouldn't have managed to finish what i have.
• To the fantastic support network on the Code Institute slack channel. Any time i had a doubt or a question there was someone already speaking about similar issues or had already asked the question.