Today is a historic day in the world of web design and development because our jobs just got a lot easier with the preview release of BrowserLab, a future web-based service from Adobe, now available on Adobe Labs. BrowserLab takes the drudgery out of finding the bugs and differences in your pages between the different browsers and browser versions.

Of course, the idea of a service like this is not new - but BrowserLab offers a unique feature called “onion skin view”, which allows you to overlay the view from the selected browsers on top of each other. This way it’s easy to see the differences between the browser renderings. And if you are a Dreamweaver CS4 user, it gets even better - there is a new extension which will add BrowserLab to your Preview in Browser list. This means that you don’t even have to upload your pages to your site to have BrowserLab show you “what’s up”.

No, you’re not seeing double - oh, wait… you ARE seeing double!

In fact, I’ve been using BrowserLab quite a bit and it even helped me discover a “bug” right here in my blog when it was viewed in Internet Explorer 6 (and no, you can’t see it - because I fixed it immediately). As a Mac user, I keep VMWare running all the time (our corporate email is run off of an Exchange server, if you must know) and that means that I have IE available - but only as IE 8. And the idea of firing up another instance just to check IE 6 pains me to no end. So, of course, BrowserLab has got me (virtually) jumping up and down! I hope you’ll find it as usual as I already have. And be sure to post your comments and suggestions - afterall, that’s the reason that we put this stuff out there early. We want your feedback!

First of all, an apology to all of my “mates” down under. I promised to have my slides up last week, but… well… you know the way it goes… I’ll blame it on the jet-lag! Anyway, I’ve finally gotten the slides edited and they are now available for your downloading pleasure. Obviously it’s hard to convey in a slide what can easily be explained in an in-person setting like WebDU. And the fact that I like to actually write code during my presentations makes it even more difficult.

Therefore, I’ve gone back through the slide deck and tried to annotate some of the “live code” - and here it is. Of course, there’s still tons of information that will fall through the cracks - otherwise you’d be downloading a 300 page PDF file… So, if you do have questions or comments, please feel free to either leave a comment here, or contact me via email (the address is in the About pod on the left).

Lastly, I’d like to publicly express my thanks to Geoff Bowers and his Daemon crew for another brilliant conference! WebDU continues to be one of the shining stars on the yearly conference schedule - from the venue (um… it’s Sydney… need I say more?!), to the organizers (one of the best organized conferences that I’ve ever attended), to the astute group of speakers (you won’t find a better line-up anywhere - year after year), and finally to those that matter most, the attendees. This year, as always, you inspired us as speakers more than you can know. I appreciated every conversation - and enjoyed the “challenging” questions as much as the easy ones (like which pub is my favorite in Sydney…)!

I’ve already started counting the days until next years conference… well… actually I haven’t really… because Geoff hasn’t yet said “when” we’ll all be meeting again. But rest assured, as soon as he does, I’ll have it reserved on my calendar! Cheers!

If you’re in the business of building Rich Internet Applications using Flash or Flex technologies, today is your lucky day. You’ll want to run, not walk, straight over to Adobe Labs, where you will find beta releases of the upcoming (and newly renamed) Flash Builder 4, the Flex 4 SDK and the highly anticipated Flash Catalyst.

In addition to the downloads themselves, there are a number of resources to help you get started. Tim Buntel has a “What’s new” article and video tour of Flash Builder, along with Matt Chotin’s article about the new SDK.

And with the posting of Flash Catalyst, designers and developers alike will finally get to play with the tool that I’m sure is going to revolutionize the way that applications are built. I’ve already had the pleasure of working with Flash Catalyst for quite some time, and I’ve been really impressed - not only at the quality of these early builds of a brand new product, but also at the willingness of the Flash Catalyst team to listen to and act on suggestions, comments and criticism. Now, it’s your turn to help shape these products. So, quit reading this and get downloading!

