January 24, 2012
One hour of video is uploaded to Youtube every second. That’s kinda hard to comprehend, so some smartypants over there put together a slick website to illustrate just how big that number really is. And the whole site is done with CSS and HTML animations and svg elements – no Flash! If anyone can track down who the illustrators are, I’d love to know. Really well done.
0 comments
April 21, 2009
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.
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.
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~
6 comments
April 15, 2009
This was a redesign of the existing Inspire Pharmaceuticals website. The previous site had existed without major changes since 2002. Navigation was handled in Flash, all pages were flat HTML files, and there was no directory structure – almost all of the 400+ files were in the root directory.
The Inspire website in 2009. Three Flash elements on the home page, including the navigation.
After reviewing user testing reports that Inspire provided, Flywheel developed a cleaner, more flexible design that would allow for growth over time, and would automate a large number of functions that were currently manual, such as updating News and Financial Reports headlines. (Currently hosted offsite)
The first step in building the site was determining the best maintenance solution for the client. In this case, there was a hard requirement that all text-based pages be editable in Dreamweaver. This ruled out a Content Management Solution, which would have been our first instinct. There was some concern about the compatability of Dreamweaver with PHP templates, however after some testing, we found that it would actually work very well – Dreamweaver ignores the PHP code, leaving the editor only a simple HTML page to mark up.
The content broke down to two inner page templates (two column) and a homepage (three column). All shared the alternating color bands of grey, blue, white, blue, grey. There’s also a very subtle grey gradient at the bottom of the header and the bottom of the content area. It creates the illusion that the header is light grey, even though the gradient only goes up 29 pixels from the bottom of the header. In addition, the main sections of the site each have a subtle color theme – ‘About’ is blue/green, ‘R&D’ is grey/blue, etc…
The new Inspire home page.
The next step was to organize the directory structure of the site. This would allow for easy self-detecting navigation, as well as making maintenance easier. Flywheel and Inspire had spent a good deal of time in the early part of the project refining a new site map with just this kind of structure, and it served as an excellent guide, with the addition of several other purely functional directories, such as /css/, /images/, etc…
The actual build went fairly quickly, with the background divided into seven color band divs, and the templates breaking down cleanly into a header, navigation, and footer. All images in the header (Logo, nav) using the Gilder/Levin image replacement technique. This allows excellent readability by search engines. PHP was used for the navigation detection, section color settings, the calendar application, and for the pipeline application. It also calls the header image based on the page name/directory.
The Pipeline Chart.
The Pipeline Chart is a highlight of the site – most pharmaceutical companies have a drug pipeline chart, but they are usually static images. We were challenged to make it interactive, but we also wanted to automate it in some way. The result was a simple set of tables (Semantic! It’s tabular data.) that uses a small PHP function to build the chart on the fly using a set of arrays, such as this:
$line1 = array('Prolacria', 'for Dry Eye*', '90%', 'prolacria.php', 'tm');
That’s the only thing that has to be maintained, and it’s in a separate file for ease of readability. The PHP function then executes a while loop, building a seperate table for each $line. The display of the bars is handled in CSS styles that are also rendered upon page load, and the animation is done using jQuery.
Once all templates were coded and content added, it was time to enhance the site with some Web 2.0 coding. Flywheel has taken a shine to the jQuery library. Used in subtle ways, it enhances a site without the load times of Flash, and without sacrificing maintainability. The homepage images use the Cycle plugin, for example. It’s set to pause on mouseover, and cycle on click. Very long content pages, such as the Leadership section, use the Accordion plugin. jQuery is also used to make a number of small enhancements to the site, such as auto-appending ‘new window’, PDF, and ‘mailto’ icons to the appropriate links using the ‘rel’ attribute.
As a final nod to maintainability, the master PSDs were edited down to a set of individual templates for Headers, Quotes, Navigation, and small and large images.
After launch, search was enabled using a Google custom search engine, which was almost trivial to set up and deploy.
This site was a lot of fun to build, though very challenging at times. While corporate sites can often be seen as ‘boring’, the need to balance maintainability with advanced features kept it interesting. This site blends HTML, CSS, PHP and jQuery more evenly than any we’ve ever worked on. The client was also fantastic to work with, as they were clear in their communications and really ‘got’ the design. The edits they sent over in the final days before launch were precise and very helpful to the overall look and feel of the site, and they were extremely meticulous about Quality Assurance.
~Joe K
3 comments