If you are still looking for a Flash/Design conference to attend this summer, I highly recommend Flashbelt.

The best European Flash conference is heading to the states this spring. Flash on the Beach has been happening in Brighton, UK for the last few years and is such a good time, I think everyone should go.

I’ll be heading down to Miami this year to talk about YouTube type things, so if you are curious about using YouTube for a project, or just interested in hearing some stories about a very high performance Flash application, you should come to my session :).

In case you are interested, there’s tons of pictures and writing about past FotB events all over the place. So check it out, and hopefully I’ll see you there.

Flash on the Beach is a fantastic conference in Brighton at the end of September, and it’s one of the best Flash and design conferences to check out.

Registration is now open, so if you’re looking for an excuse to head to the UK, this is it.

Also, next week is Google I/O (Flight of the Conchords are playing a show there!), which I believe still has a few tickets available, and just next month I’ll be heading off to Flashbelt in Minneapolis, so come say ‘Hi’ if you see me wandering around either of these events.

It’s very common to hear people argue about Flash websites or RIAs vs. Ajax websites or RIAs, but this is always the wrong way to approach building any website. Would you have an argument with an architect about whether to build a house out of wood vs concrete? Of course not, they would use each material to build the parts of the house that the respective material is best for. Sometimes you might want to build a shack or barn out of all wood, sometimes you might want to build an all brick house, but many times you’ll want to use the best material for each section of the house. Build the foundation out of concrete, the walls and roof out of wood.

Websites and web applications should be treated the same way. Break things down to a component level and go from there. Use the right tool for each component. If you can do it well with HTML/Javascript, go for it. If it would work out better with Flash, then why waste time recreating something with Javascript that you could build 3 times faster with Flash? There are plenty of great examples of this today around the internet:

One of my favorite examples is Google Finance. They use HTML and Javascript for the stuff that is best suited for that, and then when they need to show a nice graph, they drop in a great interactive Flash graph and talk to it using Javascript as needed. The Flash controls the Javascript, and the Javascript can control the Flash as needed.

Another example is Flickr. They started out using Flash to display all of the images, including the image notes and the other toolbar options along with each image. While this might have been a good choice as the site started out, it was soon replaced by a more efficient HTML version of the toolbar and notes system that works just as well as the Flash version. They did end up keeping one small bit of Flash so users can rotate images and see a preview before they save it.

So the next time you start planning a website and you start thinking: “Hmm, Flash or Ajax?” Instead of looking at it from a site-wide perspective, try thinking about your site as a series of components, and then choose Flash or HTML/Javascript for each individual component instead.

* The OFFF festival flew me out to barcelona in 2001 to show some Flash creatures, but I didn’t give a presentation, they were just hanging out in one of the side rooms.

It even includes a nice class photo! (I’m the one in the middle playing the PSP).

Here are links to the projects we showed or talked about:

• Winged Migration
• Badasssss
• iVillage
• Fog of War
• CosmoGirl
• National Sleep Foundation
• Adobe CS2 Web Photo Galleries (source files)
• FlashObject

And if you couldn’t make it, Brandie posted some pictures.

UPDATE: Here’s the presentation in PDF format. (44MB)

I also installed Adobe’s CS2 suite, and am enjoying the look and feel of the new apps, although I haven’t had much time to explore many of the new features. One small note as far as that goes: The Chopping Block did a bunch of work on sample files and other things for the CS2 release, including my FlashObject code hiding out in the Web Photo Galleries that use Flash.

And last but not least: I’ll be speaking at the next Flash Forward in New York on July 6th to the 8th. I’m sharing a session with Matthew (one of the owners of The Chopping Block) that will be a sort of Chopping Block retrospective with our technical secrets mixed in. Most likely it will be lots of talk about Flash and the role it has played over the last 10 years or so, and where Flash will be going in the near future, and how to use it effectively. Translation: lots of talk about hybrid XHTML/Flash websites and using Javscript (FlashObject) to embed your Flash movies.

Here’s a screenshot of the new player:

This new version should be much more accessible and easier to use, and also takes up fewer system resources, so people who want to tune in a channel and leave it playing in the background while they work should be happier.

