Download the Fireworks CSS Export Demo File Here

Due to popular demand I am making available the simple demonstration file for these common layout issues:

• Overlap – when the bounding boxes of objects overlap in Fireworks, Fireworks switches to Absolution Positioning Mode in order to preserve the layout, but this is not ideal for the exported CSS and HTML. Avoiding the overlapping objects can make it easier to get the layout you intend.
• Vectors – Since Fireworks is both a bitmap and a vector tool, we often use vectors to draw objects that will become icons or other bitmap images in the actual web page; slices are used to indicate what to export as bitmap images with the CSS and HTML, but if a slice does not completely cover the vector art or if the vector art is not sliced at all, then Fireworks will either export the vector art as generic DIVs in the code or will tell you that there are overlapping objects and switch into Absolute Positioning Mode.
• Floats - Fireworks uses floats and margin and padding values to position all of the objects on the web page, and it has some built-in algorithms to identify whitespace to help it identify rows and columns in the layouts; sometimes the algorithms do not accurately identify the layout we intend in the design, and even though the export occurs without error, the layout of the web page does not match the desired layout in the design. We can use background rectangles to define DIVs and force Fireworks to create the layout we intend in the exported code.
• Font Face – If we non-standard web fonts (e.g., Arial, Times New Roman, Verdana, etc.) for live HTML text, Fireworks will warn us during the CSS export that we have used a non-standard font. Fortunately, Fireworks will still assign that font name in the CSS, so if we are using embedded web fonts in a project, the web pages will look correct. However, if we use a non-standard font and do NOT use embedded web fonts, then people without that font installed on their computers will not see the correct font and the design as we intended.
• Font Decoration – Fireworks will export blocks of text with paragraph tags in the HTML, and the style of the text in each block is defined by the style of the FIRST character in that text block. If we use inline styles in the design in Fireworks, they will NOT be exported in the CSS and HTML. Inline styles need to be added to the exported code using a code editor like Dreamweaver. The same issue occurs for inline links: Fireworks cannot export inline links, so they will need to be added to the exported code.
• Gradients - Fireworks does not currently support CSS3 features, including gradients, in the CSS export feature. If we have gradients, repeating textures, or repeating patterns in the background of a DIV, we need to place a slice over the gradient or pattern and identify it as a background image that repeats. (There are few Fireworks extension developers working on adding CSS3 export support to Fireworks, so look for these features to become available in the future.)

A recording of the Adobe MAX 2010 session is available online:

If you are interested in getting a copy of the Portfolio template file shown in the session recording, it is available in a previous post.

The Grid and Swipe autoshapes can be used to create tables, but each of these autoshapes will create tables with different features. When you first drag them out from the Auto Shapes panel and place them on the canvas they will look something like this:

Download the Grid Autoshape from Aaron Beall

Download the Swipe Autoshape from Senocular

Fireworks autoshapes are special drawing objects that be modified using their different control points and handles, and they remain editable as long as they remain autoshapes. (If you ungroup an autoshape it will lose all of its special control points and handles and become a normal vector object. Once ungrouped it cannot be turned back into an autoshape.)

Using the Grid Autoshape

The Grid autoshape has multiple control points and handles:

The Grid autoshape offers the ability to change the horizontal and vertical cell padding for all cells in the table (while the Swipe autoshape cannot do this):

There are also control points for changing the number of rows and columns:

Although the Grid autoshape can quickly create tables, one limitation is that all of the rows must have the same height and all of the columns must have the same width. The row height is always the total height of the table divided by the number of rows, and the column width is always the total width of the table divided by the number of columns. Although this may be sufficient for quick wireframes, it is often unrealistic for actual tables on real web pages where rows and columns may have variable heights and widths.

Styling the cells in tables created by the Grid autoshape is easy. The styles assigned to the four cells in the top left corner of the table will be repeated throughout the entire table:

To create a table with alternating fill colors in the rows, use the Subselection Tool to select table cells and give the top two cells in the corner a different fill color than the bottom two cells, then click on the center control point to redraw the table.

