Responsive & Mobile

I started with looking at the site’s responsive behavior and then checking these corrections on mobile and across browsers. Ultimately, I have things working pretty well. It’s still buggy on Safari mobile because I can’t seem to resolve the touching but not scrolling interaction for the canvas.

The CSS is a bit of a jumbled mess, but its working well and I don’t foresee me adding much on to this in terms of overall structure, so I’m deciding to let it ride. (for now!)

Some things that were really helpful:

1. I was able to easily test on mobile by following the instructions here, specifically the answer that starts with “Old question, new answer.” You can plug your phone into your computer and share it’s internet. This allowed me to access the local host site from my phone. Being able to immediately check if something was working was invaluable in letting me rapidly test and adjust. (Basically, you plug your phone in. Open System Preferences > Sharing. Enable Internet Sharing with your phone. There's a message at the top saying "Computers on your local network can access your computer at: [something different for you].local". You can now use "[something different for you].local:3000" or whatever local port you were using.
2. When working on CSS, I find it hard to track what I am targeting/not targeting in my mind. I found that adding a background-color: pink or something similar helps me get the visual reference to see if I’m having a targeting issue or if the css is written wrong.
3. When testing canvas interactions on mobile, I was really missing the ability to console log and get information, so I had to get creative. I just needed to know when touch was registering and when things were being called. I ended up quickly adding in a small square with a random color on to my canvas. If the square was present and flickering, then I knew that my touch function was being called.
4. I had been working with an 800px forced width. I really like this size and find that it can carry you through a lot of the responsive sizes with a single solution. This also helped because I only had to introduce 1 breakpoint. So everything under 800px is getting served similarly to mobile.

The biggest design question for me was how to handle the 5 book covers across the top. I thought about collapsing them down to text, limiting the user to only pick from the top rank of each list, or stacking them. What felt the most natural for me was to introduce a horizontal scroll. I liked the way this transitioned when resizing the window.

‍

Browsers

I didn’t notice too many differences between browsers, except for the buttons. I could be more explicit with some of my styling, but I didn’t find that it interfered with the overall site experience and decided to let it rest. I also ran a free test on a microsoft machine running edge through https://www.browserstack.com/. It was nice to see things working predictably!