smiah008

[smiah008]

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

[smiah008]

Safari Bug

One of tha main bugs in running the site in Safari was the fact that the elements would not rescale when the browser window is resized, But it would only come into effect when reloading this page, this was obviously not ideal.

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.

[smiah008]

Testing Performance

I have been exploring the different ways I can improve the performance of the site. One way was to minify the CSS files, this basically removes the unnecessary whitespace, which reduces the time it takes to load. I found that this did not make much different as the style sheet already loaded quite quickly. Load time from 2ms to 1ms.

[smiah008]

Debugging

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.

[smiah008]

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.

[smiah008]

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

[smiah008]

Modals

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.

[smiah008]

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.

[smiah008]

Responsive design

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.

[smiah008]

Compatability

Without reading up on the compatability of certain properties in CSS, I used justify-content : right, and it worked for me when using Firefox. However, looking at the site on chrome I realised after some time that justify-content with right/left values is only compatible on Firefox only.

However, the flex layout is supported in all the relevant browsers, so all I needed to change was right to flex-end

[smiah008]

Bug fix - Accessibility grid

Just a notable bug fix I stumbled upon after loosing hope for fixing it.

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.

[smiah008]

User Testing (B)

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.

[smiah008]

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

[smiah008]

User Testing (A)

The feedback gathered from the first set of user testing has been very beneficial. This an example of what I was able to do with the insight, having the an element with 2 states now means that if a touchscreen only device accesses the site, they will be able to see everything that is normally hidden by transitions and animations. This greatly improves the usability of the site for a large audience.

This was done with @media (hover).

[smiah008]

CodePen

This was a successful attempt at giving a div 3 different colours to portay the 60:30:10 ratio of primary, secondary and accent colour in a UI.