A Short Addendum to my Web Design Tools List – pixDif

Dan Florio, aka PolyGeek, dropped by my post on the Ten Website Design Tools I Can’t Live Without and dropped a good bomb on me in my comments. He recommended I try pixDif. pixDif is a tool he created to aid in rapid prototyping of website designs. It’s super cool! I highly recommend you download and try it out.

The description from his site:

Ive created an AIR application to help developers and designers measure pixel distances on their screens. You tell if you need pixDIF if you answer yes to any of these questions:

  1. Do you ever find that you need to measure the pixel distance/size of something when youre not in Photoshop? Or, put another way: do you wish you could take the guides in Photoshop with you to the computer desktop?
  2. Do you ever want to know what a graphical asset will look like in the context of a website or application. For instance, do you wish you could take an image and move it around over your website to see what it would like like in various places before you start writing the code to place it there?
  3. Do you ever have a website or application design that you need to break up into pieces and build into a working site/app? And then as you write the code you need to see how close to the design you are?

If any of those answers are yes then jump over to the pixDIF page and check out the features and overview video tutorial.

Dan is a highly talented designer/developer and you really should check out his site.

Been Crazy Busy… A Few Updates

Sorry for not posting more recently… I’ve been buried!

I spent the last few days in Colorado, it was beautiful! I was the best man in a wedding there (in Estes Park), you can see some photos from the trip here. CO is a nice place with fantastic scenery and super tasty microbrews. Highly recommended.

While I was there, I got to meet Juan Sanchez, designer at Effective UI, and one of the main contributors to DeGrafa. He mentioned that Scalenine’s skin contest had completed. What a great pile of entries! I can’t wait to see the library grow and serve as the premier resource for Flex Designers on the web. How cool. Even cooler, was the fact that my Coworker, Heather Ford, was one of the winners with her DiscoType Theme! Awesome.

Beyond that, my students are begnining to build some mashups and make some progress learning Flex… Some recent ones they’ve made… GeekVahalla (a tech focused RSS Reader), TweetTally (a Twitter Tag cloud search). Dropped Passes (a sports focused RSS Reader). I hope to continue to post more as they pile up.

Finally, at The Iona Group, we are hard at work on our eLearning development platform, Doctum. We’re gearing up to launch and start talking to people/demoing it at DevLearn08. If you’d like to be made aware when we launch, head on over to DoctumLearning.com to get on our list of contacts. We have a full site launching soon with features, videos etc explanining what makes it different, but for now it’s kind of in a hush hush mode. Needless to say lots of work is going on and the system is shaping up to be pretty amazing, if I do say so myself.

10 Web Design Tools I Can’t Live Without

Everyone has their favorite methods, tricks and tools for completing their work. As a Mac Webdesigner/developer, I thought I’d share my list of indispensable software and resources that I use on virtually every project. I wouldn’t call this list exhaustive as I have left out a couple things like an FTP client (though I do like Transmit) and an SSH client (I simply use OSX’s terminal), but it should give a little insight into how I get things done. I primarily use Firefox as my browser of choice, so some of the tools here are actually add-ons for the browser.

  1. A decent text editor. I use BBEdit, though I sometimes use Eclipse/Aptana as well. Say what you want about WYSIWYG editors, they’re easier, they’re getting better, they have a lot more features, etc… I really just haven’t ever liked them. Sure Dreamweaver is much better than it used to be, Coda isn’t bad and Espresso looks pretty promising, but they still seem to get between you and the real markup IMHO. They all seem to let you down with their previews eventually anyway, so what’s the appeal? I haven’t been able to pin that down, and so until then, I edit in a text editor and preview with a browser. Honestly, I have a version of BBEdit that is a little old, so I may eventually shift away from the slightly overpriced standby, but old habits die hard.
  2. Omnigraffle is tops in my book for wireframing and process documents. Sitemaps, data design, UI prototypes, etc pretty much always start here for me. I use it for sketches and for client delvierables alike. It’s easy, fast and extensible. I love it. To enhance the already great app, head to Graffletopia.
  3. Photoshop is most likely in your toolbox, too. That or Fireworks. I use the save for web for all my images feature now that Imageready is no more.
  4. Kuler/ColourLovers. I seem to switch back and forth between the two color palette creation sites. Each has their pros and cons. I like Kuler’s flash tool interface a tad better, but ColourLover’s community is just awesome. When I feel creatively stagnated, I often pop over to one of them just to work up some palettes and get inspired.
  5. The Web Developer Toolbar. If you don’t have this installed on your Firefox installation you are simply wasting too much time debugging and validating your markup and CSS. With the built in guides, grid and rulers, the toolbar in many ways seems to obsolete the tools in many of the WYSIWYG editors out there. I could probably write a post on just this tool alone, because each top level menu in the bar is loaded with useful utilities and features.
  6. Firebug is a great combo/tag team tool to use with the Developer toolbar. The DOM inspector, HTTP request logger and header inspector along with the great inline CSS and HTML editing tools just make this another have to have editor tool for your browser.
  7. Colorzilla is another handy little add-on that puts a eyedropper tool in your browser’s status bar. Sample the color of any pixel in your viewport, use the zoom to get nice and precise and then copy the hex color to your clipboard to use in an editor or your image editing program. Saves a lot of back and forth between Photoshop and the editor for me.
  8. VMWare Fusion/Windows. Yes, we live in a windows dominated world. So, for my cross platform testing, I have to have a Windows partition with IE6, 7 and Firefox installed. I use IE Developer toolbars over there and also have used IE Watch in the past to track HTTP requests in the browser that everyone detests. I’m hoping we can drop support for IE6 soon, but I’m not holding my breath.
  9. Pngbehavior/Pngfix. I can’t wait to not need this. But, until IE6 is no longer in my list of browsers to test against, I am going to need to be able to use one of these methods to get PNGs to render as transparent images in this aged browser. I was thinking about not including this in my list, but again, I don’t think I have produced a site in the last several years that didn’t need this.
  10. My Delicious bookmarks. With nearly 800 web design focused bookmarks and no filler, this resource is one I use to solve quirky rendering problems and find inspiration or tips first. It’s like a mini Google of web design tricks, but all tagged by yours truly. Now, I can’t guarantee the answer to everything web is in there, but more than likely there is something I have saved in my account that you can use.