To create a table with alternating fill colors in the columns, use the Subselection Tool to select table cells and give the left two cells in the corner a different fill color than the right two cells, then click on the center control point to redraw the table.

To create a table with a checkerboard fill, use the Subselection Tool to select table cells and give the diagonal cells a different fill color from each other, then click on the center control point to redraw the table.

Finally, the entire table may be resized with the top left and bottom right control handles. You can either drag the corner to change the size of the entire table, or you can double-click the control handle and enter specific dimensions in a dialog.

Using the Swipe Autoshape

The Swipe autoshape does not appear to have been originally intended to create tables, it appears to have been intended to create design elements and shapes like this:

However, it can be used to create tables with multiple rows and columns that can have variable heights and widths. The Swipe autoshape has multiple control points and handles:

When the Swipe autoshape is first dropped on the canvas, it has only one cell. Before adding rows and columns, adjust the height of the shape to be the desired height of the entire table, then use the bottom center control point to create rows within the table:

Once you have the desired number of rows in the table, create additional columns to build the table:

Use the middle control points on the vertical axes to adjust the width of each column, and use the middle control points of the horizontal axes to adjust the height of each row. This can be done to produce tables with variable row heights and column widths, which is common in actual HTML tables.

If you need to create additional rows later, you will need to add rows by ALT/OPT click and dragging a row control point upward. You can add rows from the bottom middle control point or any middle control point for an existing row.

If you need to create additional columns later, you can create them within the table or at the right side of the table by ALT/OPT click and dragging the column control points on the vertical axes then adjusting the internal column widths accordingly. The Swipe autoshape can produce unexpected results if you try to create new columns by ALT/OPT click and dragging a column control point to the left, so always drag the column control points to the right.

HINT 1: Make certain that snap to grid and/or snap to guides is turned on when using the Swipe autoshape to create tables, because the control handles do not automatically maintain perpendicular lines, and you may find the rows and columns becoming skewed as you draw them.

HINT 2: The Swipe autoshape uses a Soft Line for strokes by default, but this can result in “fuzzy” anti-aliased lines in the table as you create or modify it. To retain crisp strokes for the table cell, select the entire Swipe autoshape table and change the stroke style to Hard Line.

Once you have the desired number of rows and columns in the table, you can use the Subselection Tool to select individual cells and apply the desired styles to those cells. The Swipe autoshape does not have a center control point for applying table cell styles (like the Grid autoshape), so you will need to subselect all cells that will have the same style.

Once the cells have been subselected, it is easy to create tables with alternating rows:

It is also easy to create tables with alternating columns:

Deleting rows and columns from tables created with the Swipe autoshape can be difficult. The only way to delete rows and columns is to ungroup the Swipe autoshape and use the Subselection Tool to select and delete the nodes for the cells you want to remove, but remember that once an autoshape is ungrouped all of the autoshape editability is lost and it cannot be turned back into an autoshape.

Conclusion

The Grid and Swipe autoshapes can help you create wireframes and comps with tables more quickly than drawing the tables manually, but neither of these autoshapes will create HTML tables when pages are exported as CSS and Images. They are graphic tables only for illustration. There is no HTML Table component symbol in the Common Library, but if you would like to see this added to Fireworks in the future, you can submit features requests via the Adobe web site.

• Consistency
  • BIG KID
• Visibility
  • Anthony Neil Dart
  • Diesel Clothing
• Learnability
  • Cristof Echard
• Predictability
  • Acura TSX
  • IKEA Kitchen
• Feedback
  • Slow Food Membership

If you attended the presentation, thanks! If you missed it, you can download a PDF here.

Interaction Design for Graphic Designers

The recording of the session is now available online via Adobe TV or you can watch it below.

Infographic Tutorials and Examples

Export CSS and Images Part 1: Creating the page structure and placing key content elements.

Export CSS and Images Part 2: Using HTML component symbols and slices

Export CSS and Images Part 3: Inserting placeholders for dynamic content

I’ll also be presenting a session on using Fireworks for wireframing and prototyping and conducting two “Bring Your Own Laptop” labs on exporting CSS and Images from Fireworks CS4 at Adobe MAX 2009 in Los Angeles. If you’re attending, look me up.

