For all the excitement surrounding HTML5, it seems that the idea of “replacing Flash” for video delivery is the one that gets everyone going. But, as is pointed out in those two articles (and numerous others), it’s just not that simple – especially as long as there is a hefty majority of users on Internet Explorer 8 and below. If history is any indication, it will be many, many years before those browsers will disappear. I was recently speaking with some attendees at An Event Apart in Minneapolis who informed me that their IT department had just decided to move the entire organization (a large one, but one who I will not name for obvious reasons) to Internet Explorer… 7!!! Yes, S E V E N! I asked why on earth they weren’t moving to 8 and was told that they had begun testing internal apps on 7 “just before 8 was announced” – and they’d put too much work into it, and would have to start all over on 8. Sheez… but that is the reality in a large part of the corporate world.

Adding to that continued need for Flash are also concerns about DRM, multi-bandwidth delivery, as well as the simple fact that it is far easier for the average web designer/developer to customize a video experience in Flash. Oh, and if the client wants subtitles, cue points, video synchronized with our content it all becomes even more difficult. Not necessarily impossible, just difficult. And at the moment, there’s not even any tooling to help ease the pain. I’m sure it’ll come, and I’m also sure that every single point that I could ever dream up will be addressed – eventually.

For now, we live in a world that requires a multifaceted video approach, and thanks to the HTML5 Pack for Dreamweaver CS5, we can not only build pages using HTML5 elements and style them with CSS3, we also can add HTML5 video. But there are a few things that you need to be aware of in order to deliver a seamless video experience in HTML5, as well as provide a Flash alternative for IE. Let’s take a quick look…

Are you using HTML5 video today? Still using Flash? Join the conversation – I’d love to hear your thoughts…

In about two weeks, I will be headed back to one of my favorite places in the whole world, South Africa, where I will be joined by my colleagues Terry White and Jason Levine. We’ll be loaded up with enough Creative Suite 5 tips and tricks to fill an entire day – literally! So, if you’re in Johannesburg on the 26th of August, be sure to join us. My colleagues in South Africa have the agenda and registration info posted, and they’ve even created an AIR application to keep you up-to-date with all things creative in South Africa – check it out.

Then it’s September – and of course, anyone who knows me knows that that means only one thing – Oktoberfest! Um, I mean, a Creative Suite Masters Tour in Germany! Jason and I have the lederhosen out and we’re ready to take a tour through my “alte Heimat” with stops in Munich, Düsseldorf, Vienna, Hamburg (or Berlin) and Switzerland. We’re going to see if we can get Terry to put on the suspenders with us as we dive deep into Creative Suite goodness this year. More details and registration information will be available shortly. Wenn Sie noch nicht CS5 gesehen haben, oder vielleicht immer noch nicht überzeugt sind, machen Sie mit! (Der Vortrag wird teilweise auf Englisch und teilweise auf Deutsch ausgeführt.)

As always, you can keep an eye on the list of events in the right hand column of this page to find out where I will be speaking. Travel safe, and hope to see you soon!

In the following video, I show you how to use some of the really popular new properties – like using border-radius to add rounded corners, transform to rotate elements and transitions to create the illusion of an animated rollover.

There is a definite caveat that I want to make sure to mention – since CSS3 (and HTML5, of course) is still being developed, not all of the CSS3 properties are available in Dreamweaver CS5 (and in Live View some properties do not render). But even with that caveat, Dreamweaver CS5 now really rocks with CSS3. And again, if you’ve not looked at Dreamweaver lately, you can always download a 30-day trial.

During the keynote session at the Google I/O Conference in San Francisco, Adobe’s CTO, Kevin Lynch, demonstrated an extension to Dreamweaver CS5 which not only adds the new HTML5 semantic elements, but also properties for CSS3, to the authoring environment. With this addition, Dreamweaver CS5 users are provided with code hinting for HTML5 and CSS3 in Code View.

Of course, HTML5 and CSS3 are not “finished” yet, and as such, the team can’t “know” what’s going to be in the final specification. Therefore, the extension provides support for the elements and properties that are “the most complete” at this time. In other words, the elements and properties that, not only appear to be “mature” in the W3C specifications, but that are also gaining support among the browser makers. To this end, basic code hinting support is provided for these CSS3 properties specific to individual browsers (-moz, -webkit and -o).

As a page comes together from the code perspective, it’s also important that we see how that code is being rendered, and this is an area that Dreamweaver has truly shined over the last several releases with its Live View feature (an implementation of WebKit). And with the new extension, the underlying engine of Live View gets an overhaul to allow for the rendering of these new semantic elements, including the much hyped <video> and <audio> elements, along with rendering support for some of the most common CSS3 properties.

And for those looking for a little help in getting started, the extension adds a few new layouts to the CSS Starter Layouts (File>New) which have been marked up with the new HTML5 semantics.

