Everyone makes resolutions for the New Year, right? Quit smoking, eat better, be nicer, be more productive, etc etc. How about resolutions for your web presence and activity? What things should be considering doing, or STOP doing online to maximize 2010? After all, it is the year we make contact, so when the monolith comes calling, you want to be ready! Here’s what I am planning on working on:

• Understanding Twitter/Facebook/Linkedin Technical integration points better and using them! – Yes, all these sites can speak to each other. But should they? And should they always be talking to each other? Probably not always. I need to explore a more friends and family friendly approach to sharing my statuses via Twitter and Facebook. I frequently leave my non-geek friends scratching their heads. Hmm.
• Building out some more web-service based mashups – In 2008 I built a lot of mashups. Some for clients, most for fun. In 2009 at Iona, we’ve built a few site features out for clients leveraging various web services, but by and large it was pretty quiet for me personally on this front. I need to get back into it!
• Reskinning my blog – I’m coming on year 3 of this design. Time for something new.
• Refining my following list on Twitter and building some more lists – I think I over followed when I joined Twitter and I’m working to rectify that. Too many auto replying bots, too many marketing feeds, on and on. Also in the second half of 2009, Twitter launched lists. I have made a couple of them so far, but as they continue to build out this feature I intend to use it.
• Using Social Media Better When at Conferences and Events – Nothing is more annoying in a Twitter feed or your Facebook newsfeed than seeing a constant bombardment of updates from someone at a conference that feels as though every utterance coming from the speaker they are watching needs to be shared to all from the mountaintops. I have done this more than once. Not happening this year. For a great list of other things you should stop Twittering about, check this out.

So what are you focusing on this year? May I make a few suggestions, if you have chosen any? Here we go.

• Build Something – For Real – Stop being a flapping head social media douche and really make something! Some videos, a real website without your stupid grinning mug on it, an app, a mashup, an experience. Sure, maybe this sounds cynical, and maybe it’s a little bit much, but I’m just so tired of seeing the same old tired routine by “strategists”. Nearly all of ‘em just parrot whatever Seth Godin, Gary V, Chris Brogan or Jason Fried say and virtually all of ‘em are actually contributing very little to the conversation or the larger landscape.
• Stop Talking About “Maxmizing Your Personal Brand’s Reach by Microblogging”
  – Or whatever other crap your inner social media kissass self thinks will get you some sucker to part with their money. At this point, major corporations have “social media policies”. Little companies either get it or they probably never will. Where does this leave you? Well, if you were a “web designer” before all of this, you probably still are now. If you were a talentless hanger-on-er before… well, you can probably guess.
• Strongly question or reconsider what your “SEO Expert” is suggesting.
  - Do they Have your web copy looking like it was written by a 3rd grader? They are doing it wrong. With properly written markup and a decent product message, you don’t need to Google bomb your way to the top of the rankings. Certainly, writing repetitive boring copy may have its advantages (it’s easy and doesn’t take much creativity) and can sometimes get you higher rankings, but at what cost… You ultimately devalue your organic search results by not giving the user and deeper content once they visit your site.
• Don’t Build a Microsite without a Media Buying Plan and determing the Metrics Package and how it’s going to be implemented. – You would not believe how often new microsites sites pop up for products and services if you are not involved in this industry. Weekly, there are dozens featured on Marketing and Advertising blogs. So often when you visit the site and poke around the source code, you notice there is not an analytics package in place. Unreal. What a waste of money. Make a pledge to your budget to not launch a site without measuring how it’s working.
• If You Don’t Have a Business Twitter or Facebook Account, You Absolutely Need One – With these sites drawing the type of traffic they do, if your business is not on them, you are really missing out. Even if you are a straight up B2B services company and do very little public marketing, you can find value in being on these sites. If nothing else, you should be there in order to at least protect your brand name in the space and prevent it being hijacked.

