Return of the Son Of A…

It’s been a long time since my last blog post, so I figured it’s time to start dusting off things again after my most recent hiatus. A lot’s happened.

- We launched Dreamweaver CS5, a rather huge release (Check it out here.). If you do any dynamic styling/theming of PHP-based CMS systems, it’ll be a godsend, and if you just do general HTML/CSS/JS work you’ll find DW is a lot more flexible these days :)

- BrowserLab has gone through some serious iterations, with a new auto-align tool, Firefox/Firebug plugin, and a lot more (BrowserLab Home).

- MAX 2010 is coming up this month (Adobe MAX 2010), and between all the HTML5/CSS3 fun you’ve been getting in on lately plus all the sweet new Flash/Flex/Video/Creative Suite products there’s a lot of good sessions and topics to cover.

Hope to see you at MAX (I’ll be hosting a session on Cutting Edge Web Design using Dreamweaver CS5 – focusing on multiscreen/mobile design and layout, CMS theming and HTML5/CSS3, so check it out)!

As always, if you want more regular updates follow me on Twitter (@sfegette), or throw this RSS feed in your reader and be prepared to wait a bit. ;-)

BrowserLab – The Artist Formerly Known as Meer Meer

This one’s been a lot of fun. Seriously.

Back at MAX 2008 we got to show off a project in it’s early stages, code-named Meer Meer. It raised quite a bit of attention at the time, and was – as simply as I can put it – an earnest attempt on our parts to solve a problem that we’d been hearing about for quite some time from our professional web designers and developers – the challenge of cross-browser (and OS) design for the open web.

Web pros faced with supporting the wide variety of browsers and OSen their clients demanded were resorting to either physical or virtual test labs, or services that worked in a rather serial fashion – you’d type in a URL which would go into a queue with everyone else, and eventually return you a screenshot in a minute. Or five. Or far longer. No one wants to get blindsided with browser compatibility bugs at the critical endgame of a project, but the logistics of cross-browser testing often make it difficult to do early and often. We decided to address the problem with two principles – simplicity and speed.

Adobe BrowserLab is our simple, speedy solution.

BrowserLab runs in any Flash 10-enabled browser. That’s it. No bulky downloads, no local installations (unless you want to enable direct Dreamweaver CS4 integration, which I strongly recommend), just you and an initial set of browsers on Windows and Mac to test your layouts against. The BrowserLab interface is simple, and uncluttered – one view to manage sets of browsers to both match project requirements and kick off ‘batches’ of screenshots easily, and one view to view, compare and examine your browser screenshots. You switch view modes with the 1, 2 and 3 key, and cycle through loaded browser screenshots with the up and down arrow. You can zoom into screenshots while overlaying two browsers together at your opacity of choice. A large part of BrowserLab’s sweetness is its utter simplicity.

And if you’re using Dreamweaver CS4, it’s even sweeter. The biggest problem with existing ‘screenshot’ services is that you can’t easily preview interactive content – rollovers, Ajax/JS widgets, dynamic data, basically anything that’s loaded or ‘triggered’ in your page by user interaction. You’re pretty much stuck with the default, loaded page that your URL produces. Dreamweaver CS4′s new Live View – and it’s ability to freeze JavaScript interactivity in place – lets you essentially ‘drive’ a page you’re working on into a particular design “state”, freeze it – and send that ‘snapshot’ directly to BrowserLab for review. The BrowserLab Dreamweaver panel gives you status of requests in the BrowserLab service so you aren’t wasting time waiting, but concentrating on design – not collecting and compiling screenshots from test machines/virtual machines, or tapping your toes waiting for your turn in a screenshot queue. It’s high time we were able to spend less time managing the logistical headaches of cross-browser proofing, and more time concentrating on design. Or code. Or whatever. :)

(next section updated occasionally as status changes, FYI)

As you read this, Adobe BrowserLab is live. However, we’ve already reached our initial beta capacity for the first round – we’ve let in roughly 3500 people or so this week on a first-come, first-served basis – as the first of several phases of rolling out the service. Experience is the key, so we’re ramping up user capacity over time – if you didn’t get in this week our apologies- we’ll be extending to a wider, invitation-based program in early July to let everyone help us kick the wheels and polish the chrome for our first release. You can get all the info over in the BrowserLab section of Adobe Labs, and of course make sure to bookmark BrowserLab itself at browserlab.adobe.com.