Of course, there’s still work to be done – and rest assured, as Lea Hickman points out in an article in the New York Times, the Dreamweaver team is hard at work and laser-focused on creating the best environment for HTML5 and CSS3 development. Stay tuned for more news and updates as they become available. And if you haven’t already done so, download the Dreamweaver CS5 trial for yourself.

Anyone who knows me (even internally at Adobe), also knows that I am the first person to tell you NOT to build an all Flash site – and don’t use Flash to build your site navigation – or your contact form for that matter. You see, I lived through the stupidity of the “Skip Intro” era – and spent countless hours teaching the emerging Flash designers/developers how to at least optimize what they were doing if I couldn’t convince them “not” do it at all. Back then there were all too many examples of “because I can, I should”.

Don’t get me wrong – there are times when Flash is not only appropriate, it is the only logical choice – and there are even appropriate “all Flash” applications. One great example of this is in the eLearning arena. In fact, speaking of that, it will be interesting to see how schools and other institutions react to the fact that their eLearning content won’t work on the iPlatform. But I digress.

We can waste hours discussing the pros/cons of HTML5 video, which for some reason has overtaken the discussion, but it really isn’t the point of my frustration – and others have already listed the amazing amount of problems with the current spec for HTML5 video, such as the lack of support for DRM, no alpha channel support, next to impossible syncing with timecodes, the need for multiple encodings, no ability to adjust/change streams based upon bandwidth, and the list goes on and on.

The thing that has irritated me most during the past few weeks is listening to the “Flash-haters” say things like “I can’t wait to see my last Flash ad” and “I’ll be so glad when I don’t have to look at irritating Flash crap anymore” – because I think there is one, very important piece of the puzzle that these individuals are missing. They are not “required” to look at any Flash today. Not only can they uninstall the Flash Player very simply, there are also any number of Flash blockers – plugins which turn off Flash content without uninstalling it.

But the big piece that no one (especially the “Flash haters”) seems to even be thinking about… how do you turn off content when it is built using HTML/CSS/Javascript? Think about it – let’s say that “tomorrow” all of the ad networks say “no to Flash ads” and require them in HTML5/CSS/Javascript. First, there is the challenge of HTML element and CSS class naming conventions. Imagine the chaos in your ads/pages when CSS class names or element IDs conflict, or your fancy Javascript calls an element that has the same name as one in your page/ad. Within 5 minutes of the “shift”, I will bet you that the screaming begins about “those damned Canvas advertisements that draw all over my screen”! The only solution will be to disable the very thing that it’s built with. So, go ahead, turn off Javascript – I dare you!

I guess it really boils down to “be careful what you wish for”. Like I said, in today’s web, I have the ability to decide if and/or what I want to see by installing or uninstalling a plugin, or using a plugin to block certain content. But that won’t be possible when you have no way of identifying the “advertisement” from the content of the page.

Consider this some food for thought – let me know what you think.

Creative Suite 5 is shipping!!!

So let’s get this thing cranked up…!

Watching someone install software is even less exciting than watching paint dry – but for any of you who suffered (and there are millions of you out there) through the uninstall/install process of previous versions of Creative Suite,  you can already see that Creative Suite 5 changes the game. (BTW, I would have put that video up as HTML5 video – it’s encoded as H.264 – but then I would also have to encode it into Ogg Theora to be fair AND THEN, I would still have to put it up with a Flash wrapper for the IE crowd… so… I encoded and uploaded once, and delivered in Flash. Guess those of you on the iDevices won’t be able to see it – sorry…)

Now it’s your turn – download the trial or buy/upgrade now – and let us hear from you! After all, we make Creative Suite for you.

For the products that I deal with the most, namely Dreamweaver, Fireworks, Flash and Photoshop, this release really changes the game. As you probably know, I have been involved with every version of Dreamweaver since version 2 (yes, I know that makes me really old). And every time we release a new version, there is always talk of “the best version ever”. This time around is no different – but I mean it… really, I do! And judging from the comments on Twitter during the launch event, the community seems to be blown away as well. You can’t help but shake your head in amazement at the Content Aware Fill demo in Photoshop – and I’ve already been using it on my own photos.

As I’ve had the pleasure of “sneaking” Dreamweaver to some lucky individuals over the last couple of months, it has become quite apparent that the new features, combined with improvements to some existing features, will change not only the way we work, but will hopefully also encourage web designers/developers who “gave up” on Dreamweaver after previous versions to take another look. You can check out the new features on the Dreamweaver CS5 product pages.

And over the next couple of weeks, I am going to walk through the top 10 features of Dreamweaver CS5 more in-depth right here – so be sure to stop back by soon!

Now, while I would like to provide you with all the answers to all of your questions, I can’t – at least, not just yet. You will have to wait until April 12th and our official Launch Event. But that is still 12 days away – so… in order to make the pain even more unbearable, we came up with an idea.

