Patrick Hansen.com

Now, I love Fireworks for UI design. Some people are shocked when I mentioned that I, and most of our team, use FW. Some thought it was extinct after the Adobe / Macromedia acquisition, but it’s still alive and kicking and I highly recommend evaluating it if you do UI design. It a very powerful tool for web and software design, with a lot of features catered to the work flow, including pages, states (frames), shared layers, symbols and rich symbols and many more. However, this is not why I’m writing this post unfortunately.

As with any design tool, there will be some pros and cons, bugs and inefficiencies, FW is not immune to any of these.

One major annoying bug is the pixel snapping issue. If you have worked with FW CS3 or CS4, you are probably well aware of this painful issue and will be unhappy to know that it is still happening in CS5.

The problem is that FW will at times, make an object not snap on a whole pixel and it will appear blurry. This usually occurs when you move an object, sometimes when you close and reopen a document, and frequently when creating symbols. Another frustrating aspect is that the values of x,y position inputs display whole numbers and make you think everything is correct, like 300, 400, when in actuality, it is at 300.5, 399.5 or something like that. A quick fix is to focus on the x,y input sand simply press “enter” on those values, but that’s not very efficient and more so, you shouldn’t have to do that, especially with a pricey app like FW.

I just installed CS5 and I wanted to see if that problem has been corrected, and within a few minutes, I was surprised to see that it is NOT corrected. I was able to recreate it easily by creating a symbol and simply moving and scaling the object. Another interesting thing is that it appears differently when viewing the symbol on stage vs. digging into the symbol and viewing it inside. Very strange and frustrating, and I wish Adobe would address this issue.

I have looked in the preferences to see if there was anyway to turn on “pixel snapping” or if there was any other parameter that might fix this, but had no luck.

Here is a screenshot of the object and the issue involved.

Don’t get me wrong, this issue does suck, but it is not enough to drive me away from using Fireworks. I constantly work with various other formats such as Photoshop and Illustrator, and those tools have their issues too. Especially designing for interfaces, since those tools were not intended for that purpose originally. This is a whole other post though, so I’m out.

*Update: June 01, 2010:
There was a great comment (Michel) with mention to “Snap to Pixel” feature which is under Modify>Snap to Pixel or command+k (mac), control+k (Windows). This is great for working with “raw” shapes on the stage, but once you start working with symbols, this feature is not available and does not resolve the issue. Michel also wrote a great review about FW CS5 on Smashing Magazine.

Here is a quick video screencast of the issue.

1. I have a symbol on stage and appears shifted and blurry and Snap to Pixel is not available.
2. I double click the symbol to go inside, you will notice it appears to shift as I go inside. I select the green square, and I can Snap to Pixel.
3. Once I exit the symbol and go back to the canvas, the symbol shifts again and becomes blurry.

A List Apart features another great article, this time on Responsive Web Design. This derives from an emergent discipline called “responsive architecture.” The philosophy focuses highly on “how physical spaces can respond to the presence of people passing through them.”

This concept can be applied to other arenas outside of physical structures which already have the technology and flexibility to adapt, web and software interfaces. Now, the concept of adapting UI’s isn’t new, but the techniques used both in the technologies used and the experience/design vary in solutions and some are arguably not the best.

Fluid layouts in web design have been around for awhile, and although they do achieve flexible design and presentation and are quite successful for desktop device viewing, they are not full proof across multiple devices such as mobile phones to tablets.

Ethan Marcotte provides a great article which goes further in depth of this concept and he provides an excellent responsive web design layout example. Even the images scale smoothly to accommodate the various layouts. The examples do have some dependencies on javascript/JQuery for some of the more advanced image handling and media queries which shoudl also be considered when designing a responsive layout.

There are several examples demonstrating approaches for various resolutions. Catch the article here:

http://www.alistapart.com/articles/responsive-web-design/

This project looks pretty sick. And the good thing about it is, that even though it is bringing technology and graffiti/street art together, it’s not exploiting it with some mainstream adulteration.

Graffiti Analysis 2.0: Digital Blackbook from Evan Roth on Vimeo.

I think it is pretty tight how it not only renders the visual result of a tag/piece, but it focuses on capturing the “motion,” which is a big characteristic and and driving mechanism of defining the unique styles portrayed in graffiti and individuals that most would never be able to see or perceive. That is a finely tuned attribute of the craft that really isn’t a secret or anything, but it just isn’t something that is easily exposed or conveyed to some. It’s the “feel” of creating art, that even though this analysis project is getting really close to it, I’m still not sure if that can ever be transmitted precisely to everyone. It not only goes for visual art, but even other skills such as shooting a basketball, or playing the violin. Sometimes you just gotta’ “feel it.”

Visit the project site here:
http://graffitianalysis.com/

