The design and build of FlightLine Films' website was moreover a labor of love versus my other projects, due to my direct involvement with so many of their specialized and unique productions; I knew the scope of FlightLine Films’ work and the visual look they wanted to achieve for their online presence.
The redesign conversation started during the zenith of the Red Bull Stratos project. Since the project truly exemplified FlightLine Films' ability to deliver cost effective streaming of moving images live from space, it was important to share this visual narrative using a large number of high-resolution images. With Stratos filed under "mission accomplished", attention to the website began.
The existing website analytics scripts reported a higher than normal use of mobile devices accessing the domain’s server, so it was imperative to construct the ideal mobile responsive design to allow images to load quickly over a wireless network, resize and not suffer from pixel degradation (macro-blocking, pixelation, gradient banding, etc.).
As a rule of thumb, images should be normalized at 72 ppi (pixels per inch) for web use. However, every image is different. For example if most of your images have a skyline that graduates from dark to light (sky to horizon) the inevitable color banding issue will occur if excessive compression is applied. In simple English, color banding occurs when you take a high-res image file, which is too fat and lethargic to download quickly on the internet and run it through an image software program (Adobe Lightroom) which uses an algorithm to “dumb-down” the amount of pixels by compressing them. By compressing, we’re talking about eliminating the in-between pixels by sampling the values of the surrounding pixels and combining them into one, or striking as many as it takes to make the image smaller and download friendly. Too much compression creates that awful banding effect. When “Saving for Web” always choose a quality setting that allows the image to look its best and not necessarily the programs’ default output level. When raising the quality level produces no visible gains in image quality then retreat back to the threshold, or sweet spot that provides the lowest files size for web use. Not everyone is as persnickety as I am when it comes to image quality. Be sure to engage me on that topic, but first reserve a few hours of your day.
The resulting site is light on java script and mainly controlled through the use of clean structured CSS. The purposely designed “Zero-G” floating div arrangements over the background of planet Earth were simply enhanced using a CSS box-shadow code. In this example, the scrolling effect and box shadow provided just the right illusion and atmosphere (pun intended of course) to meet the definition of à propos, or to the purpose.
- Chris Wessling -
Box Shadow CSS Code:
#main_text {
box-shadow: 15px 15px 28px #000;
}.
Background “cover” commands in the body attributes for Earth were applied allowing auto resizing within the various browsers and screen sizes:
body {
background-attachment: fixed;
background-image: url(images/bg/index_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: #000;
}.
Visit Flightline Films
Return to Fresh Greens Main Page