Starting today, April 1st, and continuing every day up to April 12th, we have decided to give away a copy of Creative Suite 5 to one lucky (and quick) individual. We have chosen our friends at Gowalla to help us with this. Here’s how it works - at some random point during the morning,  we will start to hint where the copy will be placed. At noon that day, a copy of CS5 will be “placed” in a top secret location. If you have guessed right, you will be at that location and will check in via Gowalla to see the item, if its not already claimed by a quicker clicker, its yours.

The first person to log into Gowalla after the item is dropped, will be notified that they have “found a virtual copy of Creative Suite 5″ that can be redeemed for a real version by adding the item to their Gowalla collection. The winner will get to choose whether they want Design, Web or Production Premium. See the Terms and Conditions here.

It’s that simple. So grab your running shoes – the first copy of Creative Suite 5 will “appear” some time today… Good Luck!

As a web designer, the need to support Internet Explorer also means that you have to make a ton of other trade-offs. One of which, I myself had (un)happily accepted as a fact of life, the inability to leverage PNGs for transparency. Now, before we go any further, I realize that there are several Javascript approaches to achieving transparency, but none of the ones that I have tried have “worked” in every circumstance. That’s why I was so pleasantly surprised that a solution had been under my nose for many, many years and I simply hadn’t known about it.

First, have a look at the piece of a site design above. As you can see, the designer has called for a drop shadow on the logo. In making the decision about optimization and format for this image, a number of things have to be considered. Obviously, a jpg image could be used if we could guarantee its placement (due to the stripped background) – but this would require quite a bit of tinkering. A gif image is also problematic due to the lack of a solid background – regardless of which color we choose as a matte, we end up with a rather ugly effect as you can see below.

Obviously the only “real” option is to use a png image. But, again, the problem with IE arises. For a beautiful drop shadow effect, we really need to use a PNG 24, but that means an even worse result in IE6 – a solid gray background! So, there just doesn’t seem to be a good solution – or at least, so I thought. So, what’s that solution that was right under my nose?

The solution lies first with your choice of optimization programs. A majority of web designers export their images directly from Photoshop – and under most circumstances that would be okay. (Although I did write a post explaining the “disadvantages” of exporting jpg images from Photoshop.) In this instance, however, Photoshop can’t offer us any help.

But, as you might have guessed, Adobe Fireworks actually provides us a more elegant solution – and one that you can’t get with Photoshop! The secret lies in the ability of Fireworks to create a “semi-transparent” png.

Here’s the same PSD file opened in Fireworks CS4. I’ve chosen the PNG 8 format and the default of Index Transparency. This gives us the exact same result as we saw in Photoshop, where we had chosen a white matte to “mix” with the drop shadow, giving us the ugly white border effect. And, yes, I could have chosen a PNG 8 from Photoshop – but again, I would have gotten the same white border result.

The solution is to optimize with a different transparency option selected. It’s the Alpha Transparency option. When it is selected, you can see that instead of a single color chip becoming transparent, a whole bunch of the chips contain both a transparency AND a color! These are semi-transparent colors – and as you can see, the shadow is blending nicely without any ugly matte border. And size-wise, the image is the same (or even smaller in this case) than the corresponding gif!

Now go ahead and ask – what happens in IE6? Well, I’m glad you asked. And the answer is… absolutely nothing. At least with regard to the semi-transparent pixels. You see, IE6 does support transparency in PNG8′s – but it doesn’t understand the concept of a semi-tranparent pixel. Therefore, instead of placing a gray background on the image like with a PNG 24, IE6 simply ignores the semi-transparent pixels – meaning, they are simply not there.

Of course, more “modern” versions of Internet Explorer do actually understand the semi-transparent pixels, as do all of the standards-based browsers. So, this means that everyone except IE6 visitors will see the nice shadow from the semi-transparent pixels, while IE6 visitors will simply “not know” that they are missing anything.

You can see the same semi-transparent effect happening all over my blog. Look closely at the pieces of tape, and you’ll notice that you can see through them. In other words, the tape is the image, and it is simply being positioned on top of the other elements. In IE6, the pieces of tape simply “disappear”. Pretty cool, huh?! If you don’t happen to have a copy of IE6 laying around, make sure to head over to Adobe BrowserLab where you can compare how the various flavors of browsers will view your page.

This year, I had the pleasure of showing off an experimental project codenamed “Rome”. I’ve received literally hundreds of questions about Rome since that 5 minute demo. And, although I would love to tell you more, unfortunately at this time, my lips must remain sealed. However, for those that missed it, someone took the “liberty” of filming my presentation and posting it to YouTube. So, since it’s on the web, I thought I would help my readers out by linking directly to it. :-)

Now, just don’t ask me if/when/where/how you can get more information about Rome, ‘cuz I can’t tell you. But if you were excited by the demonstration, have thoughts about the “possible” product, feel free to leave a message or send me an email.