http://flywheeldesign.com
Homepage
This project was a redesign of the Flywheel Design website. The old site was built primarily in Flash, with a HTML alternative site built using a WYSIWG editing program.
Flash is essentially invisible to most search engines, and the HTML version was built using images, which was not much better. Therefore, a number of specialized ‘landing ramps’ and keyword lists had been added to help search engine indexing. These had become less useful over time; search engines increasingly ignore keywords and look at the semantics of page layout to determine contextual priority. The site was also very unfriendly to handheld devices, had no provision for accessibility, and was difficult to maintain.
The redesign started from scratch, doing away with Flash, keywords, and landing ramps. The goal was a template-based, progressively enhanced, search-engine friendly site that would be accessable, standards compliant, easy to maintain, and above all, fun to use. Since the site focuses heavily on visual design, images would be key. However, by using image replacement techniques, the site could be built using simple and semantic HTML, enhanced with CSS, and then use jQuery and AJAX to make the vast image content more useable.
The design appears to be simple – a small top nav, a large image on a grid, and the site name in a watermark at the bottom of the page.
All is not at it seems though. To begin with, the background dot pattern actually overlaps parts of the design, as well as the watermark. This is done using several layers and setting the z-index so that they are actually layered on top of each other.
Also, when you move your mouse over the a grid block, three things happen – the cover image fades out of the block, a background image is revealed, and an overlay appears to indicate what kind if work it is. These are generally direct links into the portfolio.
There are also a couple of ‘Easter Eggs‘ on the page. If you mouse over the watermark for a few seconds, text will appear that describes the cover image. If you click on this area, it will re-cover the page. Inversely, if you click on the Flywheel logo at the top of the page, it will completely remove the cover.
These effects are done primarily with the CSS hover pseudo-class in various combinations, although the descriptive overlays are added using jQuery. In the case of both the cover and the background image, they are both single, large images that get called in the background of each div and positioned using CSS. This means that when the page loads, it shows the entire image all at once, rather than many pieces flowing in slowly. It also simplifies maintenance, in that we need only add a single new image.
The cover images also have a simple rotation schedule. Using PHP conditionals, we simply do the following:
if (date('w') == '0'){
echo 'image css';
$cover_alt = "amusing text";
};Translated to English, this says that if the day of the week (w) is equal to Sunday (0), than use (echo) the CSS for a certain image. Then set the text variable ($cover_alt) to a certain block of text. There are seven of these statements corresponding to the days of the week. They are in a seperate, well-commented file, so it is very simple to change which image appears on given day of the week.
Portfolio
Because of the fixed nature of the previous design, the portfolio section was very small. It did not allow detailed views of any of Flywheel’s work, and was also ‘blind’, in that the user had to click on the individual orange squares in order to see what portfolio piece would be revealed. To enhance the images, a block of descriptive text was added.
The new portfolio pages are divided into four sections, have a consistent, clear, alphabetical navigation, and use extremely large landscaped images in a scrolling window. Since the images are so large and detailed, it was felt that the work spoke for itself, and no embellishing text was needed.
The portfolio is displayed in a modal window using jqModal. This creates the effect of never leaving the home page. As a nod to the print aspects of the business, the four sections are color-themed using CMYK.
The portfolio content is built dynamically using a PHP function to parse the image names. This means that when you go to the print section, it looks in the /images/work/ directory, and when it sees a file that starts with the word ‘print’, such as print_nccu_law_school.jpg, it adds it to an array. After all such images are in the array, a while loop processes the names, assigning variables to the successively processed file names, and then using all of these variables to build a list item, which is then output to the page:
// $file is the file name: 'print_nccu_law_school.jpg'
// This replaces 'print_', leaving us with 'nccu_law_school.jpg'
$file_name = str_replace ($arg_2.'_',"",$file);
// This replaces '.jpg', leaving us with 'nccu_law_school'
$file_id = str_replace (".jpg","",$file_name);
// This replaces the underscores, leaving us with 'nccu law school'
$file_name = str_replace ("_"," ",$file_id);All of this means we can update the portfolio simply by adding an appropriately named image to the /images/work/ directory.
The content in a section is replaced using an AJAX call to the appropriate image, refreshing only the image and the navbar. Jumping to a new section changes all elements, but leaves the window. Clicking on the nav bar or below the page dismisses the window. Since the page was not reloaded, the homepage remains in the state it was when the portfolio was called.
Staff/About
The most popular section of the old site was the staff page. It featured amusing biographical information on the staff members, to include the many canine ‘staff members’ (technically unpaid interns):
This was a very well-executed section of the site, and we did not wish to lose the sense of fun. A new photo shoot produced consistent staff images, and creative alternate titles were added for humor. The page uses the jQuery Cycle plugin to rotate randomly through the staff images, which are all preloaded.
Several sections of the site have custom scrollbars. This is done using the fleXcroll javascript plugin (we have an unlimited licence). The Award and News sections use the jQuery Accordion plugin.
Overall it was a great, challenging design that allowed for a lot of flexibility in development. The build spanned several months, with some major projects interrupting the build. This turned out to be a great benefit, as it allowed for an initial build, time to consider that approach, and then an improved re-build that resulted in more streamlined and efficient coding of the project.
Joe K~
