MS1 Project - Rapier Marketing

Rapier Marketing Home page displayed on different devices.
Created using Amiresponsive. Please see Technologies Used for details.

Table of Contents

• Overview
• UX
• Design
• Features
• Testing
• Technologies Used
• Deployment
• Credits
• Acknowledgements
• Support

Overview

This is the first Milestone Project for the Full Stack Web Development Diploma from Code Institute.

This website is a real-life client project for Clive Pearson of Rapier Marketing Services. Clive is a marketing consultant specialising in SMEs and micro businesses.

This website has been built using the knowledge gained from the HTML, CSS and User Centric Design modules of Code Institute's FullStack Web Development course.

The live version of the website can be found here.

Rapier Marketing planning.html page displayed on different devices.
Created using Amiresponsive. Please see Technologies Used for details.

Rapier Marketing tactics.html page displayed on different devices.
Created using Amiresponsive. Please see Technologies Used for details.

Rapier Marketing contact.html page displayed on different devices.
Created using Amiresponsive. Please see Technologies Used for details.

Return to Table of Contents

UX

1. Strategy

To ensure the UX is simple and user-friendly, by providing easy navigation through all pages on the site.

User stories

Visitor Goals

• As a website visitor, I want to easily understand the main purpose of the website and learn more about the organisation.

• As a website visitor, I want to be able to easily navigate through the site to find content.

• As a website visitor, I want to be able to view the website clearly on any mobile device.

• As a website visitor, I want to know what services are provided by the organisation.

• As a website visitor, I would like to see examples of previous projects undertaken by the organisation.

Client Goals

• To have a more visually pleasing website than the current version https://rapiergroup.co.uk/.

• To minimise the risk of information overload, by condensing the text into a more readable layout.

• The website must represent the client and their business in a professional manner. No visual gimmicks or massive menus.

2. Scope

• To create a fluid and responsive layout for ease of use on common devices.

• To fine-tune and implement the skills I have learnt so far on my course.

3. Structure

I designed this website to create a more modern and eye-catching version of the original website. See above for link to original website. The original website was built by Clive Pearson using a Wordpress template. My version of the website utilises modern internet protocols to create a more aethetically pleasing experience for the user.

4. Skeleton

• Wireframes - please see below in the Design section.

• Fixed footer for the purpose of a strong and constantly present Call To Action.

• Home page, Planning page, Tactics page, Contact page.

5. Surface

Please see Design section below.

Return to Table of Contents

Design

Colour Scheme

Rapier Marketing Services is named after the owner's father, Ray Pearson. Ray is a Chelsea Pensioner and so the colour scheme of the website has been chosen to relect the colours of the Chelsea Pensioner uniform. Clive also specified that he wanted to keep the blue colour #2F5596 of his existing logo. I used Coolors to create a pallette that I thought would work well with the professional look required by the client.

I used EightShapes Contrast Grid to test the foreground and background colour combinations for minimum contrast compliance.

Typography

The website uses two fonts throughout. The headers throughout the website are using the Cabin font while the main text is using the Raleway font. Both fonts are from Google Fonts. The fonts were chosen for their simplicity and because I am aware that sans serif fonts are better for dyslexic readers. My information about choosing an accessible font came from this article at Bdadyslexia.

Imagery

Brand is important to Rapier Marketing and I wanted to ensure consistency throughout the site. The hero images have are all of tall buildings or skyscrapers because I wanted to convey a feeling of 'reaching for the sky' and I like the sense of corporate ambition that skyscrapers represent.

The images in the Past Projects Gallery have been provided by the client. I would have preferred certainly the bottom row of corporate literature and brochures to be higher resolution, but unfortunately they had to be converted from pdfs and I couldn't make them any better quality. I used Adobe PDF Convertor to convert the pdfs.

The images in the Testimonials section were taken from Linkedin with the kind permission of their owners.

The images on the Contact page have all been taken from Clive's personal Facebook.

Wireframes

Index.html - Wireframe created with Balsamiq. Please see Technologies Used for details.

Planning.html - Wireframe created with Balsamiq. Please see Technologies Used for details.

Tactics.html - Wireframe created with Balsamiq. Please see Technologies Used for details.

Contact.html - Wireframe created with Balsamiq. Please see Technologies Used for details.

Differences to Design

• In the original design, there were two buttons over the hero image on the home page that were meant to link to either further down the page, or to take you to a different page. I realised that adding these buttons was not going to enhance the navigation of the site, but rather confuse it.

• I added colour to the wireframes in order to show them to the client. Having seen the wireframes, the client requested that his blue colour #2F5596 be used, that he wanted more white space and that I was not to use too much red in the scheme because he feels it can be seen negatively and convey the wrong message. This is why in the finished version of the website, the What We Do and Testimonial boxes on the home page are now all blue.

• There are random icons on the wireframe images too because I was discussing which ones to use with the client and I forgot to remove them before I took the screenshots.

