This week was our second group critique of the semester, this time concentrating on the Web Essay we have been writing, designing and then building. This group critique showed me some very important lessons, on how useful critiques are, but also the importance of checking your designs on multiple different devices and screen sizes. This was something I had not done and was immediately clear what issues had been caused as my website looked totally different on the screen in the class, to on my personal computer. But this was also a good thing and reinforced my belief in the importance of these critique sessions, I saw my mistakes and not only did it leave me with time to correct them but also I was able to get advice from the rest of the class, my lecturer Kyle and Hal who was also present. This guided me in looking for the solution to my issues and will definitely make my final product stronger.
This second group Critique of the semester followed much the same format as the first, we all placed links onto a Miro board. Then in turn our Lecturer opened each of the links to view our still in progress builds. As we went through each person’s work it was very interesting to see what they had done. It was even more interesting to see the designs for websites from people who had also chosen Saul Bass.
This critique was invaluable for me as it flagged up two major issues on my website: my custom typeface for my header graphics (a key part of my design) only worked correctly on my PC, and my image alignment was way off. The advice I received that there was a way to fix the custom typeface issue was invaluable, even though I was not told how to, knowing it was possible made me sure I could correct this issue and get the design I wanted. I also got advice to use CSS Grid to align my images which was again invaluable advice and left me confident I could improve my webpage and deliver a piece of work I was proud of at the final hand-in.
The graphics I had created to use as headers for each of my sections contained a typeface I had downloaded from a website offering copyright free fonts. Unfortunately, this meant is was neither a web safe typeface or one contained within the Adobe or Google Fonts library. This didn’t seem important as it was displaying perfectly on my machine and I had used it and been able to manipulate it in Illustrator and then export it as an SVG. I had then added the SVGs to my webpage as images and this had worked perfectly well, and it was displaying and responding to differing screen sizes just as I wanted.
However, as soon as the webpage was opened on my Lecturer Kyle’s Mac, attached to the class projector the issue became obvious, no “Hitchcock” typeface, replaced by a browser default. This rendered all my work on the alignment and style of the headers useless, as it looked awful and nothing lined up correctly. The default typeface bore no resemblance to the “Hitchcock” typeface I wanted to use and was in no way linked to the style of Saul Bass. See below:
I wasn’t sure what I was going to do and was very disappointed, but Hal who was present at the critique said he had faced the same issue in the past and there was a solution, he couldn’t tell me what it was just that there definitely was a way to achieve the designs I required.
I started my research online and discovered the @font-face rule that could be added to my CSS and linked to a file containing the typeface I wanted to use. Which I would simply upload to my site’s source files, hosted on GitHub. It seemed very simple set up the link in the CSS and then use it like any font-family in CSS. However while this worked fine for styling text in my HTML markup with the “Hitchcock” typeface, it made no difference to the SVG headers. Here is the guide to using the @font-face rule I used:
Source (https://www.geeksforgeeks.org/how-to-include-a-font-ttf-using-css/) Last Accessed 01/01/23
I was at a bit of a loss and actually at one point went back to Illustrator and exported the headers as JPEG images, but this lost all the responsiveness I required for my site. I decided I had to find away to get the “Hitchcock” typeface displaying on my headers no matter the machine. After some more research I found out that each SVG had its own style rules contained within its code. This is where SVGs differ massively from other common web image formats, they are displayed using code. This led to the breakthrough that solved the issue, I needed to add the @font-face rule to each SVG and then call the typeface using the font-family property both within the <style> element of the SVG. So, after adding all this code, I fired up another machine without the “Hitchcock” typeface stored locally. No joy, still the same issue, no other advice online.
I decide to research SVGs themselves and through this I found out that SVGs could be added to your webpage in different ways. The way I was using treating them simply as images was one, but another was to simply add the SVG code straight into the HTML itself using the <svg> tags. I decided to give this a go as I had tried everything else, read a lot of online guidance, followed it to the letter and I hadn’t succeeded yet, so I saw no harm in having a go at this method.
And… It worked, I was overjoyed, it worked on every machine I tried even my phone. I finally had my headers displaying as I had designed them on any machine, it was a huge relief. It did take a lot of time, research and some trial and error but finally I had my webpage displaying the headers as designed. Here is that all important SVG code in my HTML file for the webpage:
I was so pleased I hadn’t gave up and just resorted to using JPEGs or PNGs. The SVGs are so much better suited to my needs. If I’m truly honest I was proud of myself for persevering and sticking to what I knew to be the right design decision. It did take more time but I learnt a lot about how to use different typefaces, SVGs and how to do research on issues I came across. I believe this will stand me in good stead in the future as it is inevitable, problems such as this will crop up. I have also learnt the main lesson of all, the importance of testing your designs on many different machines and browsers as is humanly possible. And here is a screenshot of it working on my phone:
