Writing a simple web app to interact with an AS7341 sensor, I initially focused on functionality. It didn't much matter how it looked until I had basic parameter input and sensor value graphing output running. But now that I've got basic functionality in place, my attention turned to the CSS stylesheet. Up until this point my only item was to make input sliders full width of the window, as that helped me fine tune parameters and considered part of functionality. Now I'll fill in the rest purely for aesthetics. I don't need it to look gorgeous, but I did want to make sure it didn't look embarrassing.

This was my first opportunity to apply what I learned from Codecademy outside of their CSS course exercises, though I did make this project easier for myself with a few design decisions. I didn't need to drastically change the layout, HTML's default top-to-bottom arrangement would suit me just fine. I'm only dealing with a single page, so there's no concern of site navigation controls. And finally, I decided not to worry overly much about creating separate mobile vs. desktop layouts: everybody gets the same thing. No media queries in my stylesheet. I intended to use this web app on my phone, so I want it to look good in portrait mode. On my desktop, I can easily resize my browser window to match the aspect ratio of phone in portrait mode. The minimalist nature of this app meant there were no additional data I could add to a desktop view anyway.

Hit target size was a concern. Parameter sliders were fine, but I was worried about the buttons selecting normalization curve. Fortunately there were no problems in practice. However, I had some trouble with my "repeat read" checkbox being too close to the "Start read" button, and I think I will eventually need to space them further apart.

This was a good start. A few lines of CSS made the page look much more pleasant to my eye. Enough that I can go back and add a few more bits of nice-to-have functionality.

Code for this project is publicly available on GitHub