Category Archive: 'HTML, CSS & JavaScript' Category

Rapid interactive prototyping with HTML, CSS, and JavaScript using Fireworks and Dreamweaver CS4

by Mariano Ferrario
Tuesday, April 7th, 2009

A key aspect of Fluid’s user-centric design approach is to engage in usability research early on in the design process. One key element of our approach is to administer usability tests using interactive low-fidelity prototypes. Throughout the years, Fluid has developed a unique technique of developing richly interactive prototypes by adding HTML, CSS and JavaScript within Adobe Fireworks to create click through prototypes that are easy to use, manage and update.

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

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Great Resource on Page Weight

by Andy Lloyd
Tuesday, February 24th, 2009

At Fluid we are constantly tuning our work to deliver the richest experiences without sacrificing performance and download times. To that end, one of our lead engineers, Cody Lindley, put together a great resource on the page weights for the leading ecommerce pages. I wanted to share it here, for everyone’s benefit. (the pages highlighted in yellow are Fluid customers, though in some cases the pages measured were not built by us)

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Speaking At JQuery Camp

by Cody Lindley
Thursday, September 25th, 2008

This coming Sunday I will be giving a small case study talk at jQuery Camp 2008 (sold out) pertaining to the use of jQuery on the new northface.com site. The material I will be covering will be lessons learned with a focus on how jQuery fits into large scale projects.

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!

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Catalogers’ Delight

by Andy Lloyd
Wednesday, August 27th, 2008

Many of the multi-channel merchants we work with have invested in beautiful photography that shows a range of products in highly branded settings. Many of these photos are shot primarily for print catalogs and, up to now, retailers haven’t been able to put these assets to affective use on the web.

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.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

In search of… Lead Software Engineers

by Brian Weichel
Thursday, August 21st, 2008

Fluid is growing… we’re growing our expertise, we’re growing our client base, and we’re growing our team. We’ve got a number of positions available right now, but the one I’d like to highlight is our Lead Engineer position. At Fluid, the Lead Engineer really gets a chance to stand out, and be not only a technical leader, but a thought leader. We love to hear new ideas and find new ways to blow the minds of our clients.

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

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Converting Tracking and Leading from Photoshop to CSS

by Paul Mooney
Friday, February 22nd, 2008

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

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

SWFObject in the Default Publish Profile

by Paul Spitzer
Friday, May 5th, 2006

As I’m sure most of you out there already know, recent changes to Microsoft’s Internet Explorer force a change in the way we embed Flash files in our HTML. At Fluid we’ve been using SWFObject , a useful bit of JavaScript that handles these changes quite nicely. The other day, after publishing several .fla files and having to update the generated HTML each time and eventually growing quite tired of the process, I decided it was time to give SWFObject a more permanent home.

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.

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter

Firefox 1.5 Extension Goodies

by Daniel Wabyick
Friday, December 2nd, 2005

I decided to take a bit of time this morning and update to Mozilla Firefox 1.5 and took a look at the latest and greatest extensions. Here is my personal list of must-have extensions for both productivity and fun.

  • 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!

  • del.icio.us
  • Facebook
  • email
  • LinkedIn
  • Twitter