Cherry Hau
Finding a way to make parts of the website consistent throughout all of the pages.
The first elements I created for my website were the menu and the footer because they would be the same across all the pages on my website. This meant that I had to find a way to synchronise them to be the same across all my files, otherwise it would quickly become extremely cumbersome if I wanted to make a change to either.
After a web development class in which we were introduced to the JavaScript innerHTML property, I decided to read more into using JavaScript. As I did not want to replace the entire HTML body, I needed a way to add my additional code to the start or end of the body tag. This turned out to be simple, by using JavaScript’s prepend or append functions to add code to the start or end of a tag, followed by a load function to get the HTML file.
Using these JavaScript functions meant that I could add a few lines of code to every webpage, and they would append the menu and footer to the webpage 1.1. This allows me to maintain a single central HTML file with the header and footer in it, and any changes would be added to all my webpages, rather than having to manually update all of them.
Now I had a plan of action, I went about creating my elements. Looking at features from my wireframe sketches 1.2, I decided I wanted a full screen menu with large buttons as I was designing mobile first. This meant that the menu would still be easily used on small-screen devices. This menu would overlay over whatever content was on the screen. To make for good user experience, I made the close menu button overlap with the open menu button, so that it could be closed again quickly if it were not intended to be opened.
I also added a few contact links, though other than an email address I do not yet have any social media pages or anything else to link. However, to make things easier for the future, I created a flex element which I could easily add more links to and have the content arrange itself.
I wanted to keep the look clean and modern with simple icons, but to reduce confusion as to what the icons meant, I added a tooltip that appeared on mouse over. As recommended for good UX, I let the user know when a link would open a new tab.
I also added my contact details again, but this time in text form. This is because especially for email links, I have found that mailto: links do not work properly with how my computer is set up. This means that to email somebody, I need to copy their email into my email client. For other users who may have this problem, or prefer this workflow, I added buttons on which the user may press to add my email and other contact details to the clipboard.
I decided to use a quick dropdown animation using a CSS clip-path to make the transition less abrupt, but to maintain good UX I made the transition time very quick. I also added a small border to the bottom of the dropdown as it transitioned, as a highlight, in one of my brand colours.
To make it very clear which item on the menu was selected, I chose to give the menu elements a bright, full-sized background colour on mouse over. This makes it very quick and clear to navigate the menu as the user does not have to look at where the cursor is precisely.
Due to the nature of the design with very large buttons, it still was very clear and easy to use on small screens. The only issues occurred on extremely short screens.
To make the menu responsive - other than having the text scale with screen width - I used a media query; I chose to remove some of the social contact links on the smallest screens, though this will almost never be a problem as screens that small below 400px height are very uncommon.
The footer is very simple, as it just contains links to other pages and contact information. It is made up of two floats, each containing an unordered list element which stack when the screen width gets too narrow.