You know what the problem with a program like Dreamweaver (or Flash or Photoshop or Illustrator…) is? It’s that the programs are “grown-up”. In Dreamweaver’s case, it’s over 10 years old - an eternity in software - and with each new version, new features enter the application. That means that we have to learn new keyboard shortcuts, new settings in the Preferences, and figure out how to use new tools. All of the newness and shininess is designed to make us more productive (hopefully), but I’ve begun to realize that at the same time, it can be detrimental. If you’re like me, there’s only so much gray matter left, and trying to pack all the new stuff in there means that I have to (unintentionally, of course) forget some things that I’ve known for years.

As I was recently preparing a session for a conference, I ran into one such example. Those who know me know that I spend most every day doing some kind of Javascript development. As such, I have to write <script type=”text/javascript”></script> an awful lot. Well, it occurred to me that Dreamweaver has a tool on the Insert > Common panel to accomplish this very thing. A single click triggers a dialog box through which I can select to link to an external Javascript file, or into which I can begin to type my script. Being able to quickly navigate to a file is helpful and more productive than typing by hand. But when I want to actually type a script myself, well, the dialog is confining. It doesn’t have code-hinting or completion, and it’s just too small. Frustratingly, I felt like I was “almost” there - if only I could bypass the dialog and just have it write the open/close of the script block for me, I’d be golden.

That’s when I remembered an old trick. For any of the elements in Dreamweaver’s Insert panel that cause a dialog to open before they insert the code into the page, all you need to do is to hold down the Option key when clicking upon the element. This temporarily suppresses the dialog and inserts the “default” code for that element into the page. In my case, just the <script type=”text/javascript”></script> with a blank line in between to begin writing my script. In fact, if you want to get any faster, you can turn the dialogs off completely. In the Preferences>General section, uncheck the option for showing the dialog when inserting elements. If you ever need a dialog, then the Option key does the reverse - opening the dialog for that single insert. Hope this helps… Happy coding!

At the risk of offending some, and as a follow-on to my previous post… Stephanie and I were just discussing the topic of Twitter followers and the significance attributed to the number of followers one has. In fact, the Washington Post posted an article about the same thing.

As suggested in the Post’s article, some people (such as Guy Kawasaki) seem to think that a measure of a person’s worth is the number of followers they have. But with all due respect to Guy, Ashton, and probably Oprah herself very soon, for me and many of the people that I know, Twitter is about something much different. I think it needs to be understood that some of us use Twitter to keep in touch and communicate with people that we actually know (or, at least, pretend to know - in the virtual sense).

In the “olden days” we wrote letters to the people “in our circle of friends/family” - remember dreading the Christmas card ritual every year? Then along came the web and we began to email the aforementioned circle - and we expanded it to include those which wouldn’t have gotten a Christmas card, but with whom we had a cursory relationship. We would “touch base” every so often - but most importantly, no longer just at holidays. Instant Messaging moved the needle again - but rarely would I share my IM name with someone that I had just met at a tradeshow or conference. With Twitter, the game changed completely. As a case in point, I literally just saw a billboard on the side of the highway with NO web address! Instead it simply stated that you could contact the company “@TheCompany’sNameWasHere”.

The fact that Twitter allows literally anyone to follow my every 140 characters (unless I protect my updates which seems to defeat the purpose of Twitter), means that I regularly awake to find that I have gained 10, 20, 30 or more followers while I slept. (I hope they didn’t hear me snoring…!)

Therefore, when I get a new follower, I routinely check their “stream”. The first thing that I do is look at how many followers they have, and how many they follow - as well as to read their Bio. If you’re in my industry (web design/development, web standards, Ajax), I’ll probably follow you back. If I’ve met you in person, or you are someone who “knows someone that I know”, you’re probably gonna be on my follow list. And finally, even if I don’t know you, you’re not in my “circle”, but you’re hilarious - you’ll definitely get a follow. (I’d send a shout-out to several of those that I follow for that reason, but they might be embarrased…). However, if you are up in the thousands (in terms of people you follow), it’s VERY unlikely that I will follow you back. Why? Because you won’t ever see/hear me.