• Capture attention (e.g., animated banner ads)
• Provide feedback after user actions (e.g., mouseover and on-click states)
• Provide deeper levels of information and facilitate understanding (e.g., infographics that illustrate complex data, such as planetary orbits)

Unfortunately, too much of this animation and motion is gratuitous and does not serve to enhance the user experience, and in many cases it actually distracts the site visitor. Usability professionals often encounter test participants who use their hands (or even sticky notes) to cover parts of the monitor where animated banner ads appear, because the ads attract their attention and distract from the content they are trying to read.

The animated GIF for banner ads that annoyed us for years before declining are being replaced by slicker Flash ads with embedded audio and video, elaborate animation, and even interactivity. Additionally, web sites and applications are using more motion and multimedia to add value to content and attract attention. In some cases the result is a sensory cacophony that overwhelms visitors and reduces the quality of the user experience.

Is animation bad? Should motion and multimedia be avoided? No, but we do need to consider when, where, and why we choose to use it. Animating a logo or image or infographic simply because we can is gratuitous. There should be value and improvement to the user experience, and the animation should support and enhance the content and goals of the site. Here are some basic principles for effective motion graphics and animation:

1. Remember: motion attracts attention. Using too much animation and motion on a single page results in competition for attention and often frustrates visitors. If you choose to use motion to draw attention, give the visitor control and the ability to stop the motion if it distracts them from their goal.
2. Animated graphics are only better than static graphics when they make it easier to understand complex information by being more visually explicit.
3. The content and format of a graphic should closely correspond to the content and format of the concepts and information to be conveyed (also known as the Congruence Principle.) For example, it is more difficult to understand the variations in the stock market looking at tabular numeric data than by looking at diagrams of value over time. Animation adds the ability to include changes in time and space in a more visually explicit way.
4. To be effective, animations need to be correctly understood by the viewer (also known as the Apprehension Principle.) Animations are often too complex or move too fast to be accurately processed and understood by visitors. Make the animation interactive, and give visitors the ability to pause, rewind, restart, and even control the speed or flow of the animation so that they can better focus their attention and thinking on the important and more complex portions.
5. Avoid clutter and unnecessary complexity. Provide enough information and visual cues to help the visitor understand, but do not include extraneous information or design elements that may confuse or distract.
6. Be organized and focused before starting to create the animation or motion graphics. Write a script, create storyboards, and have a plan to convey the information in a concise and focused way, otherwise you may wander away from the goal and include unnecessary information and/or steps.
7. Use the animation to tell a story. A coherent narrative helps visitors better understand the information in a meaningful context.
8. Support animations and motion graphics with corresponding text. Do not assume that the animations are sufficiently explicit to understand without supporting information. If you are using audio to support the animation, give the visitor the ability to control playback and volume.
9. Consider using visual metaphors to help visitors better understand complex information and concepts and to reduce ambiguity.
10. Avoid design myopia. You already understand the information and concepts, therefore your animation and motion graphics design will make sense to you. Show the animation to other people, test it with your target audience, and evaluate whether or not they understand it correctly. What seems obvious to you may be less so to others.

People behave differently under different circumstances and have different needs and goals at different times. Although it may be convenient to think of John Q. Persona as “the guy who abandons his shopping cart ten times before committing to the purchase,” this is not necessarily the way he behaves all the time.

Nearly all web site visitors will change their online behavior based on their current goals. Sometimes we have extra time to surf, and sometimes we are in rush and need to get in and get out efficiently. Sometimes we need to search extensively (e.g., I want a good suspense novel), and sometimes we already know what we are looking for and where (e.g., I want the latest Anne Rice book.) But rarely do we do the same thing every time.

Personas should be representative of actual site visitors, and that means that they will have a range of goals and behaviors. Some behaviors may be more common than others, but they will exhibit a variety of behaviors over time. Yes, John Q. Persona may be more likely to abandon shopping carts than other personas, but perhaps he only does that when comparison shopping for himself. His behavior may be different when he shops for gifts for others, or maybe his behavior changes when he browses from home versus browsing from his office during lunch.

