Fluid’s guiding principle as a company is that content, community and creativity together drive commerce. With Torque, we put that belief into action by creating an experience that took the best of Craftsman’s vast amount branded content, added in their highly engaged community of DIY’ers and brand enthusiasts and transformed it into a richly interactive, fully shoppable iPad magazine.

The list of innovative things we did for this app is pretty comprehensive:

• Almost all content within the app is actionable in some way. Whether it’s shopping, signing up for the Craftsman Club, engaging with the brand on Facebook and Twitter, following along with DIY projects, or accessing exclusive videos and articles, the content leads the way
• Using an updated version of Sears eCommerce API, we enabled users to add products to their cart right from articles and content within the app, then checkout seamlessly on craftsman.com
• Live video streams directly from the Craftsman Experience studio, and the app alerts users when the stream goes live
• Social media streams are universally accessible, giving every interaction a potential
• Blurs the line between editorial, branded content and eCommerce
• Content is streamed into the app via a CDN, allowing easier updates without having to release full updates into the app store

How Fluid designed it
Fluid started the discovery process by first auditing all of Craftsman’s existing content as well as their upcoming campaigns and initiatives. We then created an editorial structure and content flow for the app, which is actually much more like creating a magazine for print than creating an “app.”

After nailing down the table of contents, Fluid worked out all of the possible user interactions. This included everything from basic page behaviors all the way down to multiple content interaction scenarios. As we worked on the interaction design and started merging it with our editorial structure, we began brainstorming ideas for an editorial voice and identity. Fluid presented one naming option to Craftsman: “Torque”. Craftsman promptly trademarked the name.

We then began the process of breaking the editorial structure apart into smaller chunks to work on. For content that already existed (like the step by step projects), Fluid redesigned it to fit into the edgier, grittier, DIY-inspired look and feel of the app. For content that needed to be created or expanded, Fluid designed those sections from scratch and provided clear direction and guidance to the Craftsman marketing team so that they could start writing those remaining sections – the most notable of which are the Top 100 and Mystery Car Vault. Our process continued on iteratively until the content for the entire experience was completely fleshed out.

How Fluid built it
On the UX and visual design side, Fluid began prototyping very early on in the creative process. In some of the very first designs presented, we used video layers in Photoshop and exported the files as quicktime movies so that the client could immediately see how both the look and feel and the interactivity worked together.

On the technology side, Fluid’s developers immediately started testing different options for build and eventually settled on using a combination of HTML 5 and Javascript. Structurally, Torque was set up in a way that makes content updates achievable without having to push an update to the app store. All of the content, from videos and images to text, is served via an Akami CDN. In other words, much of the content doesn’t actually live “inside” of the app, so the initial download is very fast and all of the content loads on-demand.

In order to make sure that the eCommerce layer worked seamlessly with Craftsman’s existing system, Fluid worked with Craftsman’s technology team to create new API’s that allowed Craftsman’s “Quick View” to be displayed within the app. Adding items to a cart was seamless via the UIWebView (in-app browser), and checkout was handled by craftsman.com. Once the app was in working order, the entire tech, creative and ux team all spent time working together to test for bugs, optimize, and refine the experience. The final handoff was to the Sears Mobile team, who then submitted the app to iTunes for approval. The app was approved in one weeks time.

Why we think it’s cool
Opportunities like this are rare. Fluid got to create, name, design, and build a branded, shoppable iPad magazine on the hottest technology platform in existence for one of the most well-respected brands in the world. At Fluid, we believe strongly that experiences like this – the ones that merge content, community and creativity in delightful and innovative ways – are the future of eCommerce and brand engagement. We were honored to work with a legendary brand like Craftsman and their very talented marketing team to create a cutting edge product that their consumers are thrilled about.

Our mission for Fluid Experience has always been to make online shopping more engaging while decreasing production effort. With this in mind, we’re pleased to announce enhancements that optimize product and brand imagery presentation, regardless of the device. We accomplish this using a number of methods:

Product Displays - Our interactive product displays (zoom, color changes, views, etc.) now perform browser detection and serve up a Flash-based presentation if available. If not, we assume the user is on a touch-based tablet or smart phone and serve up an HTML presentation specifically optimized for touch navigation. For zoom, instead of forcing click-and-pan or mouse-over zoom gestures on the user, we rely on native pinch-to-zoom gestures that they already know. Plus, we do some special work behind the scenes to ensure the image stays crisp, even at multiple levels of zoom.

Shoppable Imagery – For adding interactivity to brand-based imagery, we’ve built a completely new, HTML-based component from the ground up. And don’t worry — ditching Flash doesn’t mean a loss in richness or interactivity. Our new Shoppable Image component allows for graceful crossfade and scrolling transitions. Hotspots and tooltips can contain and mix images and text. Rich fonts work out-of-the-box courtesy of Typekit. Fonts.com support is available as well.