About a month ago I got two URL shortening services up and running. I launched http://fnla.me and http://fnaweso.me, learn more about the launch here. Now, I’ve updated them. I’ve added some new features, stats, for one. Additionally, you can now add the shortened link to your clipboard with a single click. Keep in mind, I still have the bookmarklets and an API available to you if you want!

To see how many users have clicked on a link you create in either service, simply add a “~” after the URL in your browser. Your link will be displayed along with the number of clicks you’ve received since it was created. Cool, eh?

The services are available in the AIR app, Shrinkadoo, so give that app a shot. If you maintain a Twitter app or would want to add the services to another website or service, let me know, I’d love to be included.

This past weekend, I spent a little time getting my own URL shortening services up and running. I launched http://fnla.me and http://fnaweso.me on Saturday, August 15th, 2009. Crazy, huh? With so many services out there already, why would anyone waste their time on such a project? Does the world really need more shorteners? What do these two shorteners provide that wasn’t already available in the myriad other services out there like TinyURL, Bit.Ly and the rest? Good questions.

At last estimate there are something like 90+ publicly known URL shorteners out there. There is most likely a lot more than those in the wild, though. With this many out there, it’s difficult to know which one to use. With the high profile blowout of Tr.im, and the subsequent rebirth as an Open Source toolkit it’s even muddier. How do you know you links will be safe? How can you protect your self against Social Media Link Rot? This will assist me in making sure my shared links are indeed safe!

There are a lot of opinions on URL shorteners out there, ranging from condemnation, to simple quiet acceptance. I was vehemently against them until relatively recently, as I saw them as yet another creaky layer of redirection and pointers in the web ready to break down at any moment due to another server going down or a service running out of $.

For now, the services are pretty spartan, they simply take a URL and shorten it using a base 36 algorithm. Custom URLs are also possible. I do indeed have a number of features planned like stats, import/export and others, but it all takes time. I do hope that the service will prove to be useful to others, but making money on it or getting millions of shortened URLs isn’t my main goal. I’m building this because it seemed like a fun project to take on over a weekend.

One thing I really like about the domains I have chosen for my shorteners is that the URLs allow for some personality to come through. Is the link lame content? Politically devisive? Something you can’t believe? Than you can use http://fnla.me. On the other hand, if the content is something you can get behind and highly recommend, use http://fnaweso.me

Both sites are powered by the open source URLShortProject currently.

So what do you think? Do you have a URL shortener you have created? Care to share it?

I may be one of the most conflicted web designers on the planet. Seriously. I write Flash/Flex code about as often as I work in HTML/CSS. I love ‘em both. I hate ‘em both. Each tool has their own pluses and minuses. I speak often about my love for Flash here, so let’s change gears for a second. Let’s get provocative even… It’s got to be said. What the fuck is the deal with these standards writers, working groups and developers these days?

Why do I ask this… Well, you all have Flash/Silverlight on the ropes, but you are giving them a free pass. How so? With the release of HTML 5’s video tag, canvas, yummy semantic tags and other advanced markup goodies… pretty much any major site, (eg, Facebook, YouTube, Google Video, Vimeo, etc), could just about up and walk away from Flash with the next major revision of Internet Explorer (hopefully 9 will come around). You see, Safari 4, Firefox 3.5 are out and they like to party. They’re out playing video all night long and swinging from the rafters. The biggest draw on the web today, video, is by and large delivered via Flash. Now, I wouldn’t be so brash as to say that Flash’s days are numbered by any stretch by this developing situation. There are a lot of things that Flash can do that simply can’t be replicated, even with JQuery (my fave JS framework), Processing.js or the new Scripty 2. However, these new browsers really take care of a ton of things that Flash is needed for right now like video playback and basic RIA implementations.

I don’t mean to be disrespectful to the standards group, W3C, etc, but with the competing standard, arguably, an anti-standard, Flash, on the ropes, why are you not focusing and assisting the devs in the trenches, the browser and tool developers and the web designers in the cube farms at MS, Adobe, etc? It seems as though there is a fracturing, rather than a coalescing of resources and forces in the standards arena. Don’t believe me? Check this out. And this. And then for a laugh, this. It’s a bit liek the wild west again. I’m getting flashbacks to 1999-2000, when tables and spacer.gifs were clutched in the dying grips of every SimpleText coder and every GifBuilder jockey.