For me, Twitter is about my friends/acquaintances. The list of people that I follow is a list of the people that I would like to invite to a special party or event - or that I, at the very least, have a professional connection with. They may not be my “best” friends or closest colleagues, but they are significant enough in my world that I actually want to hear how their day went or what their significant other did, or what the dog decided to chew on today. That’s not to say that I “don’t care” if I don’t follow you back. It’s just that I want to make sure that I can hear what my “friends” have to say - and anyone following more than 500 people can’t tell me that that is possible (unless they have people who tweet for them - like Guy).

As you probably have seen over the last several months, there has been a dramatic increase in the “awareness” of social media outside of the core “geek” crowd. In fact, Twitter has become so mainstream that the likes of CNN and Ashton Kutcher are battling to become the first Twitterer to reach 1 million followers. Other celebrities have been quick to jump on the bandwagon as well. I even had the pleasure of being at the first Tweet-up for fans of a sports team when the Phoenix Suns got a bunch of us together for a game and some after-game socializing which culminated in the “surprise” appearance of Shaq, aka @The_Real_Shaq. My fiance, Stephanie, and my son, Noah, got lucky enough to even get a picture with him.

On Friday, April 17th, Twitter will go even more mainstream. At 4pm EST, the one and only Oprah Winfrey will enter the Twitterverse (although as of this writing, she already has 56000+ followers without even having posted a single Tweet). I’m sure you’re asking yourself “Greg, do you actually watch Oprah…?!” Well, no. Although I have been known to have it on “in the background” while working in a hotel room.

The excitement surrounding Oprah’s interest in Twitter is much more narcissistic. While going about our day today, Stephanie and I received an email from one of Oprah’s producers. Apparently in doing their research for the show, they came across my Twitter proposal - which has now been acknowledged as the “first Twitter proposal“. According to the producer, we’ll be mentioned toward the end of the show - they’ve asked our permission to republish our Twitter exchange as well as to show a picture of us on-air. Too cool!

We’ll have our Tivo set - but if you stumble across the piece on YouTube, be sure to let me know! Who knows, maybe we’ll have to put Oprah on the wedding invite list for this summer! Cheers!

Whether or not you like the movie, the website for the fourth Fast & Furious is way cool! Of course every movie has a microsite these days, but what makes this one even more special is that Creative Suite 4 was involved in the entire production of the site and ad banners, as well as the creation of the AIR-based desktop application and an iPhone application. Of course there’s tons of video on the site, that was treated by After Effects CS4 and encoded for delivery via Flash - and the new 3D capabilities in Flash Professional CS4 really shine in the site’s navigation. What I loved seeing most, though, is that the website was optimized for the iPhone using Dreamweaver CS4!

Of course, you’ve heard all of us from Adobe talking about the time-savings that CS4 users benefit from - and this project is a real testimonial to that. In fact, if you want to read more about the project and what products were used, we’ve just posted a case study on the Adobe web site.

I had the pleasure of presenting a session on Dreamweaver CS4 to some of my colleagues today, and in the process ended up on my “web standards” soapbox. That’s not unusual, as this is a subject that I feel very passionate about, and thankfully my colleagues embraced the message wholeheartedly. Following the presentation though, one question arose around the idea of removing JavaScript from the page.

One of the coolest of new features in Dreamweaver CS4 allows you to take all of the “local” JavaScript code and externalize it with the click of the mouse - complete with unobtrusive attachment of events.

The question was basically “what’s the point” - is it because JavaScript is “bad” and you’re trying to be sneaky with it, or simply to clean up the HTML code itself. I got about halfway into my email response to the question when I realized that this might be worth posting here.

The issue with JavaScript as part of the HTML page is not that it is “illegal”, afterall <script> is a valid HTML element. It has more to do with the “best practice” of separation. In real life we talk about the need for a separation of church and state because they each have their own “realm of authority” - or at least we hope they do. But in the web content world there are really three things that need to be separated: markup, presentation and behavior.

