In the final stretch of the Spring 2021 semester at JMU, students from SMAD 308 and SMAD 422 joined heads to come up with a final digital product. Joining two separate skillsets, my colleagues and I had the opportunity to combine our talents that would hopefully make a product which positively impacted the community.
SMAD 422, students from the journalism concentration brought a really cool concept to the table. They decided to cover The Beerwerks Beertrail in Harrisonburg, with COVID’s impact on the breweries as a focal point. As I listened to their proposal, I was struck by my colleagues optimism about the situation. They weren’t going around and interviewing these breweries trying to get another glum COVID story. Positivity and hope seemed to take the forefront… and that drew me to the project.
In SMAD 308 we’ve been studying Bootstrap, a CSS framework which streamlines development through pre-defined CSS classes, as well as embedded Javascript and jQuery for components. Though there is a predominant technical aspect to our line of work, the user comes first. So the challenge for us was to take SMAD 422’s story, and transform it into an interactive digital project.
As I planned and researched for this project, I tried to keep usability at the forefront of my design. I combed through every single brewery’s website on the Shenandoah Beerwerks Trail. I paid close attention to what they had in common, what made others stand out, features that made me want to stay, and features that made me want to leave. Those directly influenced my choices for this site.
I’ve wanted to include this in my designs for a while… but I’m still a budding Javascript developer. And it intimidated me. So, I took a day or two teaching myself to do it and feel proud that I could incorporate it into this design. It was easier than I thought.
More importantly, I see back-to-top buttons as a modern addition to the navigational system of a site. Any time I see a website with a back-to-top button I give a sigh of relief, because it means less scrolling. It also makes for a smoother and more streamlined user experience.
As a web developer, one must be a continual student of the field. This means keeping on top of emerging design trends, as well as technologies. In the past few years, dark mode has become increasingly popular in digital products, as well as devices. Furthermore, there is research to suggest that it might have some mild health benefits by reducing eye strain under certain light conditions, and thus is less fatiguing to the user.
There is no Bootstrap component for this feature, meaning I had to hard code it. Like many things in Javascript, there's more than one way to do it. I could've even done it with a CSS media query using a property called prefers-color-scheme. However, this only works if the user changes their color mode preference in the settings of their device. I wanted to give the user full control. It is also position:absolute; so it ends up scrolling out of view when the user scrolls down, but back in as they scroll up.
This is not so much of a technical feature of the site. Instead, it's a direct implementation of results from my research. As I mentioned, I visited every single site on the Beerwerks page. I paid careful attention to what the breweries were doing on their sites, to see if I can improve upon anything. This is a content heavy site, so I decided I really needed to space things out to make everything legibile. I noticed that some of the sites on beerwerks were too cramped.