So, there you have it. My must haves. What have I missed? What can’t you live without in the W3C sea? I’m interested in learning more, so as always, let me know what you are using to create your work.

Wish I had been there: Flash on the Beach ’08.

For those of my friends and colleagues who may not follow the Flash design/development topic area as much as I do, Flash on the Beach was last week. A well put together conference in Brighton, this one always seems to shine as a highlight in the conference schedule for a lot of designers. I have not made it to one yet. Alas. This year’s schedule had many of the very best and brightest designers on the speaker list, with a lot of them publishing their notes and slides on their respective sites. Some great content there for those of us who couldn’t make the trip.

Erik Natzke, Peter Elst, Aral Balkan, Keith Peters, Grant Skinner, the list goes on and on. Reading the recaps, including a statement by the conference’s organizer, John Davey, it seems as though one presentation stands out in it’s audacity, poignancy and message enough to really raise some hackles, eyebrows and maybe even a shaking fist or two. Jonathan Harris, designer of We Feel Fine as well as a few other online art pieces, had the last session of the show. Sounds like it was a doozy. Take a look at this shot:

In short, it seems as though Jonathan characterized the bulk of the work in digital art as being “tinkering” or “experiments”. It did not make many of the attendees happy, understandably so. Here is a bit of an outsider, crashing the party with some disheartening words to close a great conference attended by some of the most talented Flash using designers around. I would agree that many of the things I see out there are just that, too… however, the notion that something has to be heavy on message or ideology in order to be important or able to be fully enjoyed seems a bit pretentious to me. Much has been written on the topic, with an excellent post at Peter Elst’s blog featuring comments written by many of the aforementioned Flash talent as well as Jonathan himself. I’ll mention that you really should go check that out, as much of it is very thought provoking.

I have had conversations with a few people in the last several years that result in the same sort of conclusion for me when discussing heady topics like this. Why overanalyze what makes you happy with the work you produce? Sure, self progress and pushing a medium or message are certainly good things to aspire to, but they are not the only things that determine success in your work. We Feel Fine is cool, but is it any better than Joshua Davis’ fine compositions and now equally amazing textile work? How about Natzke’s brilliant stuff? Robert Hodgin’s amazing Processing sketches? A particularly well done Flash game or interactive museum installation? Will any of it have lasting appeal in 25 years+? Well, I think that if anyone asked that before they produced the work, would they even start it?

Probably not nearly as often, and that would be a shame. So with that, please continue your tinkering. I know I am.

A little tip… making a centered experience site. Noscale FTW!

Ah, those pesky placement parameters and CSS attributes that make the perfect publish for a Flash movie an elusive thing. You know the deal. You want an experience site look and feel. Lots of Flash, centered on screen. You don’t want the art to get distorted. You don’t want the art scaling up and filling the window looking childish or crappy. You want the art to stay centered on screen, vertically and horizontally. This isn’t quite as easy as it sounds.

We at the Iona Group recently put up a simple splash page/stealth screen/signup form at doctumlearning.com. Go check it out, and if you are interested in eLearning development, sign up, or contact me… Anyway… It’s a simple Flash movie. Smallish dimensions, and we wanted it to stay that way. So how do we put it in a webpage so it can appear to stretch and span the screen? Here you go…

Placed it on stage with a NOSCALE value for the scale parameter. Beyond that… We set the height and width to a percentage rather than an absolute pixel value. Now, set the “salign” paramter to “lt” to anchor the movie to the left and top of the browser window. After the HTML is ready, it’s time to get the CSS ready…

Here it is:

html, body{
   height:100%;
}

We set the html and body to 100%. That’s it. HTML and CSS in place, then it’s time to get the Flash ready. It may vary a little depending on the look you are going for, but here are the basics… Create your art. Animation, etc. Put all of it in one container movieclip. Mine is called “art”… Here is what the Actionscript looks like to keep it centered on the stage.

//import the needed classses
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
 
// double check and set the align paramters. just being overly safe.
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
 
//turn off the arts visibility
art.visible = false;
 
//add the listeners for the activitation and resize of the stage.
stage.addEventListener(Event.ACTIVATE, activateHandler);
stage.addEventListener(Event.RESIZE, resizeHandler);
 
// on activate, turn on the art's visiblity and set the position in the center of the stage size.
function activateHandler(event:Event):void {
  art.x = stage.stageWidth/2;
  art.y = stage.stageHeight/2;
  art.visible = true;
}
 
// on resize, turn on the art's visiblity and set the position in the center of the stage size.
function resizeHandler(event:Event):void {
   art.x = stage.stageWidth/2;
   art.y = stage.stageHeight/2;
}

That’s it. Hope this helps you. Know any other cool tips on how to position or scale Flash content in the browser? Let me know.