Shoppable Video – Our Shoppable Video component detects user’s system in a similar way to Product Displays and serves up either a Flash or HTML-based presentation as appropriate.

And this is just the beginning: we see huge potential in how tablets and smart phones can really elevate the shopping experience and intend to continue to further optimize our components going into 2012. What’s more, we’ve expanded browser support so retailers can continue to upload an image once and rest assured that Fluid Experience will keep pace with the proliferation of new devices. Now and in the future.

Recently, Adobe asked Fluid to share our approach of rapid prototyping with the Adobe Fireworks and Adobe Dreamweaver developer’s community and we were both honored and excited to do so.

Our in depth article, “Rapid interactive prototyping with HTML, CSS, and JavaScript using Fireworks and Dreamweaver CS4″, can be found on Adobe’s website here:

http://www.adobe.com/devnet/fireworks/articles/rapid_interactive_prototyping.html

Here is a quick overview of my talking points:

• jQuery is the best choice for custom interfaces
• jQuery code (all js code) goes at the bottom of the page
• Almost all JavaScript code belongs in a single .js file
• Protect your jQuery code from others with a self executing anonymous function
• Fork IE from a single location
• Use page identifiers to run jQuery code on unique pages
• Play nice with others by using jQuery event namespaces

If you were lucky enough to get into jQuery Camp, I’ll see you there. If not, beg, borrow, or steal until you find a ticket. It’s going to be the jQuery event of the year!

In some cases, catalogers have uploaded versions of their print catalog to the web. While there are legitimate reasons to do this, Fluid’s customers have generally found results from these efforts disappointing. Conversion rates are low, as you would expect from directly translating a print layout to the web. Even with the fancy page flipping affect many of them add .

In other instances retailers have simply taken the existing photo assets and overlaid merchandising text in Photoshop. While this serves the purpose, this text frequently looks cluttered and may significantly lessen the brand impact of the photo. These photos were taken to create an emotional connection between the shopper and a brand or product. Reading text overlays certainly lessens the visual impact and can also distract from the emotional connection of envisioning yourself in the scene.
Other retailers have used these assets as the basis for a richer shopping experience, creating tooltips that appear on mouse over. This is a great use of interactive technology but up to now has been resource intensive to produce. The manual production required to update a banner has required a designer to create the visual and an engineer to wire up the custom Flash or AJAX technology. By the time the banner is integrated into the site it could be a week or more later.

The Fluid Retail team has recently released an enhancement to Fluid Experience that allows retailers to more efficiently use rich brand photography on their site. Using our authoring tools virtually any member of the production team can pull in existing photography, mask out and associate products and publish the assets to the site without need of any technical skills. The whole process can be completed in a matter of minutes.

I’ve embedded an example of the type of interactivity that is possible with Fluid Experience below. Note that shoppers are able to learn about all the products shown, without leaving the photography that has engaged them. Combined with a quick shop window and mini-cart, this type of interactivity encourages the purchase of multiple products.

It is also worth noting that this merchandising component is embedded using Fluid Social’s content syndication capabilities, that allow anyone to take your site content to iGoogle, blogs, MySpace or Facebook.

As I said earlier, the real magic behind the Fluid technology is the authoring tool that eliminates the need to have Flash developers or IT involved in publishing new assets to the site. If you are looking for better ways to engage shoppers with rich product photography you should contact us to learn more.

This is a chance to really build your career working with the cutting edge of technology on projects for top shelf clients. Lead Engineer isn’t just a name we throw around, our leads really are at the forefront of the engineering team. They contribute at every phase of development from concept to launch, leading their team to the successful completion of each project and rave customer reviews.

So if you’ve got a talent for handling responsibility, working with others, and setting technical direction, even if you haven’t been a lead before, we want to hear from you! We’ve got a quick questionnaire to get the interviewing started right off the bat, so hop onto the link below and take the first step into a Dilbert-free life.

One other thing, if you’re not interested yourself but know someone who might be, refer them and get five grand if they get hired. That wasn’t a typo, it’ll be the easiest money you ever made.

Get Started Here: http://jobs.accolo.com/14202

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

The solution, modify Flash’s default publish profile to include a modified HTML template that uses SWFObject instead of the standard Object and Embed tags. Now, when I publish HTML with my .fla files Flash uses this new SWFObject enabled HTML. I was so happy with the result that I decided to package it up into an extension for others to enjoy.

You can find the extension along with release notes here.

• Foxpose View all of your tabs in one window like in OSX Exposé. Fun!
• Web developer Toolbar The defacto standard plugin if you do any web development.
• IE Tab Open Internet Explorer within a Firefox tab. Very useful for cross-browser testing.
• Dictionary Tooltip Double-click a word to get a popup dictionary definition.
• Foxytunes Control your music apps via your browser toolbar.

Have fun!