I’ve built my first static website from scratch. A very simple two-page portfolio site for a super talented young filmmaker who specialises in rap music videos. Joel had made three videos for me, so I owed him a big favour.
I have used Sass in the project as it seems best-practise to approach web development in a very modular way. This will be critical for larger, dynamic sites, and I’m expecting to be using WordPress for most client projects. I need to get into the mindset of abstraction, of elements having a certain independence and versatility, as I’ll be using PHP to call different modules from here and there to build and populate the pages in WordPress. So each element (i.e. nav menu, footer, typography settings) is styled with its own Sass partial; these partials are then imported sequentially into a master style.scss file; this file is then compiled into a master CSS stylesheet for the browser to parse. Et voila, un site fantastique!
Sass also allows for variables, which makes for more efficient style declarations across a project, and also for using nesting which makes it easier for the developer to read and interpret his code. I had to employ a tiny bit of jQuery for FancyBox, which is a lightbox popup I’ve used to display videos when thumbnail images are clicked. All the videos on the site are being served by Vimeo. I have used Google Fonts for the typography displayed.
Getting my head around how to integrate FancyBox took a while. Other tricky bits were layout based, such as getting the <footer> to stick to the bottom of the contact page on large screens, and also to reconfigure its child elements into a different order and stack horizontally on small screen sizes. I did a lot of trial-and-error playing around with floats, clear fixes, flex box, vh units etc, especially after checking the site on IE at work and finding a mess.
There was no branding required for this project so I didn’t have to strain my nascent graphic design muscles. Even the UI itself was simply designed in the browser, which seemed the best and most efficient method to produce such a sparse site. Joel’s work has a moody, low-lit signature style and there was the temptation to try to build a very immersive, conceptual UX with all sorts of moving image backgrounds and cryptic animations, but that can wait until I have mad skills! For now, we thought it best to go for a clean, neutral, minimal aesthetic. This way Joel gets a fast, functional little shopwindow, where prospective customers can get straight to the point, see his work speaking for itself, and shoot him an email offering a six-figure position on the next Andrea Arnold movie. Lol.