Web Development: Cup of Joe

Having concluded a semester involving both Intermediate Computing and Design & Analysis of Algorithms, my time was spent going back to my roots as a web developer. This occurred during the winter transition from the semester of Fall 2018.

A local coffee shop, Cup of Joe, was a frequent spot of study; this fact helped contribute to successful grades. So what better way to give back by doing a redesign of the current website? A redesign which would make it mobile friendly.

Screenshot of the layout of the Cup of Joe website using a mobile display.
Mobile variant of the Story page.

The redesign entailed a rebuild of the HTML and CSS - motivated specifically to rid the site of the usage and elaborate nesting of table tags. More modern semantic tags were used instead of the table tags: an aside to note tangential information, lists to designate groupings of links, article to note groupings of paragraphs, sections to differentiate these major components, etc.

The foundation of this implementation was built upon a mobile-first design. Here, media queries would kick a certain layout into view based on window size where the initial template being considered was designed for mobile devices. This involved careful consideration towards maintaining the website's aesthetic - an aesthetic which does a good job adhering to the aesthetic of the shop proper. One key facet in accomplishing this was the decision to maintain the site's identity with the navigation bar. Instead of leveraging a hamburger button to splay navigational options, the navigation bar is fixed to the left where the size of its selections maintain a good compromise between easy interaction while not obscuring too much of the view, (regardless of view-screen size). The redesign differentiated further by fixing the navigation bar into view as a user scrolls through a given page.

Screenshot of the layout of the Cup of Joe website using a mobile display.
Mobile variant of the Story page.

In terms of layout, there were two different types of pages that the Cup of Joe website contained. The main page had a unique layout in the sense that the majority of the display emphasized on a slideshow of images from the coffee shop. The other pages consisted of textual content with an image banner and occasionally information placed as an aside. The responsive redesign would not only determine the sizes of these elements, but the location they would be drawn.


Comparison of desktop variant and tablet variant of the website. Note the repositioning of elements which emphasizes on key components which lend well to the browsing context.

Once implementing the redesign for the main page and the story page, I shared them with the proprietor of Cup of Joe. She was impressed! More importantly, I had good timing. This was due to the fact that her website was built upon a framework that was about to have its support revoked - (if I recall correctly, it involved Microsoft's Silverlight). The host of her website did not have the time to redesign and re-implement the website using some other framework.

What's been shown thus far has been static in nature. There indeed was a non-static feature in place. There was a music page which allowed the posting of related events. This had its own set of controls that the owner had access to. Thus, my initial intention of a straight-foward mobile redesign would balloon into the inclusion and implementation of a simple content management system.

Implementation of the content management system would be through a PHP back-end interacting with a MySQL database. Here, user accounts could be created, events could be posted and edited, and a new feature was provided with shop integration where products being sold could also be posted. All this control was provided through a set of pages that could be accessed using any browser. These control pages would leverage a simple bootstrap theme to allow mobile access; I was not shy to use the hamburger button in the context of using these control pages.

The public-facing pages of the Cup of Joe website were then templated using PHP and thus integrated access to the database to allow the display of events and shop links. The mobile redesign was made easier through the modularity provided through this template.

It's worth reflecting on the work done here. While looking through the archive of this website, I'm drawn to the difference between what was then called the music page and what is currently called the event page. This was a place where I decided to introduce new styling in an attempt to make the website more coherent in style. The new styling bore similarity to how the aside blurbs were displayed within the various pages, providing a more cohesive experience with respect to the aesthetic.


Comparison between the new layout of the events page (left) and the old layout from what was called the music page (right).

The result of my efforts can be viewed on the company's domain: www.cupofjoe-cedarfalls.com. It seems that events are no longer being hosted at the location, thus the events page has been removed altogether. My personal domain is hosting a live demo of the website as well. It can be viewed here.