The “dude” rocked The Blue Bird Tuesday night.

This was the first time I have seen him live and I’m glad I did. He threw out his classics like Lac-ville ’79 to some new tracks that I haven’t heard before. Definitely a sick show with old school flava’ and energy. DD’s vocal scratches and effects are dope and pretty convincing.

Devin and his massive crew on stage delivering to Denver!

I’ve been playing around with javascript and JQuery lately and was working with some image-based buttons. This is nothing new and there are hundreds of solutions out there for this approach including the popular CSS direction. I did find some javascript solutions, but I couldn’t find any examples that were scalable and/or didn’t require several dependencies or explicit references like requiring ID’s or exact image file names and paths, which can be a hassle if you are dealing with multiple image-based buttons on a page or site.

So for whatever reason you may need a JQuery controlled image-based button, here you go.

note:
My example here is just providing a JQuery approach for image-based buttons. This can also be done quite easily using only CSS and altering the background image for the state. You would have to create a selector for each button and provide explicit height/width attributes for each button in the CSS. I would recommend using the CSS approach over the JQuery one, as it is more scalable if you decide to change the appearance of your buttons, you only have to alter the CSS and don’t need to mess with the markup.

Back to the JQuery Image-based button example:
There were several reason why I wanted to make this as generic as possible:

• Versatile Usage: Need to re-use this script across a site, different pages, even in PHP include files, and these files/pages may reside in various directories which would alter any explicitly declared image paths in the script.
• Image Type: Uncertain what type of image the buttons may be comprised of across the site: gif, jpg, png, etc.
• Number of buttons: May have several button instances and types throughout the site.
• No CSS Buttons: For some reason, the site is not using CSS based buttons

This script addresses all of those concerns with only 3 minimal requirements:

1. The obvious, must have current JQuery lib file linked to your page, and this script either in the page or in external linked js file.
   Download JQuery Here
2. Must assign the class the script references to the anchor tag for your button.
   (example: <a class=”js_uniButton” …></a> ).
3. The up and over images MUST have the same file name and be the same file type, but the over image must be appended with “_hover“. (example: MyImage.gif and MyImage_hover.gif)

I’m a novice using JQuery with only a couple months experience, so if there is a better way, then feel free to let me know. A friend of mine helped me write the image URL caching function, which ensures the image URL only gets called once.

Below is an example of the script with detailed comments and extra line breaks for easier readability.

Click here to VIEW the demo

Click here to DOWNLOAD the demo

note:
This needs to be within a doc ready function either in the page or in external js file:
$(document).ready(function()
// insert script here
});

//*************** JQeury Universal Image Button ***************
function getHoverPath (imgPath) {
//split imgPath after each '/' and create array to path directories and file name
var srcPathArray = imgPath.split('/');
//find image file name get length of srcPathArray and retrieve last item which is the image file ex: "images/buttons/IMG.gif"
var imgFile = srcPathArray[srcPathArray.length-1];
//image file name array split at "." to get:[fileName, ext]
var imgArray = imgFile.split('.');
//img name (first item in imgArray)
var imgName = imgArray[0];
//image ext (second item in imgArray)
var imgExt = imgArray[1];
//image src path
var srcPath = imgPath.split(imgFile , 1);
// concatenate path and add "_hover" to image file name
return srcPath + imgName+'_hover.'+ imgExt;
};
// get hover button array
var hoveredButtons = new Array();
 
$('.js_uniButton').mouseover (function() {
$this = $(this);
//get image path of this instance
var imgPath = $this.children('img').attr('src');
//cache img path url on initial mouseover
if (typeof(hoveredButtons[ imgPath ]) == 'undefined') {
hoveredButtons[ imgPath ] = getHoverPath( imgPath );
//console.log('cache image path ' + imgPath + ' and hover path ' + hoveredButtons[ imgPath ]);
 }
$this.children('img').attr('src' , hoveredButtons[ imgPath ]);
 
//mouseout actions
$this.mouseout(function() {
//define this handler
var $this = $(this), handler = arguments.callee;
 
//unbind mouseout handler
$this.unbind('mouseout', handler);
 
// on mouseout, swap current image with original image path
$this.children('img').attr('src' , imgPath);
});
});

Adobe has been spreading the word of their support for “Openness” in the creative and technology industries, primarily focused around the web (HTML 5) and Flash.

This is obviously a response to Apple’s recent lack of support for Flash on their mobile devices such as iPhone, iPad and iPod Touch, and their recent posts on their stand.

Watch for this ad popping up around the series of tubes…

View their perspective here:

http://www.adobe.com/choice/?sdid=GXRVG

People have been discovering a multitude of uses fro Apple’s new iPad device. This is one of the better ones:

New iPad Test – Will It Shred? from FUEL TV on Vimeo.