• On the advice of my mentor, I made the text boxes over the top of the hero images lighter and with a solid background because there was not enough contrast.

• There is a gold colour on the wireframes that I was going to use as part of the colour scheme, but I changed my mind because gold is not a colour you often see on corporate websites.

• My mentor came up with the idea of putting the images onto the contact page. It was rather emptpy before and the decision to add the images has certainly enhanced the page. The three images do not appear below 1025 pixels wide.

Limitations

Due to no JavaScript functionality, apart from the Back-To-Top button as outlined in the Features section, the contact form will not store data or send emails. I did make the form go to the Code Institute formdump, but I removed it because my mentor said it wasn't an elegant way of doing it and it takes the visitor away from the website with no way of returning to it.

Return to Table of Contents

Features

• This is a four page website: Home, Planning, Tactics and Contact.

• Each page has a site navigation bar at the top.

• The logo in the top left of each page will also take you back to the home page.

• Each page has a sticky footer with the contact details and social media icons for Rapier. I felt that a sticky footer was a strong and always present call-to-action.

• The home page has three sections: What We Do which briefly explains what the company does. Past Projects which showcases some of the company's previous work. The images in this section are clickable and will open in a new tab. Testimonials which has three testimonials from people the company has worked with in the past.

• The home page has a Back-to-Top button because I felt it needed to for functionality. The page is quite long and a mouse user would have to do quite a lot of scrolls to get back to the top of the page. I could have made the navigation bar sticky, but I didn't want to have both the header and footer be sticky. Alternatively, I could have put the navigation in the footer, but I didn't want the footer to be too big.

Responsive features

• The Past Projects gallery will go into two columns and then one column on smaller screens.
• The What We Do and Testimonials sections will stack on top of each other on smaller screens.
• The table on the Tactics page will shrink on smaller screens and will go into one long list at less than 600px.
• The Contact page will stack into a column on smaller screens and the images will disappear.

Features Left to Implement

In the future I would like to find a way to make this into a concertina dropdown for each heading instead of a big long list, but I was concerned about how long it would take to get it to work properly, especially being limited to HTML and CSS.

Return to Table of Contents

Testing

Functionality Testing

I used Mozilla Web Developer Tools and Chrome Developer Tools throughout the project for testing and solving problems with responsiveness and style issues.

Compatibility Testing

The site has been tested across multiple virtual devices and browsers using developer tools. Browser testing on Safari, Edge, Firefox and Chrome.

The site has been tested across multiple non-virtual devices, including iPhone 8 and iPad Mini 2.

Performance testing

All pages pass through Google Lighthouse with no major concerns, except for the empty values in the aria-required labels on the form fields. These have been changed to aria-required="true".

Accessibility Testing

Accessibility testing using WebAim Wave - Web Acessibility Evaluation Tool

Code Validation

Testing has been carried out using the following web services:

HTML on all pages validated using The W3C Markup Validation Service CSS validated using The W3C CSS Validation Service

Code Validation Issues

When validating the tactics.html page, an issue was revealed in that you cannot have a h3 element as a descendant of a th element. Therefore I had to remove the h3 element and I have restyled th.Rtable-cell to mimic a h3 element.

Peer Code Review

At the suggestion of my mentor I submitted my code for Peer Code Review in the Code Institute Slack channel. Please see the names of the reviewers below in Acknowledgements.

The results were:

• A bug on the 404 page whereby the Rapier Group text in the top left of the page does not link back to the home page - Fixed.
• A suggestion to left-align the text in the list container on planning.html, so that the bullets aren't floating separately to the text - Fixed and it looks so much better now.
• Consider adding more space below the table on tactics.html as it was slightly overlapped by the footer element - Fixed.

User Testing

Visitor Goals

As a website visitor, I want to easily understand the main purpose of the website and learn more about the organisation.

The name of the business and what the company does is evident on the home page. The different sections on the home page provide more opportunity to learn about the organisation.

As a website visitor, I want to be able to easily navigate through the site to find content.

Each page has a navigation bar at the top allowing the user to navigate between the pages. Since the home page is longer than the others, a back-to-top button has been included to allow the user to quickly get back to the top of the page where the navigation bar is.

As a website visitor, I want to be able to view the website clearly on any mobile device.

The website is responsive at different screen widths. For a description of the responsive features, please see Features.

As a website visitor, I want to know what services are provided by the organisation.

The Planning and Tactics pages provide information about the services provided by Rapier Marketing.

As a website visitor, I would like to see examples of previous projects undertaken by the organisation.

The Past Projects and Testimonials sections on the home page provide information about what the organisation has previously undertaken.

Client Goals

To have a more visually pleasing website than the current version https://rapiergroup.co.uk/.

The client agrees that this is a far more modern and aesthetically pleasing version of their website.

To minimise the risk of information overload, by condensing the text into a more readable layout.

The copy has been subtly changed and rewritten in order to flow better and be less repetitive.