In the long forgotten stone-age of the internet, markup was routinely mixed with presentation much as the alchemist mixed their secret potions in the hope of getting gold. As designers we wanted big, bold, red headlines and the font tag was wielded with complete disregard for the semantic “meaning” of the text to which it was applied. But thankfully within a few years CSS was born. With its advent, it was suddenly possible to return to a more simplistic and semantic markup - afterall this is what Tim Berners-Lee and company had in mind when the original HTML specs were conceived. The idea of markup was to describe an element’s purpose or meaning without regard for how it would be presented. And with CSS, we could use an h1 or h2 to emphasize the importance of an element, but style it however we wanted without it losing its “meaning” in relation to other elements. Not only did this lessen the amount of markup that we had to deal with, by externalizing  the CSS we had achieved two other important goals. First, we could modify a single CSS rule and effect all (or some) of the page elements spread across multiple pages in one fell swoop. Second, we began the journey down the progressive enhancement road.

If you’re like me (old), then you might remember those early days of the web as the browsers began their slow embrace of CSS. But then again, maybe you don’t remember those days - or you didn’t “notice” it, because you didn’t have a browser that supported CSS. And that’s the important part. If you didn’t have the latest and greatest browser, you still got content (if proper seperation of markup and presentation techniques were used). It’s all about properly marking up the content to begin with. Then, the presentation “layer” can work its magic in numerous ways. In fact, as my good friend Dave Shea’s site, CSS Zen Garden, so wonderfully illustrates, the very same semantic HTML markup can be presented in an unlimited number of ways. (Side note: if you’ve never visited Dave’s shrine to CSS creativity, run, don’t walk over there!)

Today, it’s fairly safe to say that the concept of separating markup and presentation is a “standard” and being implemented “for the most part” around the web world. But with today’s more “rich, interactive” web (read: Ajax) we find ourselves once again polluting our markup. And it’s for the very same reasons that we began separating markup and presentation that we should separate markup and behavior. We can reap the same rewards as well. By attaching JavaScript to elements unobtrusively, we eliminate a large part of unnecessary markup. Secondly, by centralizing the code into an external JavaScript file, we can make site-wide changes more easily. And finally, if we’ve adhered to the “leave no one behind” mantra of progressive enhancement, the page doesn’t “need” the JavaScript in order to deliver its content to the user agent. Instead, the page (and experience) is simply enhanced by its presence.

Thanks to my colleague for prompting me to write this - I hope it makes sense - and either way, I would love to hear your thoughts and comments on the subject.

On the heels of my previous post regarding the call for sessions for Adobe MAX 2009, I’ve just learned that there is currently a huge disparity in the submissions. It seems that an overwhelming number of developer types are really, really interested in learning about Flex and Actionscript - which of course is good. But on the other hand, MAX is supposed to be a gathering of Adobe enthusiasts from all disciplines.

In other words, do designers and creative types care? Do you want to learn new techniques to improve your productivity or creativity? If so, it’s time to step up and be heard! Regardless of which product you work with - Photoshop, Fireworks, InDesign, Illustrator, Dreamweaver, there’s surely something that you’d like to know more about. Let’s face it, these are tough economic times and we’re all in competition to be better, faster, more creative, more productive than “the other guy/gal”. And knowledge is the single most effective tool in the tool chest.

The dev side of the house is letting their voice be heard - now it’s our turn. Come on, creatives, get the word out and get involved! Submit your ideas! Let’s make sure that MAX is also about the creative side of the house. I want to see sessions covering CSS, prototyping with Photoshop/Fireworks, Ajax from a designer’s point-of-view, and… what are your ideas…?

Head over to the MAX session and submission site now!

I can’t believe that just a few short weeks ago I was at MAX Japan, and late yesterday afternoon I received a notice that it’s time to start planning for MAX 2009 in Los Angeles this fall. But it’s true. This year’s annual gathering of the Adobe faithful will occur from October 4th - 7th, 2009. If you are interested in speaking - or simply have a great idea for a session or lab, I’d encourage you to submit your suggestions. You’ll need to hurry though, as all submissions must be posted by April 15th.

Here’s the relevant links:
Post a Session or Session idea
Post a Lab or Lab idea

Be sure to visit the official Adobe MAX 2009 site to stay up to date with all the news. See you at MAX 2009! Cheers!