This was an excellent project to work on – while I’ve done quite a bit of DHTML/Javascript work in the past, I’ve never used it as a base for an entire application. This was also the first time I used xmlHttpRequest, but I found that applying my Flash knowledge to the AJAX model worked out great – the only tricky part was figuring out a few browser inconsistencies and working around those.

If you want to check it out, you can sign up for a free 3 day trial.

It was a very… ehm… colorful project to work on :). As mentioned in my other post, the site is XHTML 1.0 transitional with CSS used for layout, with a little Flash content peppered in there for some extra flavor. More and more of the sites we are working on these days entail an XHTML/CSS layout and then a few Flash movies embedded around in various locations to spice things up a bit, and I have to say it’s working out great. I really think a lot more designers will go in the direction of hybrid sites rather than the old full Flash site or straight HTML in the coming year.

Another thing to note is the validation problem. It seems that most of the problems (if not all) stem from a few sloppy Javascript embeds and unencoded ampersands that were added in by the iVillage development team. Unfortunately with the way the site was developed – doing the design and template coding first, then integrating those files with the content management system – and without someone on the development side constantly cracking the validation whip, I suppose these things are bound to happen.

Anyway, enjoy the site: www.ivillage.com.

Of special note is the fact that this is the first large scale (high traffic) site that is using my FlashObject embed method. The site has been up for a few weeks so far without a hitch. Unfortunately they seem to have changed the HTML around from what we gave them (it was valid XHTML 1.0 Transitional). Oh well, can’t have everything.

Anyway, the site turned out pretty nice, so go check it out.

So when I see something like this on a website, it makes me cringe (screenshot from eBay’s homepage today):

This is a classic example of what happens when you let your intern make graphics. I added the circles to point out the particularly bad areas in case you aren’t typographically inclined. Photoshop does a terrible job of kerning your small type, and when it’s not anti-aliased, the problem areas stand out much more.

How do you fix it? You could make them go back and manually adjust the spacing between each letter pair until it looks perfect, which could take hours… Or, you could select your type, and in the Character palette in Photoshop turn off the “Fractional widths” option (screenshot below).

This will give you nicely spaced type at small sizes. It’s perfect for making those buttons with the non anti-aliased Verdana type that we have all had to make 20 times in our careers.

Yes, it’s that simple. Now go fix your type.

This was one of the first projects I worked on when I moved to New York. We decided on a CSS layout using XHTML 1.0 transitional (sent as text/html), with some Flash peppered around. Right now only the entertainment section is using the new design, with the other sections to follow as their internal team takes our template and adapts the content in the other sections. Unfortunately the site doesn’t validate because of one little error(!) that I’ll be passing along to their internal team along with a few small visual errors to fix.

It uses a similar method to the suckerfish dropdowns for the flyout menus on the left navigation, and some basic CSS rollovers for the main navigaion tabs at the top.

I would have liked to use my FlashObject embed for the Flash content, but this was handed over to their internal team way before I had even thought it up, so it uses generic Javascript to detect and embed the Flash movies.

UPDATE (12-22-2004): Looks like the one validation error was in some content that has now rotated off of the homepage, so now it validates!

UPDATE (01-31-2005): The whole site went live this week.

Well, why not highlight your own comments on your own blog so your visitors know it’s you?

Here’s how I added it to this blog:

1) I decided to highlight the comments based on my e-mail address. This means that every comment post that uses my e-mail will be marked as ‘special.’

To do this I used a small snippet of PHP code (new code is bold):

<li id="comment-<?php comment_ID() ?>"<?php if ($comment->comment_author_email == "geoff@deconcept.com") { ?> class="mycomment"<?php } ?>>

2) Edit your stylesheet so your posts are different. Since I added the class mycomment to the comments I make, I added this to my stylesheet:

ol#commentlist li.mycomment {
   background-color: #fbfbfb;
   border: solid 1px #457AA5;
}


3) Make sure nobody can post comments by pretending to be you:

I think everyone should do this on their blog anyway, but here it comes in extra handy. I went into ‘options ->discussion’ in wordpress and added my e-mail address to the list under ‘Comment Moderation.’ This assures that if a comment containing my e-mail address anywhere in the post, the comment will be held for approval by me. So every time I post a comment I’ll have to approve it before it shows up, but this isn’t really a big deal and takes almost no time at all to do.

