Week 9: Style Adjustments on the Website

This week, after the demo, I realised that some style adjustments on the website were necessary. When Harry tested the mobile website on his phone, a few things went wrong. Together with the things that I noticed myself, the style issues include:

• The texts in the paragraphs are too small

• The texts in the dropdown menu are too small. Harry and Boris had difficulties clicking them with their fingers.

• The items in the dropdown menu are not distinguishable. The line height is too small and the items could be separated by lines between them.

• Some of the images on the informational pages are missing. Perhaps they are not linked correctly.

• Most of the texts on the informational pages are too long when you click on "Read more". Since the info boxes are styled as "position: fixed", you cannot scroll down and see the parts of the text and the additional buttons that are hidden behind the lower limitation of the phone screen.

• The worst problem right now is that the HERE maps were not loaded on Harry's phone. Instead, there was a black screen.

Yesterday and today, I worked on fixing these problems.

---

Paragraphs and Font Sizes

The font sizes in paragraphs, spans and on buttons were the easiest things to fix. Admittedly, after all this coding, my stylesheet, although well organised, is pretty big, which makes it hard to find and change all the different elements affected. But I managed to do it quickly. For some reason, the website on my webhosting looks different in my browser on the laptop than in my browser on the smartphone. So whenever I made a change on my computer, I also had to check what it looked like on the phone.

The special thing about the phone is that there is an additional line on top of the website where you can navigate across websites and enter URLs, which only goes away when you scroll down on your phone. This takes away some space from the viewheight of the website, and since all the sizes of the elements are measured in vh and vw on my website, it made the fonts even smaller.

---

Adjusting the Menu

For the dropdown menu, I increased the size of the menu items, but also their line height, so that they have some line spacing in between them. Now they will be easier to click. I also put some borders on the bottom of each menu item so that they are more distinguishable:

---

Information Texts and Images

I shortened the texts and fixed the links to the images today. Four web pages on my site were affected: Nature, Culture, Evening and Doing. For each recommended item on the text, I first opened the info box on my phone and checked if the text was too long. I was particularly interested in whether the image was correctly loaded, since, of course, the very first item in the list that Harry had wanted to view had not been loaded. I ended up shortening almost all the texts, but wrote down the missing pictures individually. The reason why some pictures were not loaded, as I found out, was that all were jpg files but in some, the "JPG" was written in capital letters or as "jpeg", which had not been a problem on the localhost but turned out to be one on the actual web server.

---

Fixing the HERE Maps and QR Codes

The most difficult problem awaiting me consisted of the black HERE Maps. I just did not understand why they were black sometimes instead of showing the map, even on my computer, but especially on the phones of the people who tried to use them. I knew that a lot of research was ahead of me, but at first, I texted my boyfriend because I thought that he might have an idea or give me an impulse on how to start my search. After all, he had helped me understand how the HERE Maps API worked in the first place.

The great thing about asking for help is that surprisingly good things can come from it. Although my boyfriend did not know the reason why the map worked on my phone and did not on everyone else's devices, he said that sometimes an API like this might work on a http site but not on an https site. That was a really good hint, since my site was a https site. When you scanned the QR code, you ended up on https://myenschede.werecat-design.com. But I had always tested our website on my phone by entering myenschede.werecat-design.com into my browser (by default http).

HTTPS vs HTTP:

When I found out that this was indeed the reason why people could not use the map, I got very excited and worried at once. Excited because I knew that it would be easy to fix this problem and I did not have to invest many hours in the search for a solution any longer. Worried because we had already printed the QR codes for the https version of the site. And we had to colour in the QR codes with black for them to be recognised, which was very time-consuming and had already been started by Marijke.

Throwback: Last week, I created the QR codes on https://www.qrcode-generator.de/. I don't think I wrote about this here on the blog yet. The QR codes I created look as follows (in order of their appearance in front of the letters):

So I signed in at https://www.qrcode-generator.de/ again and checked if the related URL could be adjusted after already creating the QR codes. I did not really believe in it, but I wanted to try everything before telling my team the sad news that we had to make new QR codes. To my great luck, I was indeed able to change the associated URLs. The problem is solved! I downloaded a QR code scanner to my phone, and scanning the QR codes and accessing the http site worked.