The Official Fluid Blog

Now that the new season of Project Runway has started, I have to tear myself away from Hulu long enough to tell you about Fluid’s launch of the new Elie Tehari site. This project reminds me a lot of the reality show’s design challenges: create a hot new look on a limited budget and in a short amount of time to fit a perfectly-proportioned model.

In this case, Fluid Agency redesigned ElieTahari.com to create a beautiful, branded, and richly interactive website by layering the Fluid Experience imaging solution over the Demandware SiteGenesis ecommerce platform. We took the visual merchandising tools of Fluid Experience and raised them to a new level, seamlessly integrating them throughout the entire site in a way that complemented and enhanced the ecommerce best practices of Demandware SiteGenesis. Check out the ETC section to see how we used Fluid Experience to blend editorial content with shoppable looks. Fluid Experience isn’t just an accessory thrown on to give a static site some personality, but rather it is the fabric that holds it all together to tell the story of the products and the brand.

One of the coolest things about this project is that it also includes the first mobile site we’ve done since launching an HTML version of Fluid Experience. That means it doesn’t matter what kind of mobile or tablet device customers are using to view the site, it always looks great.

To make all this possible, the Fluid product team built completely new HTML based runtime components and corresponding business-user admin tools to create and maintain a wide variety of branding banners. They also built a Demandware cartridge for Fluid Experience to make future implementations on the platform a breeze.

From a design perspective, the challenge was to create a look and feel to match the modern sophistication of the Elie Tahari brand. Fluid’s role in helping to define the photographic direction was a key component of the design’s success. Our creative director, Mariana Bukvic, was able to be on site for the photo shoots, brief the photographer, co-art direct and guide the post-production. Often, we have to work with clients’ existing photo assets, and the fact that we were able to advise and collaborate with Elie Tahari from the start made a huge difference.

The combination of Fluid Experience, Demandware, and our strong interaction and visual design resulted in a site that was built efficiently but looks and feels completely custom. It’s like getting a perfectly tailored couture outfit without having to pawn your Bentley.

Contributors: Brian Biggs, Mariana Bukvic, Davi Ellis, and Margo Silver.

In reviewing the style guide for a client, we realized that Photoshop and CSS use different units for controlling the tracking and leading for text. So, how do you make sure that the typography on the site that’s built matches the designer’s intent as closely as possible? You could tinker with a simple HTML file and play with the CSS styles until they match the PSDs, but that could be tedious.

Fortunately, Doctor Hogue did a bit of research and found some simple conversion formulas. Thanks Dave! We’re posting the information here for reference for anyone who may need it.

TRACKING & KERNING

“Tracking and kerning are both measured in 1/1000 em, a unit of measure that is relative to the current type size. In a 6-point font, 1 em equals 6 points; in a 10-point font, 1 em equals 10 points. Kerning and tracking are strictly proportional to the current type size.”
Source: Adobe LiveDocs
———————————————————————————
Tracking Conversion CSS “letter-spacing”
———————————————————————————

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em

———————————————————————————

LEADING

“The vertical space between lines of type is called leading. Leading is measured from the baseline of one line of text to the baseline of the line above it. Baseline is the invisible line on which most letters sit—that is, those without descenders.

“The default auto-leading option sets the leading at 120% of the type size (for example, 12‑point leading for 10‑point type). When auto-leading is in use, InDesign displays the leading value in parentheses in the Leading menu of the Character panel.”

Source: Adobe LiveDocs