Posts fashioned by Komejo

http://clearscapes.com/

This was a clean, ground-up build of the Clearscapes website. Clearscapes has had a web presence since 2000, but a rebuild in 2007 had made the site very difficult to maintain. Rather than waste time and energy managing the existing site, they put up a placeholder in 2008 and commissioned Flywheel to redesign it from scratch.

The Clearscapes website in 2008. All text is rendered images.

The client has a clear idea of branding and image, but wanted to add a strong ‘Wow factor’ without sacrificing usability, ease of maintenance, or scalability. Since it is an architecture firm, they wanted the portfolio to feature prominently.

Taking advantage of the generally larger monitor sizes available since 2000, Flywheel pushed this up to 1024px wide, with very clear and dramatic ‘Whitespace’ used in the header to emphasize the Clearscapes logo and tag line.

The new homepage navigation is entirely text-based.

In addition, Flywheel added a second-level dropdown navigation using jQuery. Since the navigation elements are fairly narrow and sit right next to each other, it would be fairly easy to get confusing mouseOver jitter. The solution was to use the jQuery HoverIntent plugin, which detects mouse speed and fires an event accordingly.

The navigation is also ‘sticky’. It knows what page you’re on.

To better facilitate maintenance and automation, the site was built using a directory-based structure. Each page sits in a unique directory or subdirectory, thus allowing all file and image names to be standardized. A simplified site map therefore looks like this:

    Home-->Work-->Dining-->01_helios_coffee_company

        |->Firm

        |->Contact

Since updating the navigation is non-trivial for most sites, the portfolio (Work) section has a PHP function (readdir) to scan the section subdirectories for folders, and when it finds one, it auto-generates the icon-based navigation:

Project Icons are auto-loaded and auto-highlight using CSS and PHP.

A further point of interest/coding challenge was the desire to use the Clearscapes tagline as a horizontal scrollbar element, as well as making all of the site text column-based, expanding to the right. These are substantial non-standard approaches, and it took several iterations before we felt the nav bar drew the eye properly and gave users a cue that there was more content to the right of most pages.

To make the multi-column layout work, a set of div tags whose height, width and margin are set in the index.php file. We then use PHP to add up all of the numbers and then set the page width accordingly. The client should not have to adjust these settings. Adding a new ‘page’ is simply a matter of copying a directory, renaming it, and changing the images and text files.

For the project description, the very flexible jqModal was used. The challenge of having a semi-transparent background for the text that would work in all browser was puzzling. Then it was realized that jqModal offers an onShow method. Using this to pop a div with a cross-platform opacity made things (relatively) simple. After that, it was easy to add a ‘bonus’ effect – if the bonus.txt file existed, show a link. If it’s clicked, stretch the window while moving the left margin and fade the new text in. (Note: this is the author’s favorite effect on the site.)

The Bonus link is conditional.

The real fun was developing the homepage ‘Wow Factor’. The design showed a collage made of 84 squares. These would link to an intermediary page, which would lead to the particular portfolio piece. The grid could have three states – be blacked out, be black with a white border, or show the background image and allow a hover event to show a red border. After some consideration, we went with a PHP function to randomly assign one of three CSS classes: ‘black’, ‘border’, and ‘hover’. (‘black’ refers to the fact that the square is blacked out, not the color).

function gridbuilder() {

    // make a random number between 1 and 100

    $random = mt_rand(1,100);
    // Set the % of black squares

    if ($random <= 25) {

        echo "black\"";


    // Set the % of bordered squares

    } elseif ($random <= 35) {

        echo "black border\"";


    // Set the hover class

    } else { echo "hover\" ";   }

}

This creates a situation where ~25% of the time, a square is black, and that ~10% of the time, it’s black with a white border. If it’s neither of those things, it adds the ‘hover’ class, which is a jQuery selector for the red outline hover state. In this case, we left the default jQuery hover, because the ‘ghost’ effect is fun.

The background is a single large image.

There’s also a jQuery UI effect that causes all of the blacked-out squares to fade in red, then fade out. This not only provides a nice visual ‘pop’, but it ensures that something is going on if your connection is a little slow and you’re waiting for the homepage image to load.

Finally, if you linger on the homepage, there is a ‘shimmer’ that runs across the page every 45 seconds. This is yet another jQuery effect, and it is meant to be evocative of the Raleigh Convention Center’s ‘Shimmer Wall‘.

Overall, it was a  fun site to work on, especially since the client has such a clear vision of the branding, and a good grasp of project schedules and deadline pressures. It features a lot of the latest web technology without sacrificing usability, and shows off the client’s work well.

http://clearscapes.com/

~Joe K

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~

http://inspirepharm.com/

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.

http://inspirepharm.com/

~Joe K

Close observers may have noticed that there are a row of icons at the bottom of each OkayGreat post, and that the sidebar now has a Twitter feed. These have been added to assist you, dear reader, in keeping tabs on OkayGreat.

Since we were talking about Twitter (among others), it seemed only reasonable to highlight the images of artist/illustrator Yiying Lu, whose iconic Fail Whale illustration is so popular among users that it even has its own fan club.