On behalf of the entire BrowserLab team, enjoy!

FYI UPDATE: comments are disabled for the moment due to a bug in my captcha, but you can track me down on Twitter: http://www.twitter.com/sfegette. Pardon the head-fake.

Blog Migration Imminent

Just a quick heads-up that this blog (and many others on the soon-to-be-former weblogs.macromedia.com server) will be migrating to a new Adobe server and updated version of Movable Type starting this evening thru the weekend. I’m going to see how things work with the upgraded server next week, and either stick with it, or migrate entirely off to my own WordPress site and merge this webblog in with my personal weblog on a new domain. I’m leaning towards the latter, but giving the new upgrade a chance first, for what it’s worth. Not being able to hack the server/app framework is proving a bit restrictive, quite frankly.

More to come… and again, apologies for the slightly-extended interruption in my regular broadcasts. ;-)

MIXed Thoughts, and Meer Meer

Microsoft’s developer conference MIX ’09 is going on right now, and there were some interesting points in the keynote yesterday around plans for Expression Web 3. Whenever this happens, I tend to get a bunch of private messages/tweets/IMs asking what my reaction may be as a product manager for Dreamweaver. I wanted to address them in general here.

In general- I think it’s great that Expression Web is in the market, as competition is vital to have – it helps keep everyone on their toes and ultimately our designers/developers win – with better tools over time. As for commentary on the specific features in Expression Web 3, they seem rather broad for the most part (CSS, PHP and standards improvements, SFTP, etc) and I’m not surprised or overly impressed with any of the new features, as in many ways they’re still catching up to the Creative Suite, and Dreamweaver. Given we’ve had quite a bit of lead time in the market, that’s to be expected.

The feature of the Expression Web 3 announcement getting the most ink, however, appears to be ‘SuperPreview‘ – a Windows-only app (also integrated with Expression Web) to preview sites on IE 6/7/8 – assuming you have them installed locally – with the promise of cloud-based access to alternate browsers on Mac and Windows at an undisclosed point in the future. This is the one feature I’ve gotten the most private nudges about in the last day. In case you missed it 4 months ago, we showed a sneak peek of a curiously similar solution – a project code-named Meer Meer – back in November at our MAX (not MIX!) conference. Although it’s still in development for now, there were no smoke and mirrors involved back in November – it was a live demo of the first working builds – the Meer Meer service lets you compare and contrast popular browsers on Mac and Windows via a Flex-based interface that works on any Flash-enabled OS (Mac, Windows, Linux), featuring Dreamweaver integration that allows a designer to preview both remote AND local web content – including interactive design states you may have triggered in Dreamweaver CS4′s new Live View rendering mode – without worry of firewalls or publicly posting sensitive client projects for the world to see. Anything you can render in Live View (interactive widget states, rollover effects, AJAX-driven content) can be frozen in place using Dreamweaver CS4′s ‘Freeze JavaScript’ feature, and sent directly to the Meer Meer service for preview, too. Meer Meer is a service-based app (or ‘cloud-based’, to use the hip term-du-jour), so there’s no local installation required to use it at a basic level, you can just connect via Flash-enabled browser of choice, and point Meer Meer to an existing site, on top of the deeper integration with Dreamweaver. Simple, but oh-so-powerful.

Keep posted, as you’ll be hearing a lot more about Meer Meer shortly. If you didn’t attend MAX last November for the sneak, you can read a little more about the Meer Meer project here at Ajaxian, and also in an interview I did with Sitepoint shortly afterwards. Cross-browser testing is definitely a challenge that nearly all web designers and developers face, and Meer Meer’s going to help lower that bar for everyone. One thing I can say without question about the Dreamweaver team is that we’re committed to digging deep into the creative (and technical) workflows that web professionals demand, and we’ve no plans to let up- so keep posted for more innovation like Meer Meer (and like those in DW CS4- Live View + Live Code + Freeze JavaScript, Related Files, the Code Navigator, HTML Datasets, among many other new takes on old workflows) from the DW team in the web design and development space in years to come, both in Dreamweaver as well as across all our Creative Suite products. We’ll keep breaking fresh ground for you- and you can bet you’ll hear it here first. ;-)