I’m sure there are ways to improve this and make it better, like checking all of the author e-mail addresses, and possibly giving each author their own unique css class so they can each have their own look, and then packaging all of this up into a WordPress plugin… But I’m much too lazy for that, and since this works fine for my single user blog, I’ll probably just leave it like this.

UPDATE (4-28-05): Just saw this post on the WordPress support blog that updates this for use with WordPress 1.5 and also supports alternate post highlighting as well.

DESIGN TECHNOLOGIST
We’re looking for a crack developer with unmatched flash abilities. Successful candidate should end the match in one round based upon his/her XHTML, CSS, Javascript, Actionscript, dynamic Flash experience skills.

DESIGNER
We’re loooking for a designer with fancy foot work and the strong graphic design muscles. Must be able to command the fight from round one right through to the knockout (no tko’s).

PROJECT MANAGER
We’re looking for a manager who is not afraid of stepping into the ring and landing a few solid punches. Must be able to inspire other fighters to go the extra round and not afraid to sometimes help put in that plastic mouthpiece.

WEB PROGRAMMER
We’re looking for the kind of person that it is impossible to make boxing analogies for… Bust out the nerd glasses, we’re looking for programmers. Database architecture, Back end scripting capabilities (PHP, ASP, Java, XML, XSLT), experience with website CMS systems and dynamic Flash integration a plus.

So if you are in New York City, send your info here: jobs@choppingblock.com

Well I had this little idea for a cool new feature they could add:

Right now they have a handy ‘tag’ system that works like keywords. This is cool when you want to see all the photos that are of ‘cats,’ but what if I wanted to see pictures of current events? When Brandon started up photoblogs.org, he had the top 100 photoblogs listed there, and that’s cool and all, but it starts to suck when time goes on, and the list is always roughly the same. So I said “Hey, you should put a ‘recent popular sites’ on there.” So he added this nifty little section called Top newcomers and it works like this:

These are the top 10 registered photoblogs that have been added to Photoblogs.org within the last 4 months. Rankings are derived from the favorites lists of our users. In case of a tie, older sites are ranked higher.

Flickr could benifit from something similar to this: limit the time to one week or maybe even just a few days, and then list which tags are the most popular for that time period. The information may already be there if they store a timestamp with when a photo was tagged, but even if they don’t, it might be pretty easy to add in.

The reason I started thinking about this was on my way home from the coffee shop tonight I saw some people staring up at the moon. Now I consider my self a pretty connected person, and take breaks from work all day to read the goings on in the world and a bunch of blogs too, but for some reason I didn’t hear one peep about this lunar eclipse that happened.

Anyway, imagine that you just read something in the paper about a big protest, or about some huge natural disaster, or a lunar eclipse… and you go to Flickr and look at the recent ‘hot tags’ and get to see tons of images all of the things going on in the world right now (or last week as it may be). Or maybe, you completely miss a lunar eclipse because nobody tells you about it, but you still get to see all the pictures people took because you visit the Flickr ‘hot tags’ page every morning.

I’ve decided to add a permalink symbol (or graphic) to each post to make it more apparent how to link directly to a single post. WordPress (the blogging software this site uses) by default makes the title of each post the permalink for that post. But before I add anything, I thought I would ask and see what everyone thinks these links should look like.

I would venture that the text “Permanent link” is the most user friendly, however, it takes up a lot of space and doesn’t really look very nice. So in trying to balance looks with usability, I want a graphic or symbol that conveys “click me, I’m permanent.”

Here are a few samples from other blogs:

Kottke:

Instapundit:

Anil Dash: ¶

37 Signals SvN:

Waxy.org: (with text “PERM LINK” next to it)

And of course, we always have the generic: #

I also asked Google what it thought a permalink looked like.

I like a couple of these, but I’m not sure they really say “I’m a permanent link.”

The next task is determining placement. Should the permalink go next to the title of the post? Next to the date? Next to the comments link? Maybe we could leave it all alone adjacent to the comments link, or somewhere else new and exciting?

My last comment is on the word ‘permalink.’ Is it descriptive enough for a new internet user to figure out the meaning? I’m not so sure, and I think I’ll be using the words ‘permanent link’ as alternate text for mine.

Maybe it’s time the blogging world got together and established a standard (suggested, of course) graphic or word for these permalinks.