Sound audacious? I know, right. But look at the evidence. Twitter is abuzz with the recent additions to HTML5, with new hot samples being posted in playgrounds daily, what it means for Flash devs and on and on (simply run a search there and see). Beyond that, a number of high profile standards focused designers are on the warpath right now, speaking out and writing with a virulence not seen since the height of the browser wars (yes, I’m that old). For example, Zeldman has had a series of fantastic posts lately laying it out on the line talking about the demise of the XHTML standards group, defending the use of standards in the face of adversity and Eric Meyer has recently started giving a talk on “how Javascript will save us all”, in which he recommends using Javscript (favoring no specific framework, really) to do things that CSS3 and HTML5 do quite well. There are a number of other examples out there just like this. ‚Äì Full disclosure, I use both Meyer’s and Zeldman’s books in my classes.

Talk about cutting off your nose and all of that rot. I love standards just as much as anyone, but when the big boys are changing their tunes about what constitutes good standards implementation (separate content – HTML from presentation – CSS and behavior – JS) in order to remain within the toolset and bowing down to the same boards they fought against a decade ago to get CSS2 adopted, I start to get a bit squeamish. You see, I have to teach this stuff to students. Teaching standards based design was before a lot like teaching a foreign language. A language a bit like Japanese in that it had rules that are reasonable cut and dry and work well with each other because agreement on how they work was decided upon and then used! Now, it’s like a mish-mash of bad drunken Engrish. Too many exceptions, IMHO. It’s like “i before e”, but with end tags and doctypes. *Blech*

Am I abandoning web standards? Nope. Though, I’ll probably be a little more likely to make an exception to the rule in what constitutes a good use case for it vs a plug-in, though. After all, we have until 2022, right? Thoughts? What are you doing to keep your standards based design skills sharp? My advice, just keep swimming.

Just a quick note to clue my visitors in on a fantastic little Firefox addon/cross platform app named Service Capture. From the site…

ServiceCapture runs on your computer(pc or mac) and captures all HTTP traffic sent from your browser or IDE. It is designed to help Rich Internet Application(RIA) developers in the debugging, analysis, and testing of their applications.

It is a time saver and a conundrum killer. It’s a verbose little HTTP sniffer, Flash tracer and bandwidth simulator all in one. It thoroughly rocks. One thing that it certainly shows, is just how many people publish SWF content without either removing or turning off trace statements before pushing files to their sites.

Besides Flash Trace statements, it shows XML files, AMF requests, system logs and tons of other stuff. It’s $35 well spent. I’m always looking for little utilities like this to help me out, so if you have some you like to use, let me know, I’ll check ‘em out.

FTA: The real problem for Dreamweaver and for its users is that the nature of the web is changing dramatically. Dynamically-generated web applications, from Amazon right down to the humble blog, all offer much more – in-built commenting, voting, RSS feeds, etc Рthan the best sites built on static HTML can ever hope to provide. Read it here.

My take… while I don’t use Dreamweaver, and I don’t like WYSIWYG editors in general, I feel the author is so misguided here in his criticism of the well known Adobe web design tool. He compares Dreamweaver to Drupal and Joomla (two market leading open source content management systems), pointing out that most sites of any scale these days rely on application functionality, ie. RSS, content rating, comments, etc.

Now, while these “Web 2.0″ features certainly are important for user engagement, the actual tool you use for creating the design template used in a site powered by a CMS DOESN’T MATTER! Dreamweaver’s use doesn’t prohibit you from using a CMS, and vice versa. I’m not sure what Tom Arah, the original author of the article, does for a living when he isn’t writing half baked articles for PCPro, but I would be very surprised if it were web design. I can imagine him in a client meeting telling a customer that the Web Server they have doesn’t work with Firefox or that JPGs are obsolete because of iPhones or JQuery is a new database language… Ooh I love unrelated hyperbolic comparisons. Too fun… Let’s try some more. Submit a completely ridiculous web design comparison to my comments here. I need a laugh.