Welcome to 2009

Wow- where did 2008 go? Between CS4 development and release, the MAX conference (a virtual blur) and the general holiday-season craziness of recent weeks I seem to have blinked and lost a few months in the process. But while I’ve been preoccupied, Dreamweaver CS4 continues to get great reviews and feedback, definitely one of our biggest DW releases in years as Ross Greenburg at Computer World reports:

“As for me, I immediately updated to CS4 as soon as I could. The enhancements over earlier releases, including CS3, are too compelling to be ignored — so I didn’t. The upgrade price makes this an absolute no-brainer. There’s a reason to consider this the latest and greatest version of CS4: Because it is.”

Aw- thanks, Ross!

Another recent set of articles that cover Dreamweaver CS4 at SitePoint are definitely worth reading if you’re still on the fence in picking up CS4- very well-balanced and even feedback on the release:

Good points in the last one – specifically the emerging best practice of putting <script> blocks before the closing </body> tag in order to prevent race conditions, i.e. when you may invoke JS on a element of your markup that hasn’t yet loaded.

Anyway- hope you had a great holiday season, and an even better 2009. I’ll try to be less infrequent in my postings over the next few months – honest – as I’ve got a lot of good DW tips/thoughts/etc to share in the New Year.

Dreamweaver CS4 Reference Posted

If you’ve been flying blind with the Dreamweaver CS4 public beta and no documentation, I’ve got some good news- we just posted the Dreamweaver CS4 help files in their mostly-complete state in advance of the official CS4 ship date. You can access them here right away:

Even cooler, our Learning Resources team has launched a new ‘Community Help’ site that not only indexes the official product documentation, but other community resources that address Dreamweaver- a fantastic way to search for docs across a variety of resources. And Community Help is not just limited to Dreamweaver, but covers all the other Adobe products, too- solutions may involve multiple tools, so this will be very helpful in searching a bit ‘outside the box’.

Enjoy!

MAX Session Highlight – Extending Spry

One of the MAX 2008 sessions I’m most excited about is Danilo Celic’s session “Extending the Spry Framework“. Danilo’s both an engineer for WebAssist as well as a hardcore individual developer, having been writing Dreamweaver extensions since the API was published years ago. If you’ve been working with Spry but not venturing much ‘outside the box’, this is exactly the session for you- Danilo will cover custom widgets, transitions and effects by extending the base Spry component set, and how to really take the visual effects to the next level.

For a few bloghints from Danilo to whet your appetite, you can check out his posts “Help for creating custom Spry transitions“, and “Upping your Transition Count“, and know that he’s going to school you much, much deeper in the session. Even if you’re more of a general JavaScript coder, this session should have a ton of real-world information you can get tactical with fast. Highly recommended!

MAX Session Highlight – Designing in a Developer’s World

Full disclosure- “Designing in a Developer’s World” is my session this year at MAX. It was born out of many, many discussions I’ve had over the last 2 years in which it’s become increasingly clear that the line between designer and developer is blurring when it comes to modern web-based projects.

As opposed to a decade ago where static web pages and request/response interaction with server-side components were your only choice, these days your average web designer creates designs that are dynamic and stateful – user interface elements open, closed, expanded, and resized, forms that validate themselves without taking a trip to the server first, etc – it’s certainly not 1997 anymore. As the technical demands on web designers increase, the complexity of our projects have increased exponentially. This session will really get to the heart of the quandary- efficiently creating stateful, web-based designs while maintaining a modicum of creativity throughout an increasingly technical process. For examples and context, I’m planning to explore several types of ‘stateful design’ workflows that today’s web designers are regularly a part of- from interactive form-based applications, to rich interface implementation, to content syndication and reuse.

