I actually had this post written right before my vacation this summer (the reason for not posting here for 6 weeks!), but somehow managed to lose it. But oh well, the topic is just as hot as ever, as witnessed by several blogposts recently from the likes of the BBC and YouTube. My favorite quote from the YouTube article is “Today, Adobe Flash provides the best platform for YouTube’s video distribution requirements, which is why our primary video player is built with it.” I think that basically sums it up.

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…

Unless you’ve been living under a rock, you know the underlying language of the web, HTML, has begun to (finally) evolve once again with the browsers slowly beginning to support pieces of HTML5 and CSS3. With the release of Dreamweaver CS5, the world’s leading web authoring tool has made huge strides in embracing the evolution of the web, providing an unparalleled ability to style themes for any PHP-based CMS system (WordPress, Drupal and Joomla out of the box, as well as home-grown PHP-based systems). However, for those who have already upgraded and who want to leverage HTML5 and CSS3, you’ve no doubt found that the only “apparent” support for HTML5 in Dreamweaver CS5 is the addition of the HTML5 doctype in the New Document dialog. But now, that’s all changed!

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, (more…)

As much as we would like it to go away, the sad reality of web design today is that there is still a significant number of people out there who surf the web with Internet Explorer 6. And, in many cases, it’s not their fault – they just can’t help themselves! No, really, they can’t – because they work in corporate environments where their IT department has their machines locked down. For those of us who have had the dubious pleasure of experiencing a large corporate IT department, you know how slow they can be in upgrading anything. I’ve heard anecdotes as recently as a few months ago or departments just now beginning their move from Windows 2000. Sad, but true.

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. (more…)

The subject of image optimization always crops up during my seminars, and one of the “oh, wow!” moments for almost everyone in the audience is when I compare JPEG optimization from our beloved Photoshop and Fireworks. As everyone who has seen this knows, we get a much smaller JPEG out of Fireworks. But for those of you who have not had the chance to check this out, I wanted to document it here.

To follow along, you should find your favorite uncompressed picture, or if that’s too difficult to find, you can download my RAW image – even if you try this with a compressed JPEG, you’ll still see a dramatic difference. But the optimal workflow is to start with the highest quality possible. I always shoot in the Raw format for many reasons – not the least of which is that I get that completely uncompressed image. If you have a Raw image, you’ll first make any desired adjustments in Camera Raw and then open it in Photoshop CS4.

Save the file as a PSD, since we’ll need it in a few moments. And if you’re working with a RAW image, that means that you’re probably dealing with a rather large image size – my image is a 12 megapixel shot. For this example, I’ve scaled it down to 350 x 233. In order to get the smallest possible JPEG out of Photoshop, it is important that you do NOT try a “Save As” and select JPEG. Instead, we need to go through the “Save for Web and Devices…” process (in the File menu).

(more…)

It’s unfortunate that most web designers and developers pay little-to-no attention to their sites on anything but a browser running on their local computer monitor. The thought of designing a page to display properly on a mobile device or set-top browser rarely gets any braincells thrown at it. This is somewhat understandable, given the fact that the mobile browsing space is in such disarray.

But it frustrates me to no end when I need to save or print a web page, only to be given something that is at best barely useable. I’m sure most of us have had the pleasure of the four-page-print-phenomenon in which a seemingly simple web page causes the printer to spit out three additional (and completely blank) pages. It’s not rocket science to create a print stylesheet, but only the cream of the crop take the time to do it.

I think one reason that many Dreamweaver users don’t do it, is not only because they have the misconception that it’s difficult, but also because we did a really good job of hiding an essential tool for creating a print stylesheet (or handheld sheet for that matter). (more…)