Now, that aside, I do have trouble believing that Dreamweaver is as relevant now as it was a handful of years of ago. With tools like Coda and Expresso out in full force, Eclipse/Aptana offering powerful debugging features and dozens of other free and easy to use text editors out there, I have to think that a WYSIWYG editors appeal is much more limited that it was then. With Web Developer toolbars, Firebug,¬† Safari’s developer toolbar and tons of other design aids for your browser, a design view is pretty pontless IMHO. Simply write your markup, edit or tweak your CSS and tab to a browser window and refresh. Web design, in the world of media production and interactive development is about the easiest deliverable you can preview. What I mean here is that there is virtuall no penalty for tweaking and previewing. Not so in video or compositing, any substantial change requires a new render or RAM preview. This is also not the case in RIA development. You may need to compile your runtime (SWF, Silverlight, etc), upload it to your server and make a tweak to the middleware code, too… You get what I am saying, i think. A design time WYSIWYG offers no real benefit. When you consider that Dreamweaver’s WYSIWYG rendering engine is not Gecko, Explorer or Webkit, it becomes clear that WYSIWYG is actually something more like “What You See Is Wishful thinking Ya Goober” – WYSIWtYG!

That said, Dreamweaver’s editor tool isn’t that bad, and when used only a text editor, it’s okay. It is expensive for that purpose alone though, so unless you are using the site management tools (which I don’t care for – it’s FTP is atrocious), or it’s server behaviors (which are pretty limiting and notoriously brittle – not allowing much customization), or it’s AJAX editing (I won’t touch Spry, sorry) then you may just want to move on. So it’s not so much dying, at least not from the perspective mentioned by Tom Arah, it’s just fading into irrelevance due to lack of upkeep.

read more | digg story

I teach a web design course at Bradley University. “Designing for the World Wide Web” is the course title. The focus of the course is standards based web design using CSS and XHTML, coupled with a little bit of behavior layer DOM scripting using JavaScript. We use JS to place media files and validate some forms, etc. After the first couple classes and some demos on how to create a standards compliant XHTML document, we move on to teaching CSS. That’s where this post comes in. One of the best places on the web to see the power of CSS is of course CSSZenGarden.com, and I like to use that site as a good intro to CSS design and using web design tools like Firebug, and the WebDeveloper toolbar. The assignment is fairly straight-forward.

1. Visit the site, save the HTML file to your computer.
2. Make a CSS file and save it in the same directory as your HTML file.
3. You are allowed to make only one edit to the HTML file, changing the import statement to load in your newly created CSS file.
4. Choose a non Flash based web site design you would like to emulate and open it up in your web browser. (It works best if the site is a site designed with standards, using CSS for layout instead of tables, etc.) The idea is that you are attempting to recreate a site’s style, not one specific page. Therefore, it may be best to open up several pages of the site to see how images, lists, menus, headers, paragraphs etc are handled in various types of layouts and situations.
5. Use Firebug’s inspection tools or the WebDeveloper’s Toolbar inspection set to discern what sorts of CSS properties are being modified. Make note of these.
6. Apply the required CSS attributes to our local copy of CSS Zen Garden one by one.
7. Work the page’s typography first, then padding and element margins, borders and backgrounds next, finalizing on placing the elements on page using floats, positioning, etc. You may need to create, make or replicate images in order to fully realize your design.
8. Finish your work and upload it!