There will be slides and example code available after the session, of course- I’ll be sure to post them on my blog in case you miss it. However, if this sounds up your alley, please add my “Designing in a Developer’s World” session to your MAX schedule, and make sure to come armed with your best questions- my favorite part about these presentations is, quite frankly, the open Q&A that always ensues afterwards.

Look forward to seeing you in November!

WebAssist Launches SiteAssist Professional

Setting up a new Dreamweaver site project can be quite a chore. Sure, you have the FTP/SSH info for your host on hand, a URL you can hit in a browser, and a shrinking deadline (who doesn’t these days?), but building robust sitewide designs and the directory structure that houses them can require a huge amount of preplanning and headwork to do well. Just getting that ‘clickable site framework’ up and live can be a major undertaking, especially with clients breathing down your neck.

Joe Lowery from WebAssist just gave me a demo of their newest solution to this problem- SiteAssist Professional (a ground-up rewrite of their popular SiteAssist Dreamweaver extension) – that can have you up and running with a robust, CSS-based framework for your site in roughly 8 mouse clicks (and probably a few keystrokes too, but who’s counting) that will look great on any modern web browser. To get started with a new site project, the SiteAssist Pro wizard will step you through:

  • Configuring your general site settings
  • Selecting a layout option
  • Configuring pages and navigation (essentially setting up the heirarchy and architecture of your site)
  • Configuring the site footer
  • Output options

… after which you should be up and live with a clickable, functional Dreamweaver site you can then flesh out and customize to the nth degree. If that ‘blank canvas’ problem faces you regularly with new client projects, SiteAssist looks to be a great way to kick out the logistical jams and get rolling fast.

Reusability is a key with SiteAssist- aside from the many great visual/functional/site-level presets available, you can easily save new custom site types (with their own specific collection of page types) as well as quickly apply new designs. Page types are great ways to save and encapsulate common page-specific functionality – like a detail page, a contact form, a video player page, etc – and then reuse them across all your projects in a design-neutral fashion. Clientside and server-side functionality can be partitioned off and saved this way- a real productivity boost if you’re managing a lot of projects in Dreamweaver.

Layout and design is equally flexible- aside from shipping with 16 beautifully-designed native templates you can use to kickstart the process, SiteAssist Pro now works with your existing Dreamweaver templates- making it that much easier to integrate SiteAssist Pro into your existing site designs and workflows. SiteAssist Pro also supports exported layouts from their popular CSS Sculptor product (developed with CSS guru Eric Meyer) and custom page types that allow you to quickly define standard functionality and common design themes for your site. Interoperability appears to be a key feature of the release, it also works seamlessly with the WebAssist’s CSS MenuWriter menu generation extension.

SiteAssist Pro is a commercial extension- $199.99 but available thru September 9th for a reduced $149.99 – and you can get more information on it at the WebAssist site:

http://www.webassist.com/professional/products/productdetails.asp?PID=241&utm_content=home_page_fma

Great stuff!

MAX Session Highlight – Spry, PHP and FileMaker Pro

As we get closer to MAX, I’ll be highlighting some of the sessions I’ve noticed that are particularly interesting, unique or otherwise noteworthy- and the first is a rather unlikely combo of technologies that should present a really interesting look into spreading Ajax interfaces onto conventional – or perhaps even unconventional foundations.

In my first featured session, “Using the FileMaker Pro API for PHP with Adobe’s Spry framework“, FileMaker Pro expert Joe Scarpetta will take a critical look at how to meld the FileMaker PHP API with Spry on the front end to quickly build out rich functionality to an existing database application. This session reportedly rocked the house at the recent FileMaker Pro conference, and should be interesting to a much wider MAX audience as both a great how-to session on Spry as well as a peek into larger workflows melding database platforms, PHP and rich user interface components to build out rich, dynamic web user interfaces.

If you’re a designer faced with ‘skinning’ database apps for web or intranet delivery or even a PHP developer looking to extend your skills upward to more UI work, this is a session you won’t want to miss- make sure to add it to your MAX schedule ASAP. And keep posted- I’ll be highlighting several more sessions I’ve particularly been eyeing over the next few weeks on a variety of topics, although probably centered around workflow and such, as that’s a particular area of interest for me.