Let’s get coding! — Designing and making the template of our site

Written by: Saajidah Gafoor

One of the most challenging and yet absolutely integral aspects of our SRP assignment is the coding of our site. This site is actually an interactive documentary, rather than a traditional website (think along the lines of Firestorm, Snowfall, and Machines For Life). Thus, our basic visual idea was to have a fixed navigation bar on the right-hand side, and full screen visual content to scroll through covering the rest of the screen. Here is one of our first mock-up designs for the site:

However, a lot has changed since this mock-up was made. Firstly, we got rid of the name BloodInteractive (and are yet to think of a new one), we’ve changed our color scheme plan to having a dark-colored navigation bar instead, and the template that I have begun to code essentially looks quite different to the image above. Here are some images of what I have made:

The background video playing in the images above is just a temporary filler for the content that we have yet to finish producing and collecting. The blurb text and title are also just filler texts, soon to be updated.

My first attempt at coding this template actually failed. I had attempted to closely follow the html structure of the Firestorm piece, and was unable to get my recreation to work. So, after that, I decided to simply write my own markup based on what I thought would work best, thus making everything easier to understand and work with. So far, I have only used HTML markup and CSS styling to code with. I have not incorporated Bootstrap into the piece, as the documentary, much like the Firestorm, Snowfall, and Machines For Life examples listed earlier, is intended to be viewed on a desktop first and foremost instead of on a mobile device. This is because of the large amount of high-quality visual content and jQuery functions used.

The plan with jQuery is to use functions from the language in order to make the site more visually dynamic. This will include fade-out effects when scrolling, and for the automatic scrolling effects themselves. I have been watching jQuery tutorial videos on Lynda.com, and hope to be able to easily and successfully incorporate such functions into my coding for the project.

CSS3 effects were used to create the dark gradient effect that is layered over the background video, and we are going to use this layer over every section’s background content for two aesthetic reasons: to make all of the background content look somewhat uniform and to help the overlaying text stand out more. Here is the CSS code that I used for it:

Current coding issues that have yet to be resolved include implementing the scroll-down button (which will use jQuery functions), and to make the site more responsive to device screen-sizes, which it is not yet. Although the site is not being made with mobile use in careful consideration, we would still like for mobile users to be able to read the text and see some of the visual content without any trouble.

So, that is essentially it for this week. We got started on the template as early as possible so as to avoid any major struggles with it right before the project is due, as coding is something that takes take and calmness to get working properly.