To get the most out of personas, we should separate the personalities (i.e., the personas) from the actual behaviors. Create personas to learn about who site visitors are demographically, what motivates them, how they react to options or designs, and what content or experiences are important to them. Create experience flows to describe the most common behaviors that are observed or desired for the site (e.g., gift shopping vs. product research.) Then play mix-and-match with the personas and the experience flows: which experience flows are most likely for each persona, then rank order them. For example, John Q. Persona may exhibit more cart abandonment behavior than any other persona, but he may also be interested in comparison shopping, product research, and interactive merchandising displays.

Personas are meant to be realistic representations of actual site visitors, so it is important to remember that real visitors behave differently at different times and under different circumstances, therefore personas should also exhibit tendencies, preferences, and ranges of behavior.

Nomenclature, terminology, labels. What we call things and the names we use are very important, and deciding upon the “perfect label” can often be more difficult than we anticipate. As information designers and architects we are tasked with not only organizing information, but also often with naming it.

Sometimes the exercise is quite straightforward: developing a product catalog for an online toy store may be more an exercise in deciding whether building blocks are categorized as “puzzles” or ” learning toys” than in naming them “building blocks.” In either case, the label for the toy seems obvious. After all, we would not change the name from “building blocks” to “plastic construction units.”

But sometimes the nomenclature exercise is not as easy or straightforward. Sometimes we struggle with what to call something, especially when we are trying to decide upon a site’s navigation and interaction terminology, headers, subheaders, text links, and buttons. For example, should we call a section “Online Learning Center”, “Training Services”, or “Guides and Documentation”? Although each of these options conveys a similar type of content, each creates slightly different expectations about what information will be presented, the format of the information, and the extent and form of the interactions possible.

The labels and terms we use are very important, because they assist, guide, and inform visitors to our site (or users of our applications) and help them work efficiently and accurately. Poor nomenclature:

• is ambiguous, incomplete, or even erroneous.
• causes confusion.
• causes frustration.
• increases abandonment.
• decreases credibility and trust.

Good nomenclature should go unnoticed, because site visitors do not have to stop and think, “What does this mean?”, “Where will this take me?”, or “What is going to happen?”, because it is immediately obvious and meaningful to them. There are a few practices we can put in place to help us develop better labels and more useful (and usable!) nomenclature:

1. Use active language (e.g., “See the Ford Model T Specifications”) and avoid passive language (e.g., “More about the Ford Model T may be found here.”)
2. Use familiar terms that are meaningful to the target audience, and try to avoid internal, (company or product specific) terminology (e.g., “Mental Health” rather than “Psychopathology” on a community health web site.)
3. Use directive language that sets accurate expectations for the reader about what will happen and what will be presented when they follow the link or press the button (e.g., “Download the Update” communicates that the download will begin right away, whereas “Get the Update Here” is somewhat vague and may either start the download or take the visitor to another page.)
4. Be concise. Long labels are more likely to introduce ambiguity, and there is almost always limited screen real estate to work with. Tooltips that show up on mouseover are a nice way to include additional, explanatory information if necessary. Also, eliminate any unnecessary words, for example, use “Read the full article” instead of “Click here to read the full article.” There is no need to write “Click here to…” as long as the link looks like a link to the visitor. If it does not look like a link, then make it look like one – do not fix it by adding “Click here.”
5. Be consistent. The terminology, tone and voice, and grammatical structure should be parallel across the navigation system. If you are using active verbs in the navigation, then all of the navigation options should include them (e.g., “Search for Music”, “Listen to Music”, “Share Music”, and “Buy Music.”)

And often we fail.

Everything is findable, understandable, and logically organized. All of the pieces are there, the labels are meaningful, ambiguity is absent, and the prototype succeeded in testing, but site visitors and customers do not come. We have included everything they asked for, we have made it accessible, and we even made the connections among pieces for them, but they leave before they even get to benefit from our efforts. Our carefully crafted architecture and specially selected nomenclature languish, even though all of our test participants commented about how easy and efficient it was to complete the representative tasks we gave them.

