This site is intended to show the benefits of the lock CES UDM. It will show some unique features it has. The site also have a contact form so it will be easy to contact us and get more information about prices and other information. The site will also have an about section that will build trust towards the customers.
The target for this site is other companies such as real estate owners, schools, hospitals and other companies that have a lot of doors and on need of big and complex locking system.
Welcome to CES UDM.
Wireframing was done before the project started. Some changes has been made on the way because it looked better on different screen sizes. And it is now following the same proportions through the site.
The CES UDM page have one scrollable page with three sections: Why CES?, About and Contact. Each section is linked in the header navigation meny. There is also one more page that confirms that you have filled out the form, Contact Confirmation. The sections order is considered when deciding the visitors journey through the site. The Why CES should build an interest of the products, the About section should build some trust and finally the Contact section where the visitor can take the step to make contact if it's interesting to them.
I choosed to use Roboto on the whole site. I wanted a clean look to the text and thought that Roboto was a good choice. To give the headings some additional styling I made them all uppercase and gave them some spacing between letters.
Since CES already have a color on the logo, I used that in the color scheme of the site. Then I wanted to complement with some subtile colors and choosed a very light grey and also a dark grey color.
- A navigation bar with links to the different sections on the page. Why CES?, About and Contact Us.
- This will make it easier to navigate to preferred part of the page.
- Made the navigation bar sticky to the top so it will be easier to navigate when scrolling down.
- An image that covers the full width of the site and that is fully responsive.
- This section gives the user a feel for the quality of the locks and what high end finishes that are available.
- Three sections with a picture to each section. Shows what is unique with this lock and what safety functions there is.
- Gives the user a quick overview with short text and descriptive images.
- Here the history of the company is presented with text and three pictures of the present and today. A video from the company shows some refereces for buildings using the locks today and some stories from the company.
- The section aims to build trust towards the visitor by showing that they are developing all the time and have been around for nearly 200 years.
- One of the pictures shows the Swedish team working with CES.
- This section gives the user an easy way to contact the company and see where it's located.
- There is a form to fill out with a message to the company to show that they are interested and want to know more. The form is for educational purpuse and no email will be sent when submitting. The form has four fields to fill out which are all required.
- There is also a map helping the visitor find the company if they want to visit in person. This address is real, but it's for educational reason, and no sales are made at this address.
- The footer section shows the address, mail and phone number to the company.
- Below there is icons with links to social media pages. Those are for educational purpose and will only link to the starting page for each social media.
- There is also an icon to send an direct email to the company. This link will open the deafult email program for the visitor. This email is real and is working.
- This page validates the form input. There is no function for collectiong the data entered at this point.
- There is a link back to the index page so you don't need to use the back button in the browser. If you click the logo in the top it will also bring you back to index page.
- A working form that collects the data and sends an email to the company.
- A shop page where you can buy simple single lockings directly from the page. This would need an e-commerce platform.
- HTML - is setting the structure and the content of the website.
- CSS - providing the style for the pages.
- Gitpod - used to develop and deploy the site.
- GitHub - is used to host the site.
- Balsamiq - was used to make the wireframes.
- Tests on Safari for MacOS was made through Browserstack because I had no computer with MacOS available in the process.
- Google Chrome was used during the develpment and there is no known issues in that browser.
- The compability with Mozilla Firefox is tested through the development. No known issues in that browser.
- Microsoft Edge is also tested with no known issues.
The responsive design for mobile devices is tested with Googles Mobile Friendly Test. Manual testing is also made with Google Chrome DevTools. In DevTools I have checked that screens with width from 2560px down to 375px looks good and working properly.
The accessibility was tested using Lighthouse.
- Performance shows how the page perform in terms of loading speed.
- Acessibility shows how accessible the page are for all users.
- Best Practices shows that the site uses industry standard practices.
- SEO shows Search Engine Optimisation.
Results for CES UDM page:
The site is tested with W3C HTML Validator for the HTML and for the CSS with W3C CSS Validator. At first there were a couple of minor errors, mostly typos that were easy to fix.
Here is the results:
- Found a bug that made ul in nav not completely in the center on smaller screens. I used dev tools to found that there was a padding to the left of the ul that made the distortion. Solved the problem by just adding padding 0 to the ul.
- When doing the validation i realized i had put the script for Font Awesome below the body. The issued was fixed by moving it inside the body at the bottom instead.
- In the validating of the CSS file I found out that I had forgot to add size for the font at one place. The fix was simply to add the size in correct format.
This site is deployed using GitHub pages. This is the steps for deploying a site.
- When in the repository navigate to the Settings tab.
- Then navigate to the Pages link on the left side.
- Navigate to Source and select master/main branch and then click Save.
- When page is refreshed and the site is published successfully, a green box will show that it's finished.
Here is the link to the repository: https://github.com/spangen87/rikard-spangmyr
A copy of the repository can be made. This copy can be viewed and changed on an other account without affecting the original repository.
The steps for doing this:
- Make sure you are logged in on GitHub and then find the repository.
- On the top right there is a button called Fork.
- Press the Fork button to make a copy to your account.
This is how you make a clone of the repository:
- Click on the code tab under the repository name.
- Then click on "Code" button to the right above the files listed.
- Click on the clipboard icon to copy the URL.
- Open Git Bash in the IDE of your choice.
- Change the working directory to where you want your cloned directory.
- Type
git cloneand then paste the URL that you copied. - Press enter and clone has been finished.
- The font is picked from Google Fonts.
- The icons came from Font Awesome.
- The video is embedded from Youtube.
- The map is embedded from Google Maps.
- Some text pieces is from the original site for CES.
- Insipration to the form validating page was given from my mentor Precious Ijege and from this repository on GitHub.
- Photos are all from CES exept from the picture of the team in the about section. That foto is taken an edited by the developer Rikard Spångmyr.
- Photos were compressed using TinyPNG.
- The photos that needed editing is edited in Adobe Photoshop.
This site was made as Portfolio Project 1 for the Full Stack Software Developer education at Code Institute. I would like to thank the community and my classmates from Slack for support and also Code Institute for good learning that helped me finish this. A big thanks to my mentor Precious Ijege for helping me sorting out my thoughts and that you made me push myself until the end of this project.
I would also like to thank my colleagus Daniel and Järker at Best Las for giving me the opportunity and time neccessary to be able to do this education.
CES is a real company in Germany, and we at Best Las sell their products in Sweden. This page, or parts of it, will probably be used in some form at the company in the future.
Rikard Spångmyr, 2022