This is a relatively simple project and works well on so many levels. It gets you up to speed on what attributes CSS can modify on elements in an HTML page. It allows you as a designer to focus only on the style and not writing page structure or HTML markup. It serves a great introduction to advanced CSS concepts like contextual/descendant selectors in order to introduce variety in the designs and style the various lists in different fashions. It works as a job training aid because, often as a junior webdesigner on a project you may be required to follow the lead established by another designer on a project. It forces you to be creative with your CSS because you don’t have any flexibility to change the markup. It teaches you how to analyze a page’s design in a very methodical, detail oriented fashion. It requires that you be flexible and able to interpret rules that may use relative measurements that no longer apply to your more scaled back implementation. I like that the students are working towards a design goal in mind, rather then having to concept it themselves, allowing them to focus on the implementation. It’s easy to quantify how closely a design mimics the look of something else.

I am consistently amazed with the quality of work done by the students on this project. Sure there are stumbling blocks along the way, but overall it’s a resounding success and a great way to get student thinking about rules based design for the web.

Some things I don’t focus on in this assignment:

1. IE compatibility, since we can’t create conditional stylesheets in the markup it would be difficult to expect aesthetic parity in Internet Explorer.
2. Doing things the “exactly right” way. If a student needs to use large negative margins or non standard positioning techniques to achieve the look and feel of the other site, I’m fine with that.
3. Perfect image quality. It would be a lot to ask to have the new students attempt graphic design techniques used on some of these sites.

So, here are a couple sample pages I have created. This one is done in the style of my blog. This one looks like an Adobe.com page. Each one looks pretty darn close to the inspiration site and didn’t require and editing of the markup.

How about you? Have you ever created a CSSZen Garden page? If you are teaching CSS to students, how do you get them started? I’m always interested in hearing

I have shared tools, and components and source code libraries here in the past, primarily focusing on free and open-source libraries. I do enjoy using and getting to contribute to these community projects, but sometimes, there is no way to get around it, you just have to buy a component or plug-in to get the project done. When doing so, it’s really difficult to separate the wheat from the chaff. Here are a few commercially available tools or components that I have used that aid in creating web, RIA or other rich-media experiences like kiosks or tradeshow pieces. There are some add-ons that I have used in the past that I haven’t included here because they were troublesome or too buggy for final use, so view this as a list of only the ones that have stayed in my toolbox after a successful deployment.

• FlashLoaded’s 3D Wall/Spiral/Tube, etc – If you want to create a simple 3D gallery or touch-panel display, need it done quickly and don’t have a lot of time to to learn Papervision, this relatively inexpensive group of component will achieve most of your needs. It’s pretty much bug free and does have a fairly large and accessible API for managing and working with the properties, methods and events in the component. You can integrate video into the the 3d planes, and put interactive SWFs in the panels as well. Pretty cool. That said, if you are already adept at Papervision and have a grasp on how you might want to build image galleries using the library, this product would have very little use to use to you. FlashLoaded does a respectable job at offering support, updating the components when there are bugs or issues and even adding features after a components release, offering updates free of charge to registered purchasers. They are worth a look.

• JumpEye Component’s Menus – JumpEye is a well known rich media design/development consulting company, but they also offer a wide variety of components for sale at their JumpEyeComponents.com site. The menus they have there are pretty good in particular, and fill the void created after Adobe Flash CS3’s release, when the more advanced menu components and accordion panel were inexplicably removed from the product. It’s a shame you have to purchase a replacement for a component that Flash used to ship with straight from Adobe, but it seems that advanced UI components, etc have been migrated out of Flash and into Flex. This site has a number of add-ons available that help you overcome that shortcoming if you need to produce some advanced UI in Flash. For the price, it’s tough to argue for custom development of a menu when a deadline is looming. Highly cusomtizable and powered by XML, the components are flexible enough to make them useful for a wide variety of implementations. Find out more here.

