The Windows Simplified website is designed to be a responsive website allowing for viewing on various types of devices. It showcases some very simple tips that can help a user look after their computer and slightly increase their efficiency while doing some basic tasks.
Image from Am I Responsive?
Windows Simplified live on GitHub Pages
- User Experience (UX)
- Design
- Technologies Used
- Deployment & Local Development
- Testing - External document here
- Credits
Windows is an operating system that is used by around 1.4 billion users according to an article written by techadvisor, which is a huge majority of desktop/laptop users.
This number has been ever increasing since the initial outbreak of COVID. However a lot of users do not know how to do much more than web browsing or using the specific software associated with their jobs because it is not taught to them. This results in them potentially taking longer to do some basic tasks such as moving a block of text from one part of a document to another. The computers themselves will usually have a shorter lifespan as the users are not aware of how to keep it well maintained.
- A list of keyboard shortcuts that will cut down time while performing some basic tasks.
- Useful tips to help maintain your system. These include;
- Using Windows features such as Windows Updates (contains a video tutorial), Task manager and Startup tasks.
- Backing up files using Physical media or cloud backup such as OneDrive
- A list of useful programs or websites that can add a user to make their life with a computer a bit easier.
- To be able to view the site on a variety of devices.
- To teach users shortcuts to help with work efficiency.
- To show users some basic computer maintenance that will increase the lifespan of their machines.
- To point users towards some software/website that will make their computing experience a bit smoother.
- I want my time using a computer to be a bit smoother.
- I want to keep my machine performing well for a longer period of time.
- I want to easily navigate the site to find the information I require.
- I want to quickly remind myself of a specific keyboard shortcut.
- I want to remind myself of the steps required to perform certain maintenance operations.
- I want to visit one of the useful websites.
I have chosen a colour scheme that is close to the 'classic' Black and green contrast of old computer screens but less of a harsh contrast. The colour palette was created using the coolers website. The main background was white.
However while in development, Lighthouse testing was showing that the way I was using the colours did not contrast well. So I adjusted the dark green to be a bit darker and the light green to be a bit brighter.
Google fonts was used for the following fonts:
- Inter is used for the headings on the site. It is a sans-serif font.
- Noto Sans is used for the body text on the site. It is a sans-serif font.
- Logos used in the 'Useful Sites and Software' were taken from their respective websites. Credits can be found here
- Hero images for index.html and 404.html, as well as the site-wide favicon were taken from Pixabay. All images modified by myself. The licence does allow modifications.
Wireframes created using Balsamiq. I originally created wireframes for both mobile and desktop versions but, after seeing how well the mobile layout transferred to desktops, I scraped them in favour of using a similar layout to the mobile frames.
The website is made up of 5 pages. The index page, Keyboard Shortcuts, Maintaining Your System, Useful Sites and Software and 404 Error pages. All pages, with the exception of the 404 error page, are accessible from a responsive navigation menu at the top right of the page. To the left of that is the site logo, which will be placed under the navigation menu on smaller screens with a media query. All pages will also contain a footer that displays copyright details, contact information, a link to the site's youtube channel and a 'back to top' link.
The index page is divided into sections. Below the Navigation is a large Hero image taking up the width of the screen. Below that is an introduction to what the site and its purpose is with an audio player at the top of it for a user to alternatively listen to the text of the page. Below that is a form that offers a signup to a newsletter.
The Keyboard Shortcuts page contains lists of shortcuts that are divided into different sections, word processing, system navigation and miscellaneous. Each shortcut will show an image of the keys with an explanation of what is achieved by using them, using a GIF to help showcase that if necessary.
The Maintaining your system page if split into a few categories. Windows updates, Task manager, Startup tasks and backing up files. Each section will be split up into sub-categories that will walk a user through, step by step, some basic maintenance tasks for their machine.
The Useful Sites and Software page contains a list of websites and software that could potentially aid a user in simplifying some tasks or allowing their system to run better, as well as some common popular pieces that have a variety of sources of information that they can use to help them further.
The 404 error page will pop up if there is a broken link clicked within the site. It will simply contain a 404 error message and a link back to the homepage.
The main thing to consider adding would be audio for all pages, not just the index page. As well as completing the implementation of the newsletter so that it actually works. (It uses a placeholder dump at the moment.)
While coding this site I have been mindful to ensure that the website is accessible and friendly. I have achieved this by:
- Using semantic HTML
- Using descriptive alt attributes on images all around the site.
- Making sure that there is sufficient colour contrast throughout the entire site.
HTML, CSS
- Balsamiq - Used to create wireframes.
- Git - For version control.
- Github - To save and store all the files of the site.
- Gitpod - To write all the HTML & CSS. Also used to write the README.
- coolers - To create a colour scheme for use across the site.
- Google Fonts - To import the fonts used on the site.
- Font Awesome - For the iconography of the site.
- OperaGX - Dev Tools to troubleshoot and test features, solve issues with responsiveness and styling.
- Am I Responsive? - To show the website image on a variety of devices.
- Lighthouse - Chrome DevTool extension that I use on my OperaGX browser.
- Audacity - A voice recording software. Used for the index.html audio clip.
- Open Broadcasting Software (OBS) - A video recording/streaming software. Used to create the video tutorial.
The site is deployed using GitHub Pages. Visit the deployed site here.
To do this I:
- Logged into my Github.
- Went to the repository for this project, windows-simplified.
- Clicked on the Settings tab.
- Clicked on Pages under the Code and Automation section.
- Set the branch to main and clicked save.
- Waited a few minutes and then refreshed the page for my deployed site link.
- Log in (or sign up) to Github.
- Go to the repository for this project, windows-simplified.
- Click the Fork button in the top right corner.
- Log in (or sign up) to GitHub.
- Go to the repository for this project, windows-simplified.
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
Click here to view details on testing and bugs
This website is a solo project created by myself.
There are a few different sites that I used to learn the required skills to develop this website. I also refer back to these when I'm unsure of certain tags.
- Code Institute - Full Stack Developer course material used to learn essentials of HTML and CSS.
- CSS-Tricks - Used to learn about flexbox and how to apply it to my own development.
- W3Schools - Used to quickly look up various tags to verify I am applying them correctly.
- Traversy Media YouTube - Watched their 'Pure CSS Hamburger Menu & Overlay' video to learn how to make a hamburger menu.
- Stack Overflow - Used to check how to change an img src based on screen size in CSS. Markdown Guide - Used to help with learning markdown syntax.
- Font Awesome - Icons used for footer icons + hamburger navigation icon.
- Code Institute - Form dump link used to show working form on index.
- Hamburger menu icon animation CSS taken from a Traversy Media YouTube video. Noted within the actual CSS itself.
- Hero image by Sathesh D on Pexels image site, used on index.
- Favicon image modified by myself. Original image by raphaelsilva on Pixabay
- 404 image modified by myself. Original image by turgut_arslan0 on Pixabay
- Icons for links.html were taken from the respective companies websites favicons.
- Opera GX - by Opera Limited
- WinRar - by Eugene Roshal
- Team Viewer - by TeamViewer AG
- Advanced System Care - by IOBit. Icon taken from software installation directory
- OneDrive - by Microsoft
- Dropbox - by Dropbox
- Gmail - By Google
- Windows Update tutorial created by myself and uploaded to a brand new YouTube channel to match the brand of the website. Made using Open Broadcasting Software(OBS).
- Audio able to be played on the index page recorded by myself using Audacity.
Kera Cudmore - Provided a README example that I read through to make sure I had all required content.
Microsoft Support Site - Used to verify that keyboard shortcuts are used on multiple Windows operating systems.
Webfx - Used to convert a hex colour to RGB for use on my hero image cover text box.
Dave Horrocks - Some fantastic tips on specificity and accessibility.
Simen Daehlin - Explaining the difference between relative and absolute file paths and why we can't always use both.
Ed Bradley - My Code Institute August 2022 cohort tutor. Provided the invaluable tip of telling me to read up on flexbox and avoid using float.
Jubril Akolade - My Code Institute course mentor that provided invaluable tips and feedback about many things.