For my final project in this class, I wanted to redesign the website of New Wave Coffee in Logan Square (where I am currently enjoying a cup of coffee and editing my blog). Their current site consists only of their logo, their hours, their address, and their phone number. I felt they should have a little bit more robust website.

I began by using a new-ish CSS3 method called flexbox (that I’ve covered in previous posts here, here, and here). I found flexbox extremely easy to implement on the site, and making the site look and behave the way that I want it even easier. No more positioning, no more floats, no more clearing floats.

Using the idea of ‘cards’ that I took from Google Now on Android, I created boxes of content that could contain anything from announcements to the menu. For the aside, I wanted to feature the coffees of the day. Making the site responsive was even easy! Flexbox naturally handles re-shuffling the blocks for mobile users (with a minimum of CSS code). The only thing I found difficult was setting up the nav menus to collapse into a hamburger icon and show only when touched. But once I got the hang of how to make that work with CSS and a small bit of JavaScript and jQuery, even that seemed easy.

Overall, I’m pretty happy with the site, and how I fit it to the personality and theme of the coffee house. My plan, after holiday travels, is to approach the owners about selling them the design, and adapting it to a WordPress theme so that the site can be updated easily by the staff.