HOSTYLE UI

https://gitlab.doc.gold.ac.uk/smiah008/pcc/

Useful trick to try out, this may fix the issue the of viewprot height when on mobile.

A very simple yet useful trick that solved this was using/setting a min-height on all the elements that used clamp() to set the size of elements. This ensured that when the Safari window is resized, the elements are redrawn or rescaled at the same time. Therefore at no point of a resize will the sizes of the element be an issue, as the clamps are working effectively.

I thought I had a bug with my tab-index with made my nav menu inaccessible by keyboard, this issue only on Firefox. After a lengthy amount of time, I realised that it was actually my own computer settings. All that needed to be done was change the setting and restart the browser.

Found an interesting take on navbar animation. This animation is for mobile view, but I can implement this into the desktop view in order to divert focus from a large navbar but also have navigation available to user who do wish to use it.

Eassy method to remove the html from the url, without having to mess with the .htaccess (which affects performance at times)

Bootstrap has proven to be very useful in allowing me to fulfil some of the features in my site, with having to write the same code myself, this saves me time so I can focus more on the quality of the rest of the code as well as the content itself. One example of this was the tooltips to display useful information for both desktop and mobile users without losing functionality on either device. Furthermore, I wanted to use a modal to emphasise some information, but instead of coding from scratch or trying to find it online, bootstrap as a very well coded class/framework for this, the main advantage being it is accessible for all devices.

Found this useful blog post that highlights the emotions that different colours can invoke. The emotions are quite accurate in my opinion, therefore I may add these to my site as example emotions.

With the use of CSS - clamp(), making the site responsive has been drastically easier. However, taking all types of devices and scenarios into consideration is where it becomes more difficult. I have found that the screen size for a regular iphone 6 is relatively small compared to more modern phones, because of this, some of the responsive behaviour tend not to work in the different scenarios for Iphone 6/7. For instance, when rotating an iphone 6 or similar size phone, the viewport width is 667px which is affected by the 720px breakpoint, however, because the viewport height is so small, part of the content cuts out.

Using a grid with 100 vh (viewport height) means that when the browser size is wide but short in height, the grid loses it's shape and content overflows, often hidden but other elements. The CSS properties min() and max() were not working with the height. So instead I set the the min-height to 100vh and the height to a standard 800px. This insures that is the browser height is tall, the grid will use 100% of the height available, but if the browser window is short in height, the grid sid will stay at 800px. This successfully stops the overflow and the hidden content.

After the testing of the colour, it was highlighted that the warm cool colours section could be improved as the colour gradient background was too overwhelming. This then led me to the decision to change it to an thick line; this still visualises the point in but in a more subtle way.

Found this great site a while back that lets you create your own gradients, and it also outputs the CSS code too.

This was done with @media (hover).