The website must represent the client and their business in a professional manner. No visual gimmicks or massive menus.

The website is professional, it looks good. There are no flashy or unneccessary visuals.

Client Feedback

Having presented the website to the client, Clive Pearson of Rapier Marketing, I have listed below all of the feedback he gave me. I have indicated where I have changed something based on this feedback. All other feedback will be implemented when I eventually deploy the website to Wordpress. I will not be doing this until I have sought permission from Code Institute to do so.

• The first paragraph on the home page seems unbalanced. There should either be more text to make the two lines seem more equal in length, or less text so that it only goes over one line.

• He will provide new and more recent testimonials.

• He dislikes the background colour of the text box over the hero images.

• Look at the spacing in the boxes containing quotes. The one on planning.html only has "Packard" on the last line and it looks a bit strange.

• The list box on planning.html - try left aligning the text - Fixed (also came up in peer code review feedback).

• Tactics.html - he would prefer the last line of the text "It is what we do!" to be on a separate line for better impact.

• Can I make the phone number dial when you click on it? - Fixed.

• Use Clive's personal Linkedin account instead of the Rapier one because he doesn't post anything on it. - Fixed.

• He will give me some different images for the gallery and also write some more descriptive captions for the images.

Return to Table of Contents

Technologies Used

• HTML - This project uses HTML as the main language used to complete the structure of the website.

• CSS - This project uses custom written CSS to style the website.

• Font Awesome - Font awesome Icons are used for the What We Do information boxes on the home page and the social media links contained in the Footer section of the website.

• Google Fonts - Google fonts are used throughout the project to import the Libre Baskerville and Cabin fonts.

• Google Chrome Developer Tools - Google Chrome's built in developer tools are used to inspect page elements and help debug issues with the site layout and test different CSS styles.

• Firefox Developer Tools - Firefox Developer Tools have been used throughout the projects for testing and debugging code.

• balsamiq Wireframes - This was used to create wireframes for 'The Skeleton Plane' stage of UX design.

• MS PAINT - For cropping and resizing images.

• Favicon - Favicon.io was used to make the site favicon.

• AmIReponsive - This was used to make the multi device mockup in the README.

• Adobe PDF Convertor - to convert the pdfs in the image gallery to jpg.

• TinyPNG - Used for all images to cut back the size of .png files.

Return to Table of Contents

Deployment

GitPod was used to write all code in this repository and pushed via Git to GitHub.

Using Git Hub Pages

• Navigate to the gitHub Repository:
• Click the 'Settings' Tab.
• Scroll down to the GitHub Pages heading.
• Click the Save button.
• Click the link to go to the live deployed page.

Run Locally

• Navigate to the GitHub Repository:
• Click the Code drop down menu.
• Either Download the ZIP file, unpackage locally and open with IDE (This route ends here) OR Copy Git URL from the HTTPS dialogue box.
• Open your developement editor of choice and open a terminal window in a directory of your choice.
• Use the 'git clone' command in terminal followed by the copied git URL.
• A clone of the project will be created locally on your machine.

Return to Table of Contents

Credits

Media

• Brand Logo and Favicon from Canva canva.com
• Home page image from Pixabay pixabay.com
• The other two hero images are from Pexels pexels.com
• All other images have been provided by the client.

Content

• All text on the site is adapted from the original website.

  https://rapiergroup.co.uk/

Code Snippets

• Parallax scrolling code from W3Schools https://www.w3schools.com/howto/howto_css_parallax.asp

• Responsive image gallery, adapted from code at W3Schools https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive

• Responsive table, adapted from code related to this article at CSS Tricks https://css-tricks.com/accessible-simple-responsive-tables/

• Form styling, from code at W3Schools https://www.w3schools.com/css/css_form.asp

• The code for the Back To Top button on index.html was copied from W3Schools https://www.w3schools.com/howto/howto_js_scroll_to_top.asp - the idea for the Back To Top button was given to me by fellow student Helena Johansson. Please see below in the Acknowledgements section.

Readme

• I would like to mention the other readme examples I used to help me create the structure of my own readme:
  • John Doyle
  • Patrik Österljung
  • Marcin Kli

Return to Table of Contents

Acknowledgements

I would like to thank:

• My mentor Adegbenga Adeye for his enthusiasm, support, knowledge and excellent suggestions.

• The members of my Retro Hackathon team for their encouragement and advice during my first project: Andrew Dempsey, Helena Johansson, John Doyle, Patrik Österljung, Yorick van den Hurk.

• Jo at Code Institute tutor support for advising me about my broken image gallery 15/09/21.

• Andrew Dempsey (again!) and Nick Chapman in the Code Institute Slack channel for peer reviewing my code.

• Last but not least, Clive Pearson for allowing me to rebuild his website in the first place and for spending the time to review what I have built in order to give me comprehensive feedback.

Return to Table of Contents

Support

If you require any help or assistance you may contact me on

[email protected]