• IconFactory’s IconBuilder- Do you find yourself needing to produce a wide variety of icons for AIR apps, Windows apps, Mac apps, websites, favicons, etc? If so, this will save you a ton of time. If all you ever need is a Favicon from time to time, this probably overkill, but Iconfactory’s IconBuilder is great for simplifying the process needed when moving through the design process for multi-sized icons inside of Photoshop or Fireworks. It can create icons of pretty much every size dimension and palette, even helping you verify how the color indexing will look for final output to older, or smaller icons used in list views, etc. It’s pretty indispensable for that reason. If you are delivering custom apps for clients and you aren’t creating custom icons for those apps, step up to the plate and add some polish to your deliverables. It really finishes off the presentation. This app is $79 for Mac users, $49 for Windows users, but the Mac version does have a few extra niceties for the extra $.

• ixis’s (formerly Softheap) Public PC Desktop – Have you ever produced a kiosk for use at a trade show, exhibit or other installation? How did you lock it down? You know, prevent those pesky users from monkeying with the system? An absolute necessity. This $80 app is super handy for keeping nosy people out of the OS. You can lock down the computer via a white-list for applications, URLs, services, firewalls/proxies or pretty much anything else. Additionally on lockdown, you can have Public PC desktop auto launch your kiosk app. This helps in the daily routine for a exhibit when the computer reboots after being off for the evening. I wouldn’t dream of putting in a touchscreen at a remote location that didn’t have some level of protection on it. This is a key step in setting up that final disk image that gets shipped on pretty much any project we do. This app is by no means the only out there that does this sort of thing, but is probably the easiest to use that still offeres enough configurability to fit your clients needs. The site is pretty poorly designed, but here is a link directly to the product page.

• Zoomifyer – This app gets a bit of use from time to time by me. The intelligent slicing, loading and simple navigation UI it adds for deep image viewing, panning and scrolling is pretty nice. Advanced hotspots, event management and other interactions make this a very nice choice for making an image viewer app. A simple version does ship with Photoshop, but the full product adds a suite of bells and whistles that make the upgrade worth it. To do this sort of thing by hand, you’d need an army of graphic prep artists and a very regimented workflow to ensure the proper consistency. Check out some samples here.

• Multidmedia’s Zinc – More than just a plug-in, this IDE allows for Mac, Windows, and Linux applicaiton compilation. Wht’s the big deal? Why would you use this instead of AIR? Well, not a lot of major client I encounter have made the jump to AIR yet. On top of that, Zinc compiled apps have deeper access to OS level APIs, file IO, Database connections and much much more. This compiler really does take your Flex or Flash app and turn it into a desktop program. It’s got an impressive list of features. My main complaint against it is that the developers seem to prize a rapid release cycle over a robust testing cycle, so sometimes even minor point updates can break previously stable code. I have learned this over the years and now only update Zinc after reading the suport forums and ensuring that the most recent release doesn’t mess things up. This is by far the best SWF to EXE tool out there IMHO, and I have used pretty much all of them. Check it out. Absolutely worth the $ if you have projects that require this sort of functionality.

So there you go, a group of tools I have found useful in my projects over the last couple of years. These get used again and again by me and my team, and maybe you will find a use for them as well. Got others in your toolbox you keep going back to? Share ‘em with me by leaving a comment.

Prior to working at The Iona Group and spending time freelancing doing flash game development and other assorted web design tomfoolery, I designed websties for Rollingstone, Downbeat, TheSource, Tunes.com and Emusic. It was a great gig. Lots of fun. Fun people, great music, awesome subject matter. Then the dotcom bomb hit. I was laid off along with virtually everyone in my Chicago office. That said, I (was) am a huge music fan. Love the feel of a new set of tracks. Love buying tunes, love downloading them love the feel of a new, well packaged disc when I get one. I have a iTunes library that would span a couple iPod classics. I am a completist. I have all of Nine Inch Nails stuff. Suicidal Tendencies. Pavement. Jon Spencer Blues Explosion. Poster Children. Guided By Voices (I’m not sure if I actually have all of this… does anyone?) TRS-80, Muse, Radiohead. I also love when a new music site launches. Pitchfork, Pandora, Last.fm, all of em. I like music blogs (music for robots ftw) and love to watch videos online.

You get the picture. I love music.
(more…)

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:

I’ve 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 you’re 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.