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.

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.

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 classsesimport 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 visibilityart.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.

Jack Cafferty on CNN, September 26, 2008. Discussing Gov. Palin’s qualification or lack thereof of becoming VP. Holy Wow. Just wow. Wow.

read more | digg story

This one’s from my Mashups class. The first project, was to build an RSS Reader. I’ve already posted a quick tutorial on how to build an RSS reader with Adobe Flex. Here’s a simple one that uses JQuery to get the feeds and then loop through them to output them to the browser window. Piece of cake for many of you, yes, but if you have never used anything but the DOM and plain ol’ JavaScript, you may be scared by the whole AJAX fad on teh intarwebs these days. JQuery makes it super easy to look like a Javascript rockstar. I teach a lot of students that haven’t ever touched a library of code like JQuery before, so tutorials like this are pretty valuable to some readers..
(more…)

Looks like America might be the newest big startup out there… Check this out:

Now with twice as many bailouts and 100x as many global economic repercussions. Seriously, hearing this clause sends shivers up my spine:

Decisions by the Secretary pursuant to the authority of this Act are non-reviewable and committed to agency discretion, and may not be reviewed by any court of law or any administrative agency.

Are you freaking kidding me? Really? Really? No oversight? No review? No obligation to inform anyone? I’m not sure about you, but this makes me think being in Guantanamo might be preferable to being a taxpayer.

I promise this will be my only post on this subject. Please, if this frightens and angers you as much as it does me, contact your congressmen immediately. I have.

About a year ago The Iona Group created a presentation viewer tool for the International Mission Board. I wrote a post on the tool and explained some of the key features in it. We were contacted by the client several months after the launch and asked to make some UI updates and some feature additions to the tool. We gladly obliged as the client was great to work with, the work was rewarding and the application is just really really cool. In it’s simplicity, it excels at providing a seamless well put together presentation and has some nice social/sharing features that allow the end users to really stretch the tool.the new codebase is live. Check it out here: http://commissionstories.org/

We owe alot of the success of the tool and the revision process to Flex. Honestly, the maintenance and the agile changes required to make it work would have been unnmanageable if developed without the Flex framework. We also use Degrafa in the app, too, so it really does have some nice things running under the hood, too.

It handles pictures, video, audio, SWFs, and the now defunct Flash Paper. It does Ken Burns effects, smooth dissolves and other types of transitions, too. It can go fullscreen, be embbedded in other peoples siites via the share code and can even be downloaded as an EXE or and Adobe Air app. All in all, a very cool ap and one we are proud to be part of.

A little over a year ago, I converted my then dormant domain, Mediadinosaur.com, into a gossip focused news aggregator (previously, it was a media/celeb focused community and blog). It now captures feeds from a number of high profile celebrity rags (Egostastic, TMZ, E!, WWTD, etc) and lets you get your fan fix in one centralized place. I built it in Flex to highlight the ease of use of the Framework and the power that the HTTPService and E4X gives you in getting and parsing XML. I’m using the site as an exercise for my Mashups and RIAs class as an introduction to developing with Flex and a easing into the concept of reading and using XML feeds and services for students that may have never used either of them. So let’s take a look at how this all comes together. (more…)

In my presentation last week at CD2, I mentioned I would provide a list of the resources I recommend using as reference in designing application interfaces. I thought I might get a chance to blog that list this past weekend, but I was a tad busy, designing interfaces for an RIA, naturally. We at Iona have a great app coming soon that uses CakePHP, AJAX, Flex and a whole lot of experience developing superior elearning solutions in order to create a fantastic RIA. That’s pretty much occupying my time right now, but I needed to get this list together.

That said, when I need to sit down in front of my diagramming tool of choice, OmniGraffle, I like to have some references to tap in order to ensure I am making the right choices. I might not use all of these every time, but I certainly do refer to them once and again. I hope you can find a couple of these useful in your work, too.

1. Designing Interfaces – Jennifer Tidwell: A newer book and one that many may not have in their library yet. This book is currently in use in my Mashups and RIAs class, and I can’t recommend it strongly enough. It is a virtual library of great UI analysis. Pretty much every modern UI pattern in play today is dissected and explained when and why it works. A must have.
2. The Visual Display of Quantitative Information -  Edward Tufte: Not really UI focused, but a necessary academic resource for all UI designers to have read. It’s no nonsense approach to data display and intolerance for bad design will not steer you wrong. A bit heady at times, this beautifully printed book is one you can open and read a little bit at a time and keep for years. The information in here is not going out of style anytime soon. I really got a lot out of reading each of the Tufte books, but this is his hallmark title, IMHO.
3. Information Dashboard Design: The Effective Visual Communication of Data – Stephen Few: Lots of pictures and a short book. This title is all about explaining quick and easy data display. Charts, graphs, widgets, etc. Not heavy on interactions, but a good resource for effective infographics.
4. Design of Everday Things – Donald Norman: This book should have you appreciating the nuances in the design of products you use all of the time. Hopefully some of that thought process will rub off on you when create the GUI you’re about to slave on.
5. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition -Stephen Krug: I’m sure most of you have read this. It’s a very common sense approach to basic ideas behind web usability and may be one of the best known books on the subject. For those of you who haven’t picked it up yet, please do so. It may seem sort of obivious to many advanced designers out there, so if you are very experienced with topics like user testing, etc, you can probably skip this one.
6. The Art and Science of CSS -by Jonathan Snook, Steve Smith, Jina Bolton, Cameron Adams, David Johnson : A simple book, no doubt, but this one has some real nuggets of CSS genius in it in regards to styling tables and form widgets. Some nice subtle effects get pulled off in here, so this one is shared with my students very often. Dates, lists, calendars, all kinds of things that can be really really boring screen elements get a bit of polish here. Nice touches all around.
7. Getting Real – 37 Signals: Not really about graphical user interface design at all, but it should definitely help you make some hard choices in your application’s functional design. Think simple, release early, release often. Build half a product, not a half ass product. On and on. Indespensable.
8. GUI Bloopers: Don’ts and Do’s for Software Developers and Web Designers (Interactive Technologies) – Jeff Johnson: This is a tome. Well over 500 pages. This teaches by illustrating major gaffes in UI design. It’s not an overly entertaining book, it’s not meant to be a graphic novel but rather a text book. Many of the apps detailed in here are showing there age, but I believe there is now an updated “2.0″ of this book. I haven’t reviewed that version, though.
9. Human Interface Guidelines – Various: Be it Apple, Sun, IBM, Microsoft or Adobe… all of your favorite dev/design centers have great topics for making informed UI design choices for your audiences. Don’t overlook them just because they are obvious. They get updated often and are pretty much always worth spinning through when starting a new project.
10. Creating Visual Experiences with Flex 3.0 (Developer’s Library) – Juan Sanchez & Andy McIntosh: Not technically available in stores yet, but a great great resource for understanding the powerful design tools in Adobe Flex. I was granted an early copy for review and it was a very satisfying read. RIA design with Flex is as much an art as it is a science, so dig in here. This book is really well laid out and has tons of great images.

So, there you have… some guides I find useful… Of course, I am always looking for new books and sites to add to my collection, so, let me know, what books are you using to help you with app UI design?

090708udells02_flickr
Originally uploaded by Matt Buedel

He’s just a not a little baby anymore. I don’t blog much about my family, but I just love this shot taken by my friend Matt. What a nice photo. My boy, Liam, now 19 months old said “football” for the first time this weekend and he really likes to watch with me. How cute. Like father like son, I guess.