Anlief is a leading Welsh ecological consultancy with the goal of providing high quality consultancy services that safeguard British Wildlife. This website aims to inform users of when ecological services may be required, what type of ecological services may be required and why Anlief are the best consultants for the job.
This website is targeted towards businesses and individuals that require ecological assessment for works that may go ahead - this covers a wide variety of potential clients (from large-scale vegetation management businesses to landowners wanting a large oak tree removed). This site will enable potential clients to contact Anlief to organise a survey or service. This easy to use and attractive website aims to encourage clients to reach out and enquire about ecological consultancy for their projects, and they aim to make the sometimes confusing and daunting process of asking for ecologcial guidance straight-forward and easily accessible.
As a user of Anlief's website, I want to: 1. navigate through the website and its pages easily and fluidly 2. learn where Anlief is based 3. learn more about the company and what their aims are 4. visit an attractive website for an enjoyable experience 5. learn if Anlief is a respectable company 6. learn when and why I might need a ecologist 7. be shown what ecological services Anlief provide 8. be able to easily contact an ecologist 9. see who works for Anlief and look at their credentials
- For Anlief's website a natural colour palette was selected due to the strong links between the company and nature and the outdoors. Naturally dulled colours were selected to give a more earthy feel to the website, this included shades of brown, green and grey.
- No accessibility issues were returned when passing the colour scheme through the official WebAIM
-
Font Awesome
- Social media icons were taken from Font Awesome for use in the footer. Clicking these icons will open a new tab and take a user to Anlief's corresponding social media profile. Using Font Awesome icons adds a professional styling to the footer.
-
Google Fonts Font styles were taken from the open source Google Fonts.
- The typography for Anlief's logo is font-family Satisfy. This brush script style was used as the cursive yet bold look is eyecatching and stands out from other text styles on the website.
- The typography for the body of the website is font-family Spline Sans. This font is suitable for a professional feel and fits the target audience of professional adults seeking a service. The script is well spaced and easy to read.
- Home page wireframe in desktop view
- Home page wireframe in mobile view
- Wireframe of the internal link structure of the website
-
Navigation Bar - *.html
-
Featured on all pages except for the form submission confirmation page, the full responsive navigation bar includes the logo and links to the Home page, When You'll Need Us, Meet The Team, Ecological Services, and Book Us page and is identical in each page to allow for easy navigation.
-
This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
-
-
The landing page image - index.html
-
The landing includes a photograph with text overlay to allow the user to see a quotation from a previously satisfied client.
-
This section introduces the user to Anlief with an attractive image of a natural scene to grab the users attention and give an earthy feel.
-
-
About Section - index.html
-
The about section will give the user an overview of the Anlief company and why they are considered the best Ecological Consultancy in South Wales.
-
The user will see the value of Anlief and should be encouraged to consider using Anlief for their ecological consultancy needs.
-
-
Map of Location - index.html
-
This section will show a map of where Anlief is based.
-
This section will inform users of Anlief's location and is interactive so that users can see how far their project is from Anlief's consultancy team.
-
-
The Footer -*.html
-
The footer section includes links to the relevant social media sites for Anlief. The links will open to a new tab to allow easy navigation for the user.
-
The footer is valuable to the user as it encourages them to keep connected via social media.
-
-
Legislation - legislation.html
-
This page is for clients who have come to the site unsure if they require ecological consulatation services or not. It will also act as a reminder to knowledgeable clients as to their legal ecological obligations when conducting a project.
-
This text-heavy page provides key information on the laws surrounding British wildlife and will direct users to what ecological services they require in order to avoid breaking ecological law.
-
-
Meet The Team - team.html
-
This page will give users more information about the ecologists that work at Anlief. Academic and professional information will be provided alongside a picture of the ecologist to give a more personable feel.
-
This page will allow users to check the ecologists' credentials and will confirm the legitimacy and professionalism of the consultancy.
-
-
Ecological Services - services.html
-
This page will show users the types of ecological services that Anlief can provide. A brief description of each service is given to inform the user about that service. A button below this description will take a user to the Book Us page so that once a user has identified the ecological service they require they can easily navigate to the form and immediately contact Anlief.
-
-
Book Us - form.html
-
This page will allow the user to contact Anlief to receive a quotation/further information about their project requirements. The user will be able specify what ecological service they believe they require, a brief description of the project they want to undertake and will also be able to upload files (e.g., pictures of the project site or blueprints). The user will be required to submit their full name, email address, select an ecological service, and consent to being contacted by Anlief.
-
-
Carousel of quotations on the Home page overlay
- This component would allow users to see several positive reactions to our ecology services from previous clients. This would give a user reassurance that Anlief are a professional and competent company.
- This feature hasn't yet been implemented as Bootstrap currently does not support nested carousels, and this quotation box is nested within the hero-image. Once I have an understanding of JavaScript this feature will be easier to implement as I am unable to automate the scroll behaviour to automatically scroll between the quotations.
-
Search bar in navigation
- This component would be particularly useful for clients who already know the ecological service they require and so will easily be able to search for that service to see if Anlief offer it.
- This component would additionally be useful for users to search through the website for specific laws/legislation that may be applicable to their project and ecological obligations.
- At this stage in development it is not fundamental, but if additional information was added about wildlife and ecology in the UK (e.g., list and description of British Protected Species, why they're protected and how to meet legal ecological obligations as how to not disturb these animals) then this feature would need to be implemented. Additionally, I do not currently have the skillset in JavaScript to confidently implement this feature.
-
Form submission
- Once I have learnt more about back-end development I can make Anlief's form submittable to a database by giving the form an action and method attribute.
- HTML was used as the markup language
- CSS was used for styles
- GitPod was used as a cloud based iDE
- GitHub was used to manage the Git repository
- GitHub Pages was used for deployment
- Git was used for version control
- Am I Responsive was used to generate a mockup image
- Bootstrap was used for website layout and responsive components
- Dev Tools was used for testing and responsiveness
- ResizePixel was used for resizing and cropping images
To view all testing documentation, refer to TESTING.md.
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 Main Branch, then click "Save".
- The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here.
In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone the repository:
git clone https://github.com/antonia-white/anlief-ecological-consultancy.git
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
- Text content for the 'When You'll Need Us' page was sourced from the Chartered Institute of Ecology and Environmental Management (CIEEM) and Ecology by Design
- Text content for the 'Protected Species' card on the 'Ecology Services' page was adapted from The Ecology Partnership
- Text content for the 'Vegetation' card on the 'Ecology Services' page was adapted from ECOSA
- Text content for the 'Tree' card on the 'Ecology Services' page was taken from AllAboutTrees
- Text content for the 'Ecological Impact Assessment' card on the 'Ecology Services' page was adapted from EcologyByDesign
- All other text throughout the website is self-written
- Framework for the navigation component was taken and adapted from Bootstrap
- Templates for the 'Book Us' page were taken and then adapted from Bootstrap
- Framework for the 'Meet The Team' media objects were taken and adapted from Bootstrap
- Instructions on how to implement the hero-image and cover-text was taken from a Code Institute Tutorial
- Instructions on how to embed a Google map of Anlief's location were taken from Campus WCMS
- The icons in the footer were taken from Font Awesome
- Instructions for creating a footer using bootstap were taken from MDB and adapted from information taken from a Code Institute Tutorial. This was futher formatted with information taken from Stack Overflow
- Wireframes were generated with Draw.io
- The photo used on the Home page are from the open source site Unsplash
- The images used for the headshots on the Meet The Team page were taken from the open source site Pexels
- Media images used in the Meet The Team page were cropped to size with Safeimagekit
- Media images used in the Ecological Services page were resized and cropped with ResizePixel
- The favicon image is from the open source site Favicon.io
- The responsive design mockup was generated with Am I Responsive Design
- The colour palette was generated with Coolors