We deconstructed the information to better understand it, but during the reconstruction process we left something out: the user experience. No matter how findable, accessible, or well-named the information is, if it is not wrapped in a desirable user experience, it will languish.

The whole is greater than the sum of the parts.

User experience is more than information design, visual design, and interaction design. We often use terms such as compelling, immersive, persuasive, and entertaining to describe a user experience, but where in our taxonomies, architectures, and wireframes do we represent these qualities? What color, shape, sound, or logo embodies them? What interface component facilitates them? Capturing and defining user experience is outside of any single design effort.

User experience is an emergent property. It arises from a wonderful convergence of good design (information, visual, and interaction), useful and usable information, and the intrinsic desires, needs, or motivations of our visitors and customers. To encourage a successful user experience (can we really ever say we create it?), we have to make the visitor or customer want what we offer, to make them feel they need it, and to help them enjoy themselves when they seek and use it.

How do we make information desirable? Not just by making it available, but by making it real. Show people how it connects with their lives, how it is useful and valuable, and how it can help them. When we reconstruct the information and make connections among the pieces, we also need to make connections between the value of the information and their lives and daily experience. We cannot stop at findability and usability. We must strive for desirability, for in the end, is it not our desires that are often the most motivating?

I (Jensen Harris, the blog author) was reading a blog entry of someone who was kind of critical and dismissive about what we’re doing and our designs. One of his criticisms was “how bad the usability of the Ribbon would be because it’s got icons scattered all over of various sizes.” What we’ve learned is actually the opposite. People can scan disparate patterns more easily than homogenous patterns. When we use more toolbar-like layouts–a bunch of equally-spaced, equally-sized buttons, people scan them less quickly than when each chunk has a memorable layout. So we actually try explicitly to vary the layouts between chunks–it helps people find the thing they’re looking for more quickly.

This is a great example of how we are re-discovering some basic perceptual principles that have been studied psychologists for nearly 100 years: humans (and all insects and animals, for that matter) are designed to perceive change. We notice more quickly when things are different or when they change, and we get perceptually “bored” when things are all the same and never (or rarely) change. We know from software design experience that rows and rows or columns and columns of the same icon in file management UIs offer no scanning advantage, but if just one of those icons differs it seems to literally jump off the page at us. We notice the difference.

It is possible for historical reasons that function icons in toolbars are the same size because is it easier to design and build a toolbar where everything fits together like uniform bricks. It’s more difficult to create a toolbar where all of the pieces are different sizes and must be properly arranged in order to “look right.” Perhaps we have a perceived need for a grid-based system because it is simpler, not because it is better.

Yes, icons do vary in color and content based on the function, so there are differences among the icons already, but a standard icon size introduces a regularity that makes it more difficult to see those differences. Reading researchers have known for a long time that we read LONGER TEXT PASSAGES WRITTEN IN ALL CAPS MORE SLOWLY THAN WE READ PASSAGES WRITTEN WITH BOTH UPPER AND LOWER CASE LETTERS, because the ascenders and descenders provide us with word patterns based on the differences among the letters that we recognize more quickly. All caps letters are uniform rectangles, but a mixture of upper and lower case letters are a sequence of different sizes and shapes. We notice the differences.

Change and difference can occur in more than size, shape, and color; it can also occur over time. Our attention is drawn by things that move. Yes, we can see things when they are stationary, but when something moves it attracts us, it makes us want to look at it. Predatory animals are particularly sensitive to movement, but when the prey remain motionless it is much harder for the hunter to perceive it. Camouflage only works well when you are sitting still. Many animals are equipped with the coloring and instinct to blend in: fawns lay motionless in the dry grasses and stick insects cling motionless to branches. If they move, they become dinner.

We can use these perceptual principles to our advantage: facilitate scanning by using color, shape, and size cues to create memorable patterns, and draw attention with the use of differences, change, and motion. Although it may be easier to build UIs based on a grid pattern, the reality of our perceptual systems (and of the organic world) is that patterns are based on differences not similarities.