html

Designing a Custom Business Website From Scratch

For the web development class during my first semester at BCIT, we were assigned a group project to be completed over the course of the whole term. The task at hand was to create a website, the topic for which we were given free reign. At that point in time, I had no previous web development experience, aside from some simple HTML tags that I had taught myself many years ago. Still, there was no time to delay. I formed a group with four other classmates that I had met on the first day of school, eager to dive headfirst into the process of building my first website.

First we had to pick a topic. After some deliberation, we settled on my suggestion - to create a brand new website for the cafe that I was working at. The Boulevard Coffee Roasting Co., a busy locally owned coffee shop located in the heart of UBC. Our first task was to write up a proposal outlining how we were to approach building this new site. We used the café's old website as a reference point to begin identifying how we wanted our new site to be different.

www.theboulevard.ca

www.theboulevard.ca

  • Plain text takes up more than 80% of the site
  • Picture is irrelevant and does not actually show the café
  • Table based layout that is not responsive to fit multiple form factors
  • Not shown, the home url leads to a blank landing page. What is the point of this?
  • Too many links in navigation bar - many of the pages can be consolidated
  • Site looks like it has been the same since 2006
  • Content does not fill the full width of browser window, leaving empty spaces on the sides

Having done that, we embarked on crafting a more modern and streamlined solution. We decided to put graphical content at the forefront of our design. Although cliché, "a picture says a thousand words" definitely holds true. In order to entice the potential customer who ends up on our site, we couldn't bore them with a wall of text. As the de facto "creative director" of the project, I began sketching up mockups, with input from the group, that reflected my vision for a dynamic website that filled the entire browser, showcasing the custom photographs that I was going to take specifically for this project.

Early on, we decided to keep the ever-present navigation bar on the left in order to maintain easy access to all the pages of the site. I settled on the idea of a large banner photo with text overlay that would serve as the common basis for the site, lending a sense of cohesion to all the pages. The background image would be swapped out, as appropriate for each page. With the index designed, I continued to create skeletons for the rest of the pages - though they were just loose guidelines that would be changed on the fly due to technological constraints or design choices that didn't work out when actually coded.

From there, we started actually coding the website. First laying out all the structure of the html file with placeholder images and text. Then, semi-finalizing the CSS for just the homepage so that we had a template from which to work from in order to build the other pages. The web development class that we were in moved at a lightning pace, quickly getting us up to speed and comfortable with HTML5 and CSS3. We finished going through the entire textbook in a little bit over a month! This baptismal by fire, though strenuous, was completely necessary. Otherwise, I don't see how we could have developed the skills necessary to put together a website. I guess that is the beauty of studying at BCIT. It is tough going but the result of hands-on practice cannot be understated!

Another new technology that we were coming to grips with was version control through Github. When used effectively, a repository and version control works like magic, keeping each group member in synch as we collaborated on the website. However, as anyone who has used Github before knows, things do go wrong, and wow is it ever frustrating. Luckily, the majority of the group was very dedicated, we would stay after school and code for hours. Working in the same room and keeping in constant communication is an effective way to minimize merge conflicts and errors with version control.

Unfortunately, I do not have any screenshots of our site in progress. I will say, though, it was definitely hard going at first. The website was just so ugly until I picked a final colour scheme, which actually took much longer to settle on than I expected. In the end, I am quite proud of the site that we created. It is a fitting solution to the problems that we identified, and it has an unabashedly modern design. Here are a few screenshots of the final site.

What a stark difference from the old Boulevard website, huh? I encourage you to actually visit our creation here:

The Boulevard Coffee Roasting Co.

And here is the Github repository if you are interested:

Github

Play around with resizing your browser window! We put a lot of work into the responsive design, ensuring that it works both on every form factor.

With that, I will wrap up this post. I'll leave you with a gallery of some of the photos that I took for the website. I'm quite happy with how they turned out and how they look in the website. Thanks for reading and until next time!

-Sheldon