Scott Fegette

May 26, 2008

Dreamweaver Public Beta - Now Open

Dreamweaver's 10 years old this year, and to celebrate the decade we decided to make some big changes, and public ones at that. So we're releasing a public beta of the current DW build (code named Stiletto), and letting you get your hands on it to see where things are headed.

Design is not static these days, but stateful, and dynamic. Forms proactively validate themselves in modern designs, and user interfaces intertwine dynamically-loaded data with application-like interaction models. Being born in a static age, Dreamweaver needed to come to parity with the way these types of immersive site experiences are designed and developed by today's web pro. We met with a lot of designers and developers across the map after Dreamweaver CS3 was in the can, watched how they worked and tried to reflect the best of what we learned in Dreamweaver's tools and workflow. The result is Stiletto.

Stiletto's Live View lets you render the current page in Webkit - with JavaScript-driven interface elements and dynamic data from local servers in place - then freeze a particular page state and use the new Code Navigator and Related Files toolbar to directly navigate the asset files that combine to render a given element on the page. Quite frankly, there's nothing quite like it in other design and development tools. Subversion support in the Files panel and extended, dynamic JavaScript code hinting help you be more effective with your site assets. Stiletto's user interface has undergone work as well, now far less obtrusive, with auto-hiding and minimizing panels, a muted color scheme and horizontal/vertical split view options to maximize whatever display real-estate you've got at hand.

I've been using Stiletto pretty constantly for the last few months, and now refuse to go back to Dreamweaver CS3, quite honestly. And we hope you enjoy using Stiletto as much as we've enjoyed researching and building it. Let us know what you think in the beta forum- the features are pretty much locked but bugs and feature requests are always welcomed. We have a few video walkthroughs of the new features at Adobe TV as well, and you can read more about the DW public beta (and get the download) here at Adobe Labs.

I'll be posting thoughts, tips, suggestions and new tidbits of information about Stiletto from time to time, so if you're new here, save a bookmark (or add my feed to your daily scoop) and check back once in a while.

Enjoy!

Posted by sfegette at 08:55 PM | Comments (6)

May 22, 2008

Dreamweaver 'Next' at WebVisions 2008

I'll be presenting on web design best practices/standards (along with a sneak peek of the next version of Dreamweaver) today @1:15pm at the WebVisions conference in Portland, should you be attending. Swing by, get an early look at what we've been working on back in the Dreamlabs, along with a lot of thoughts as to WHY we've been doing what we've doing with Dreamweaver. Aside from my own plug, the WebVisions track/session schedule looks great, with a speaker list that reads like a virtual who's-who of web luminaries. Given I'm up against folks like Bryan Veloso, Dan Rubin, Roger Black and Aaron Gustafson during my session hour, I'm both excited at the quality and density of content at WebVisions this year- and simultaneously bummed at what I'll miss even in the hour I'm onstage.

Currently I'm in Dave McFarland's "JavaScript for Designers" session, which is starting off quite nicely (great slides, too), but will probably be lurking in the lounge area between sessions catching up on email and feeds. Tap me on the shoulder if you're here and say hey!

Posted by sfegette at 09:22 AM | Comments (0)

May 14, 2008

WebAssist Menu Writer

I recently got a preview of WebAssist's new product, Menu Writer - which looks to be quite a fine Dreamweaver extension for creating and managing one of the most frequently used interface patterns- drop-down menus. Although there are a lot of menu solutions available, they've done a great job of distilling them down to a nice wizard-based approach that makes it very easy to create menu-based navigation for your projects. Some highlights I noticed:

• Menu Writer pulls in existing directory structures, so you can easily suck up existing heirarchies in your server environment and create comprehensive navigation for them.
• As is the case with all the WebAssist products, there are tons of great themes and presets, and you can easily create your own for quick reuse of common themes or site styles.
• You can place multiple menus on same page - no collisions - and easily re-enter the extension interface to edit your existing menus.
• Not only does it work seamlessly with their hit product CSS Sculptor, but it also lets you specify the code structure of your menus, so even gearheads have a nice way to tweak the code and reuse it with precision.

Very cool extension!
Now Menu Writer is obviously a commercial extension, but WebAssist has a special deal going thru May 27th (normally $99, but $74.99 for the first few weeks), so get it while it's hot. :)

Posted by sfegette at 12:57 PM | Comments (0)

April 28, 2008

Farewell, GoLive

Although it's long been rumored, today the news was officially delivered- GoLive will no longer be sold as of today (April 28th, 2008), and the focus will shift to Dreamweaver long-term for Adobe's professional web design & development customers. This is news that I'm reasonably certain most GoLive users saw coming as far back as the CS3 launch- when Dreamweaver replaced GoLive in the Creative Suite packages - but it's good to finally have an official word on the matter. GoLive (versions 5, 6, CS2 and 9) customers can take advantage of a $199 cross-grade special (same price as a Dreamweaver upgrade, basically) to pick up Dreamweaver CS3, which means there'll be a lot of GoLive customers considering Dreamweaver now.

There's been a lot of speculation on if and when this would happen - and if so, why - so I wanted to at least give a little perspective on this from my vantage point - as a long-time Dreamweaver team member - on two of the main concerns I've heard around Dreamweaver taking the helm of our web design products.

Lack of Competition

Ever since the Macromedia acquisition, I've heard the pretty regular concern that Adobe's competitors were systematically being eliminated, leaving the competitive landscape around our products bleak and quite frankly - non-competitive. Honestly, I couldn't see that more differently - competitors are all around if you care to look for them- from lightweight web design/development apps like Coda, CSSEdit and others, to full-blown IDEs like Visual Studio and Eclipse. For design-centric web developers, apps like Freeway and the reasonably-newer Expression Web are viable options. GoLive was a worthy competitor, but lately we've even more competing tools to consider as we build out Dreamweaver's roadmap, not less. That can only be a good thing for the competitive web design landscape - and Dreamweaver's future within it - in my opinion.

Coders vs Designers

Web design has increasingly become a more technical discipline over the years, and Dreamweaver's secret to success was always to follow what the pro web designers were doing on a project and workflow basis, and enable that within our tools. We occasionally hear criticism that Dreamweaver isn't 'WYSIWYG enough', or needs to support more drag-and-drop features and get away from the code. But that's not what the pro web design market has been telling us - web design is not like print design, or even Flash design. When was the last time you needed to hack your InDesign files to print correctly on that one, finicky printer? Web browsers are OUR printers, and they sure as heck don't always play as nicely with one another- let alone render the same way even on the best of days. Visual tools can get you 90% of the way there with the current browser landscape- but that remaining 10% of your headache is almost always code-based- a browser hack inserted into the stylesheet or perhaps some judicious markup-juggling to get that layout working correctly. And when this bites you, you absolutely, positively, have to have access to your code. Plain and simple. Sure, a lot of print designers have become accustomed to GoLive's more visual model, but at the end of the day Dreamweaver has to serve it's primary market - professional web designers and developers - and the market spoke quite loudly on that subject years ago. We're just following their lead, honestly.

But I'm sure there's lots of good ideas to consider now too, do you have favorite GoLive features that you'd like the DW team to consider going forward? If so, please use our bug/wish list form here to send them in for consideration (always the most direct path to getting a request into the teams here, FYI):

http://www.adobe.com/go/wish

So What's Next?

This will undoubtedly be a period of transition as there's a lot of GoLive users who are now considering Dreamweaver, and we'd like to make sure that your transition's a smooth one. I strongly recommend checking out the resources we've made available at the following URL:

http://www.adobe.com/products/dreamweaver/switch

These include:

• The GoLive to Dreamweaver migration extension - helping you convert the structure of your legacy sites to a format that can be imported and managed by Dreamweaver.
• GoLive to Dreamweaver Site Migration guide - written by GoLive experts Adam Pratt and Lynn Grillo.
• Training Video from Lynda.com - giving tips and tricks for getting up to speed quickly with Dreamweaver, including the migration process

Indeed, there's a lot of areas of difference between GoLive and Dreamweaver, but hopefully these bits of info will help you make the most sense of them quickly.

For the Dreamweaver team, we've already seen many of the GoLive engineers join our ranks, who are all contributing quite a bit to the next release of Dreamweaver already. It's been a pretty smooth transition internally, and is resulting in one amazing team. However, I realize that this news may be much more upsetting to you, but sincerely hope that the the transition is as painless as possible. Let us know how we can help?

Posted by sfegette at 05:10 PM | Comments (0)

March 18, 2008

Random News Items

I've been pretty hectic between travel and SxSW the last couple weeks, but a few cool items of note may have slipped past. Catching up now...

• Kuler just got an update today, with a feature I've been drooling over since I heard about it a few weeks back- color extraction! You can now upload an image, and have Kuler extract the dominant color theme from it. Simply awesome feature- saves me from my old "Posterize > sample colors to a swatch" workflow in Photoshop. Make sure and give the Kuler team your feedback, too.
• The Web Standards Project (WaSP) announced at SxSW last week that the Dreamweaver Task Force is being renamed and expanded to the Adobe Task Force, covering a wider range of our products. Don't fear, though- our historical cooperation with WaSP from the Dreamweaver team is alive and kicking as always, and will continue into the foreseeable future. I love those guys for keeping us honest over the years!
• Chris Charlton has been working overtime again and sneaked a peek at his upcoming DW extension for Drupal developers - the Dreamweaver Themer's Kit extension for Drupal. I swear that guy never sleeps, if you've been following his developer site xtnd.us you know exactly what I'm talking about. You can also check the Adobe Technologies group he manages out over at groups.drupal.org. Get some rest, Chris- we need you for the 4th quarter, man!

Anyway, since I didn't feel like posting yet another dissection of what went wrong in Sarah Lacy's interview of Facebook's Mark Zuckerburg last week (although I missed the beginning of the interview, I was drawn to the trainwreck ending like a moth to a flame), or general 'wish you were here' posts from SXSW, so I hope these tidbits are a little lighter on the fluff. If you want the blow-by-blow from last week in Austin, you can rewind my Twitter stream, after all.

Posted by sfegette at 04:35 PM | Comments (5)

February 26, 2008

Fox Sports Adds Spry Photo Galleries

Very cool- just got word that Fox Sports has implemented a very nice set of Spry-based photo galleries like this one:

You can check out the new FoxSports.com Photo Galleries here:

http://msn.foxsports.com/pgStory?workingCategoryId=0

Make sure to click around with the sliding panels to check out the variety of galleries they've already implemented- really makes for a great vewing experience, and an equally great example of Spry in action. Nice job.

Posted by sfegette at 01:40 PM | Comments (1)

February 10, 2008

Spry - Linking to a Non-Default Panel

So you like those fancy-schmancy Spry accordions, but have the need to deep-link into closed accordion panels from an external page? That's a pretty obvious use case usability-minded designers (and their clients) may require, and Dreamweaver and PHP guru David Powers has a great tutorial on just that topic on his Foundation Dreamweaver blog - "Linking to a non-default panel".

If you're strictly using the visual Spry tools in Dreamweaver to author, you're probably missing a lot of the hidden gems in SpryURLUtils.js (included with the Spry 1.6 update), and this is a great tutorial for taking that first dive into the extra goodies v1.6 provides.

Posted by sfegette at 05:19 PM | Comments (0)

January 30, 2008

Ajax Framework Love for Dreamweaver

If you've been using Dreamweaver for Ajax work recently, you may have been underwhelmed with DW's current code-level support for common JS frameworks and libs. Should that be the case, you'll want to be praising LA developer (and old-skool Dreamweaver kung-fu master) Chris Charlton postehaste for releasing two DW extensions to enable support for Prototype.js and JQuery into Dreamweaver (MX through CS3).

You can get hold of the beta releases and view example screencasts at Chris' site - xtnd.us - and make sure to send him some love for really kicking tail on these extensions. If you're interested in MooTools and/or YUI support, he's taking requests - and it also appears that a Mochikit extension is in the works as we speak.

Although Chris has noted an ExtJS extension is current on hold at the xtnd.us site linked above, it may be (as noted in the comment threads here at Ajaxian) due to the fact that a Windows ExtJS extension for Dreamweaver MX 2004 was built out by the Spket folks, which they're planning to port up to CS3 soon.

Chris: here's a virtual high-five from the DW team for your innate coolness in jumping on this project so quickly for DW developers worldwide. We've got some plans in the works in these regards ourselves, but this is a solution that the DW/Ajax development community can use right now, today. Hot damn. You rock, my man.

Posted by sfegette at 03:25 PM | Comments (2)

January 10, 2008

WebAssist Dreamweaver Tools for kuler

A cool new free extension for Dreamweaver was released by WebAssist today- the Dreamweaver Tools for kuler (kuler being, of course, Adobe's web application/service for exploring and creating color themes at kuler.adobe.com). Search for specific themes, colors, or just explore the most recent, most popular and highest ranked color themes directly from Dreamweaver- then sample them directly into your active page/site/application project. Nice!

And in case I wasn't direct enough... this extension is a free download, no less. Go get it!

Posted by sfegette at 01:21 PM | Comments (0)

December 17, 2007

Spry and the 2007 Ajax Survey

It's been a big year for the Spry framework- with tons of feedback from the standards and best practices community helping us get version 1.6 out the door that addressed darn near all the immediate concerns with the framework. Recently I blogged about the 2007 Ajax Survey, an annual census of framework usage across the Ajax development community, and urged interested parties to write in Spry, as it was not part of the survey- well, at least not at first.

The survey results are in- and although it didn't crack the top 10 (among some heavyweight contenders), apparently Spry was the #1 write-in framework, to the degree that the surveyors added it as an official choice in the survey a day or two later. The excerpt of interest from Richard Monson-Haefel's weblog post announcing the results:

"Spry is growing quickly and may be in the top 10 next year. Spry was left out of the survey for the first day or so and then added in as it was the most popular write in toolkit. It may have faired better if it was an option from the start."

Great to hear. Now again- Spry wasn't one of the top 10 frameworks, but for a designer-focused framework to make such a splash in such an application developer-heavy community this year can only be a positive sign that things are headed in the right direction (at least I'd hope so!), and we're of course going to keep pushing forward on Spry to make it even better for next year. No resting on laurels here, that's for sure.

Thanks to everyone who wrote Spry in on the survey! And if you haven't checked out Spry 1.6 and all the new treats within, now would be a great time to do so. Make sure to drop comments and suggestions in on the Spry forums, too- the team's always listening.

Posted by sfegette at 12:55 PM | Comments (2)

December 11, 2007

Ajax Survey III @Ajaxian

If you're doing any rich interface development and/or Ajax work, you should definitely participate in the recently-announced Ajax survey created by Richard Monson-Haefel of the Burton Group. It's a simple, 3 question survey, and should only take a minute of your time.

Note that Spry is *NOT* included in the list of frameworks (heresy!), but I strongly recommend putting it in as a write-in vote if you're down with the Spry framework. Perhaps even if you aren't. ;-)

(Link courtesy of Ajaxian)

Posted by sfegette at 12:59 PM | Comments (1)

November 16, 2007

Jeremy Keith on Spry 1.6

Back at Web Directions North in Vancouver this past year I had a conversation with Jeremy Keith on JavaScript and web design/development in general, and which was also a not-so-thinly-veiled effort to dig deeper into some excellent criticism he'd raised around the Spry framework, also echoed by Roger Johansson. I had roughly another half-hour/45 minutes of conversation that didn't air, but was of immense value to the Spry team (and Dreamweaver team) in charting our response.

And that response was the recent Spry 1.6 update, of course. Which is getting much better feedback than 1.0, by a long shot. Jeremy recently took another peek at Spry and was as pleased with the documentation as he was with the technical changes in 1.6, Roger also recently gave a nod to the improved accessibility and progressive enhancement support. Right on. Spry's still young, relatively speaking- so it's nice to know the ship is headed in the right direction in regards to best practices overall.

Would you agree? If not, why?
Inquiring minds would love to know...

Posted by sfegette at 12:18 PM | Comments (2)

October 31, 2007

Spry 1.6 and the NBA

Fox Sports just used Spry 1.6 to implement a very sweet realtime scoreboard/game tracker for this year's NBA season:

http://msn.foxsports.com/nba/scores

Very cool- I believe it's been in action for a few days but I'll definitely be using it to watch the scores for this evening's games. If you haven't gotten into Spry 1.6 yet, there's a good interview up at Builder.AU by Andrew Muller where I talk about the Spry framework's most recent release. You can view it here:

Spry: "Standards, Dreamweaver & the future"

Enjoy!

Posted by sfegette at 09:08 AM | Comments (2)

October 04, 2007

Nitobi Complete UI 2007 and Dreamweaver

One of the coolest bit of news I heard at MAX was that Ajax gurus Nitobi have released Complete UI 2007, their Ajax UI component library, with full support for Dreamweaver included. Nitobi's long been delivering quality code for hardcore Ajax developers, and now they can be used with drag-and-drop ease by Dreamweaver developers, too. Awesome stuff from some great guys (Andre Charland, Nitobi's co-founder, was recently on the AIR bus tour as well - they're all over the place lately!).

Check out more details on Nitobi's Complete UI 2007, which is easy because they've got a trial version you can play with too. I think you'll be impressed. This is great stuff- kudos, Nitobi!

Posted by sfegette at 09:08 AM | Comments (0)

October 01, 2007

Spry 1.6 - It's On.

That's right- Spry 1.6 is now live on Adobe Labs, you can download it now and get playing with the bits right away. The Spry team is really proud of this release, as it both clarifies and solidifies a lot of their positions on the framework as a whole, and how to use it in responsible ways.

Oh, and did I mention Spry now includes an easy way to update your framework files in Dreamweaver CS3, too? You betcha. You can either download an MXP to update Dreamweaver specifically, or the full framework package (including all the additional documentation, samples and more - including the MXP updater for Dreamweaver).

Some interesting articles for those of you wanting to use Spry responsibly (I strongly recommend reading these regardless!):

• Spry and Best Practices
• Progressive Enhancement with Spry
• Using Spry Unobtrusively
• Validating Spry
• The Spry Element Selector (for unobtrusive usage)

Of course, there's a lot more- but the good news is that Spry 1.6 is now available, and ready for you to start tweaking with ASAP. Regardless of whether you use Spry within Dreamweaver, or as a standalone framework, the team welcomes your feedback on the Spry forums so we can keep making it better for you and your real-world projects. Get to the bits, already!

Update: Don Booth has a great post on the Spry Team weblog now, too - great read for more details (including the new compressed versions of the Spry framework files- saving significant download time). Check it out here.

Posted by sfegette at 05:45 AM | Comments (3)

August 28, 2007

Dreamweaver "Next"- What Won't Be In It

Dreamweaver's a big application. Huge, in fact. And the next release is going to be an equally huge one - I haven't seen the team this excited in years. But as they consider new features and proposals for downstream releases, it's a struggle to both innovate on features and architecture while also testing and maintaining all the legacy features in DW. So, after a lot of careful consideration and research, the DW team has arrived at a short list of features to be dropped (in releases after CS3) that both a) require a lot of release-to-release effort to maintain, and b) are frankly not being used with much, if any frequency by the DW community. You can read the details here.

Yes, this list will likely be controversial to some - particularly if you're relying on one or more of these features today. However, the team decided to publish this list early- to both help you prepare for the changes, evaluate other options and adjust your own workflows. Most all the deprecated features either have become more code-centric workflows in other dedicated IDEs/environments (JSP, .NET), or had visual user interfaces that enabled DW developers and designers to generate poorly-formed code in the back end (Layout Mode and Timelines, for example) - something the team takes very seriously.

My personal opinion is that this move will really free up resources to do a LOT in the next few releases of Dreamweaver, and start doing more 'revolutionary' feature and architectural work as opposed to strictly 'evolutionary' features and polish. If any of the features to be removed give you pause, post a note, and it's likely we can suggest alternatives for the post-CS3 era to help smooth the transition.

Personally- I hope that when we're able to talk more about what's being planned for the next version (or two) of Dreamweaver, the tradeoffs made here will be more than justified in your eyes. But that's a subject for a much later date with a lot more details- so keep posted. :)

Posted by sfegette at 10:26 AM | Comments (21)

August 23, 2007

Eric Meyer's CSS Sculptor for Dreamweaver

To quote Zeldman: "danged if Eric Meyer hasn't launched a product", and in collaboration with long-time Dreamweaver extensionology specialists WebAssist, no less.
Today WebAssist announced their new product "Eric Meyer's CSS Sculptor", a collaboration with Eric on a very well-concieved Dreamweaver extension that allows you to create drop-dead simple, standards-compliant CSS designs quickly and comprehensively. Quite a nice collaboration at that, if I do say so myself.

CSS Sculptor is an elegant Dreamweaver extension that helps you quickly build a customized CSS layout, starting with 30 of the most popular variants- elastic, liquid and fixed layouts, 1-3 column configurations, and much more. The interface doesn't just help you choose from a completely 'pre-canned' design, but gives you a clear starting point to help expose the CSS and attributes required to customize a layout for your specific project and design- helping educate users on CSS best practices as well as expedite their development. Win/win.

The community is taking notice, too- you can read Jeffrey Zeldman's aforementioned take on CSS Sculptor (great comment thread, too), articles from InfoWorld and Website Magazine, and of course Eric's own take on CSS Sculptor at his personal weblog. Don't forget to digg the news, as well. :)

Great product from two heavyweights in their respective spheres of influence, and yet another reason why Dreamweaver's such a rich product to work with- the extensibility/third-party developer community around Dreamweaver just plain rocks! Awesome job, guys.

(Side note: I feel compelled to put a little plug in here for the standards-compliant CSS Layouts that ship with Dreamweaver CS3 for the record - which are also great sources of education on CSS design/layout best practices - heavily commented, and coded for Dreamweaver by The Web Standards Project's Stephanie Sullivan.)

Posted by sfegette at 10:35 AM | Comments (1)

August 14, 2007

Desktop RSS with AIR and Spry

Notorious Aussie rebel Andrew Muller has written up a great article on building an AIR RSS viewer using Adobe's Spry framework for the plumbing. Although he's using Aptana in the article, Dreamweaver users have it just as easy (if not a bit easier) following the same steps, as obviously Spry's much more integrated with DW CS3 than any other dev tool at the moment. You just need to grab the Adobe AIR extension for Dreamweaver CS3, which you can pick up for free (in beta form) at Adobe Labs.

Minor modifications to use Andrew's article with DW CS3:

• Install the AIR Extension for DW CS3 via the Extension Manager.
• I suggest creating a unique site definition for each AIR app, to help keep assets managed well
• Build the RSS application in Spry using either Andrew's explicit instructions in code, or supplement that workflow with the visual Spry tools in Dreamweaver for a richer coding/GUI experience
• Preview the application using Dreamweaver's "Preview in Browser" toolbar menu > "Preview in Adobe AIR"
• Package the application using the "Package in Adobe AIR" command from Dreamweaver's Site menu.

Simple, quick and easy! And great little article to get your feet wet with AIR and Spry. Make sure to give Andrew some props if you like the walkthrough.

Posted by sfegette at 09:51 AM | Comments (1)

August 13, 2007

Source Control and Dreamweaver

... do you use them together? If so (or even if you just use source control regularly with other web design/development tools), please jump in with your thoughts and observations at this post by Lori Hylan-Cho on the Dreamweaver team weblog - "Source Control: Do You Use It?". Lori's trying to gather feedback on how you use version control/source control systems like Subversion, CVS, Perforce (and others) in web-based projects, whether application, site or both. If you haven't used a source control system in the past but are interested in possibly doing so in the future, your comments and suggestions are also welcomed. So if this interests you even remotely, please hit that link and join the conversation. Thanks!

Posted by sfegette at 11:58 AM | Comments (0)

August 10, 2007

Be a Dreamweaver Video Star

Wanna get your mug up on the big screen at MAX this year? Enthusiasm about the CS3 launch has you warm and fuzzy, but anxious and jittery? Well, we've just the outlet for you hardcores to let off some steam.

Between August 24th and 28th Adobe will be shooting on-camera interviews of Adobe software enthusiasts, talking about the software and work they love, for a video to be shown at the MAX conference in Chicago. If selected, you'd only be needed for one of those days (individual shoots will range between 1 to 2 hours maximum, FYI). If you want to be considered for this big-screen appearance you just have to drop a note to 'adobecast@yahoo.com' providing:

• Your occupation
• What Adobe products you use
• A recent photo or two of yourself
• Contact information

If you've got an interesting story to tell - especially if you're using Dreamweaver, of course (as I'm biased that way) - drop a note to the production email account and get yourself in the running. I'm really looking forward to seeing the final piece, as well as the blooper reels... ;-)

Posted by sfegette at 05:49 PM | Comments (0)

August 07, 2007

XRAY - Box Model Introspection

Does John Allsopp ever sleep? I swear, between developing Style Master, speaking at conferences, and general Microformats evangelism among his other pursuits that guy is so packed full of energy he makes me feel like a cardboard cutout of myself.

John and WestCIV's latest venture is XRAY- a small JS bookmarklet you can use to quickly introspect the box model for any element on a page. Whereas Firebug is the ten-ton-monster of site introspection, XRAY is light and easy to use (and just as handy)- just click the bookmarklet on any given page, and you're shown the entire CSS inheritance hierarchy for the clicked element, it's dimensions, etc. Beauty and simplicity in a small bookmarklet.

Right now XRAY is only supported in Safari 2/3 on OS X (with some caveats for Windows Safari), and all Mozilla-variant browsers on OS X and Windows (Firefox, Flock, Camino, etc). Howver, reportedly an IE version is also in the works. Any way you slice it, XRAY is a must-have utility for anyone doing serious browser-based work, and you should install it right now. Seriously. And make sure to give John some props/feedback while you're at it.

Still reading? What are you waiting for?

Posted by sfegette at 03:10 PM | Comments (2)

August 06, 2007

Blueprint - a CSS framework

Frameworks.

That singular word alone can stir up heated, pseudo-religious debates in web dev circles, some finding coding frameworks a boon for rapid development, others decrying them far too bulky and overengineered in relation to hand-coded, specific solutions. I'm somewhat neutral- most of my exposure to frameworks has been straight-up coding frameworks like CakePHP, Fusebox, Spry, Prototype among others, and although I love a good hand-coded solution, when time's short a good framework like Spry or Cake can really save time. Howver, I was really intrigued to see that some enterprising design types have pulled together a framework for CSS - "Blueprint" - to better enable grid-based layouts in standards-compliant markup. Lead developer Olav Bjorkoy cites inspiration from many leading CSS and design gurus- Eric Meyer, Jeff Croft and Khoi Vinh amongst them (although they are not 'officially' part of the project).

Interesting. Although some 'designers' condemn Dreamweaver for it's visual design surface masking the code beneath and allowing less technical users to create flexible designs at the expense of optimized code, it's validating to see more design-centric coders acknowledge that standards-compliant designs could benefit from framework code. As the entire Blueprint framework - options and all - weighs in at ~40kb, it's not too draining on bandwidth as it could be, which is nice. Let's take a look at what Blueprint provides.

At the code level, Blueprint provides a screen stylesheet with three included files - reset.css (for 'resetting' browser defaults to provide a consistent starting point), typography.css (for type styles and effects), and the main brains behind the framework- grid.css (containing the rules and selectors for specifying grid-based layouts in CSS). There's also a print.css file to override certain styles for better print output, which is a nice touch.

Implementing Blueprint grid designs is reasonably simple, and should be very familiar to table-based webmonkeys who've been leaning on the old colspan/rowspan crutch for grid-based designs since Netscape 1.2 introduced 'em (you know who you are!). Just wrap your page in a container div, and then mark up the divs within to specify rows and columns appropriately. By default, the Blueprint grid is 960px wide (suitable for 1024x768 monitors, a good baseline), containing 14 columns of 50px apiece, with 20px margins between.

The 'first' and 'last' classes appear to control row content, marking the first and last columns in a given row. For example, this is a basic 3-column with header layout plucked from the Blueprint tutorial:

<div class="container">
  <div class="column span-14">
    Header
  </div>
  <div class="column span-3 first">
    Left sidebar
  </div>
  <div class="column span-8">
    Main content
  </div>
  <div class="column span-3 last">
    Right sidebar
  </div>
</div>

In the example above (see here for the original), the header DIV stretches the entire 14 columns, and the 'main content' row (containing three columns) uses span-X classes to define the widths of each column in the row (with the 'first' and 'last' classes determining the actual beginning and ending of the row).

Pretty simple- and the framework renders as you'd expect in Dreamweaver CS3 so you can get the best of both worlds- quick markup in code with nice integrity in design view should you want to work that way. On the best practices side of things, less technical designers looking to really deconstruct CSS to learn from it may have some problems wading through the framework's abstractions to get to the core techniques, but as the layouts I've tried so far validate well as XHTML/Transitional (my doctype of choice for most things) that's more a minor - and obvious - gripe than anything else.

All things told I'll probably stick with hand-coding my CSS layouts in my preferred Dreamweaver/BBEdit editing combo, but can't deny that for quick mockups and one-off projects Blueprint may be very handy for me indeed. Definitely worth checking out, regardless. Let me know what you think?

Posted by sfegette at 11:45 AM | Comments (2)

July 23, 2007

Ajaxian: Time to Take Dreamweaver Seriously?

Ajaxian's Dion Almaer asks an interesting question of the Javascript/Ajax crowd - is it time to take Dreamweaver for Ajax seriously again? I think the question is really a broader one- is it time to take Dreamweaver seriously again - to which I respond with a booming "HELLS YES". Particularly in workflow ecosystems where a combined designer/developer workflow is crucial, I might add.

The comments in the Ajaxian article's thread are interesting- I was pleased to see there's certainly a contingent of folks within giving a thumbs-up to recent release(s) of DW, along with the expected 'WYSIWYG editing is for dolts' responses, the latter of which Dion's question may actually be a valid one for. My answer is simple- I'm a designer who likes code. I spend most of my time in DW's code view exclusively, and occasionally do quick mockups/proof-of-concept work with the WYSIWYG tools. DW CS3 is speedy and nimble for me (particularly when compared to the glacial performance of MX 2004 and perhaps DW 8), and I have no problems using it regularly as a code editor - again, with the occasional drift into the GUI-driven features if I'm doing quick tests/proofs.

Now I can't (and won't) argue with those who simply prefer completely stripped-down tools like Notepad or TextMate/BBEdit - I occasionally do as well (have been a BBEdit user longer than a Dreamweaver user), and understand the minimalist approach - but the extended features of DW (along with it's recent updates for code-centric folks) are way too much to discount wholesale just for percieved street cred on my part, or the spectre of old (and now- largely resolved) code trust issues in the visual editing features.

Anyway, I'd be interested in your comments, suggestions and opinions on this, too- as Dreamweaver is a app very near and dear to my own workflow I've also got strong (and yes- potentially biased) opinions upon it myself. Sound off below, why dontcha?

Posted by sfegette at 11:52 AM | Comments (12)

CSS Advisor/Cookbook Posts... in Eclipse

Using Flex Builder or Eclipse to do your hacking? Well now, thanks to Giorgio Natili and the flexdevelopers.it crew, you can now get updates from the CSS Advisor and Flex Cookbook directly within the Eclipse IDE. Just download the free RSSPanel Eclipse plug-in here, and get started. Handy- nice work!

Posted by sfegette at 11:22 AM | Comments (0)

May 08, 2007

Veerle on CSS-Based Tabs

Veerle Pieters has posted a great walkthrough on how she and Roger Johansson created a beautifully-degradable tab interface for a list element in a recent real estate site redesign. This is a brilliant bit of insight into styling well-structured, semantic markup - at it's core just a standard unordered list with some contained markup in each list element - that looks beautiful (vertically 'expanding' it's image backgrounds to handle different amounts of content within), and degrades beautifully when CSS is turned off.

Posted by sfegette at 08:43 AM | Comments (3)

April 23, 2007

PVII Slide Show Magic

The next step in my tour of Dreamweaver extensions takes me to long-time Dreamweaver extensionologists, Project Seven. Project Seven (PVII) has always had a warm spot in my heart for taking very specific problem scenarios for web developers, and coming up with extremely elegant and deep solutions to address them.

PVII's newest commercial extension - Slide Show Magic - is a great example of their problem-specific focus, enabling an automated Dreamweaver interface to create rich, interactive image galleries and slide shows. Sure, you could build out a slideshow's markup by hand, and code in the fades and dynamic loads by hand, but where Project Seven always excels is coming up with an elegant, accessible, well-structured and automated solution that covers all the bases eloquently.

Not only is Slide Show Magic accessible and indexable, but it gracefully degrades in older browsers, or when JavaScript is disabled. The markup generated by Slide Show Magic isn't littered with event handlers and extraneous code, and the JavaScript is unobtrusively-written and lean. Their technical solution is as eloquent as the rich visual front end.

If you find yourself building image galleries or slideshows regularly, I can say that I'm very impressed with not just the elegant user interface, but the plumbing beneath the hood of Slide Show Magic- it's a great automated solution that generates excellent code even the purists can be proud of.

Check out a quick screencast of Slide Show Magic at the Project Seven site (which really highlights the Dreamweaver interface and workflow), or better yet- live demos of the extension in action. Dreamweaver MX and greater are supported, as well as Fireworks MX or greater for image processing (which is optional). Dreamweaver CS3 is supported of course (as are the rest of PVII's products). Great extension!

Posted by sfegette at 10:36 AM | Comments (1)

April 18, 2007

WebAssist's eCart 4 Released

WebAssist president Eric Ott dropped by the Adobe offices last week to give me a sneak peek of their new eCart 4 release, which begins shipping as of today. eCart 4 is a significant upgrade to WebAssist's popular commerce extension to Dreamweaver (supporting DW MX 2004, 8 and CS3).

Back during Eric's tenure as product manager for Dreamweaver, a huge feature request was an integrated shopping cart solution that made commerce enablement a snap, a call taken up quite admirably by the third-party Dreamweaver developer ecosystem. And from what I can tell, the engineers at WebAssist did a bang-up job of building a very complex but easy-to-use Dreamweaver extension by way of eCart 4 to enable exactly that- rich shopping and commerce functionality in a very user-friendly package. You can see some examples of third-party eCart implementations at the eCart showcase.

Sporting freshly redesigned, standards-based CSS layouts (reviewed and approved by CSS guru Eric Meyer, no less), support for a veritable plethora of back-end payment processing services and frameworks (including all of PayPal's options), and a very configurable design and layout engine.

The eCart interface itself has undergone a major face-lift as well, with a clean, fresh new look and very well thought-out workflow. Although the options for an ecommerce solution can be vast and overwhelming, WebAssist has done a great job of streamlining the configuration process. Read more about this in the feature breakdown/tour, of course.

This looks like a fantastic upgrade to eCart- an incredibly valuable extension for Dreamweaver overall. Check out the eCart 4.0 website for more details, including a very nicely-done product walkthru by Mark Fletcher. Great job and a powerful new upgrade!

Note: I'll be looking at some other new offerings from the Dreamweaver extension community over the next few weeks, so keep posted for more soon.

Posted by sfegette at 09:13 AM | Comments (2)

April 16, 2007

CSS Advisor on the Dev Center

In case you missed it, the CSS Advisor site has a new tab/entry point on the Adobe Developer Center as of this morning. Check it out, and if you've any good wisdom to share regarding CSS cross-browser rendering bugs, please sit down with a keyboard and pass it along!

Posted by sfegette at 03:19 PM | Comments (0)

April 12, 2007

Developing CSS With a Clean Slate

I had pleasure of catching Eric Meyer's presentation at An Event Apart earlier last month on the differences in the various browsers' default stylesheets- which often accounts for minor differences in rendering that can truly vex your development processes.

Eric's sage advice for 'evening the scales' was to first globally reset a baseline of elements to a consistent and known quantity (without resorting to using the universal selector, then build up your own project-specific styles upon this baseline. This greatly helps account for varying differences in box-model rendering, line height, fonts, etc. which are often interpreted in minutely-different ways by the various browsers' rendering engines. He even kindly offered to share his own version of such a 'reset' stylesheet.

What I did not know - and Eric made me aware of via his 'blog posting earlier today - is that the YUI team at Yahoo! has already published their own version of a reset.css file to do exactly this.

You can get more information at the Yahoo! UI Library site, along with extensive documentation, 'quick-start' notes, and community resources to discuss it's usage. Very handy, and definitely worth a peek if you're having issues getting pixel-perfect alignment across your test browser suite.

Posted by sfegette at 10:31 AM | Comments (2)

April 09, 2007

Massimo on Dynamic Editing with Spry

Massimo Foti recently wrote a great article (in Italian) about creating data editing forms with ColdFusion and the Spry framework- and English-speaking regions missed out on it's coolness. I recently helped Massimo and the Developer Center team translate it into English, so you can now benefit from it's wisdom on the Adobe Developer center.

Make sure and check out the article - "Creating an interface for editing data in Ajax" - it's a nice entry into creating forms with Spry to dynamically edit an Access database table (and please don't blame Massimo for any translation snafus, that would be all my fault as my Italian is shaky at best). Hope you enjoy the article.

Posted by sfegette at 02:12 PM | Comments (0)

March 25, 2007

An Event Apart Boston

I'm flying out to Boston shortly for An Event Apart, and given my late arrival this evening I'm sure tomorrow will be a fun and coffee-drenched day of web buildin' hijinks.

Particularly interesting to me this year is web usability expert Steve Krug's presentation on 'Advanced Common Sense'. I've been a fan of his popular usability book "Don't Make Me Think" for some time now, and am really looking forward to hearing Steve extrapolate on usability and whatever else is on his mind.

Not to say that the rest of the speakers aren't absolutely top-notch, from Eric to Dan to Stan, and of course the irreplaceable Molly (who's session I will not miss for anything, as I slipped out right before she mentioned me during her SXSW panel earlier in the month, much to my chagrin!).

But make no question about it, the winner of the 'Best Session Title Ever' award has to go to Ethan Marcotte: "Web Standards Stole My Truck". Now that is a session I've gotta see.

Make sure to tap me on the shoulder and say hi if you're there as well- I'll be wandering around with my requisite Dreamweaver hoodie on, representing. If you catch me in a good mood, I'll probably answer your questions about the upcoming Adobe CS3 products- but if I'm in a great mood, I might even demo 'em for you. I'm that kinda guy. ;-)

Boston ahoy!

Posted by sfegette at 10:31 AM | Comments (0)

March 22, 2007

Care and Feeding of the Extension Manager

Well known extension developer Tom Muck wrote a great post today on some tips for managing extensions across multiple installed versions of Dreamweaver. The Extension Manager is a bit of a jack-of-all-trades, master-of-none application- managing not just Dreamweaver extensions but also Flash and Fireworks, so although right now the EM's the easiest way to install/manage extensions - it certainly has some snafus involved with doing so. Understanding a bit of what's happening both beneath the hood, and across multiple versions of DW, is highly adviseable for those DW users who rely on the excellent product extensions made available by Tom, Project Seven and WebAssist, among many others.

Although certainly not everyone keeps multiple versions of Dreamweaver installed year-round, Tom's advice is very sound and definitely worth a read for anyone who uses DW extensions regularly. Particularly so as I hear there's a new version of Dreamweaver on the way soon... ;-)

Read the full article here.

Posted by sfegette at 09:22 AM | Comments (0)

February 28, 2007

Spry/Dreamweaver at SXSW

Of course I'll be at SXSW this year- presenting on the Spry framework (showing some cool upcoming features/updates) as well as giving the first extended public sneak peek of the upcoming release of Dreamweaver on the day stage from 11:30am-12:30pm on Monday (3/12). I'll show many of the cool new features in the next release of Dreamweaver - coming both from a hand-coder's perspective as well as a designer's perspective - and some under-the-hood peeks at Spry, both the current release and addressing some of the recent feedback and criticism we've received on Spry with demos of upcoming enhancements we've got planned for the framework. Chock full 'o fun. If this piques your interest at all, please swing by and check out my demo session, then catch up with me offstage afterwards - if you've got good comments, suggestions or feedback I'd love to record a few snippets for a post-SXSW podcast, so you can be a radio star, too!

See you in Austin!

Posted by sfegette at 11:45 AM | Comments (3)

February 20, 2007

Podcast 03 - Jeremy Keith's Javascript Kung Fu

After a long hiatus, I'm back on a mike- and one of the best conversations I had at Web Directions North was with DOM Scripting guru Jeremy Keith- we talked for darn near an hour on everything from Javascript, getting started with the DOM as a web designer, the pros and cons of Ajax frameworks, the WaSP DOM Scripting Task Force, and his upcoming book (a sequel of sorts), Bulletproof Ajax.

I've posted the first ~35 minutes of our uncut (and a bit noisy- apologies) conversation as of today, you can either listen in via the handy Odeo embedded player or snag the source MP3 directly from the RSS enclosure/link below.

powered by ODEO

Direct MP3 Download

I've got another 30 minutes or so of our conversation on disk that's much more free-form, which I'll post as a 'sequel' of sorts later once Bulletproof Ajax is out. Much thanks to Jeremy for being such a good sport!

Posted by sfegette at 10:22 AM | Comments (0)

February 02, 2007

Spry weblog - now open for business

Although I'm not sure he's in the aggregators yet, the Spry team's Donald Booth has started posting at the Spry team weblog here. There's been escalating discussion of Spry in the recent weeks, and it's great to see Don turning on the mic to talk about the framework, and following up his Hello World post with some insight as to the goals and rationale behind Adobe creating YAAF (Yet Another Ajaxian Framework), and the compromises and tradeoffs they've made so far. Spry will be developed independently of the 'traditional' Adobe products, which will definitely help it be more ... ahem, spryly developed outside big 18-month product cycles.

Recent weeks have seen some some great feedback from DOM Scripting guru Jeremy Keith, which have been quite constructive to the team- several of Jeremy's issues are being addressed by the Spry team as we speak (including the namespace doc 404 being corrected - more details forthcoming on Don's blog, of course).

I find the comments in Roger Johansson's related posts almost more illuminating than any of the prior comments (well, if you filter out the 'we hate big companies' noise, of course). It's clear that better and more accessible/progressively enhanced demos may be required, another good point the team is hearing loudly and clearly. But one unspoken point that I'm reading between the lines - particularly in comment threads - is that there's a feeling that Adobe, as a large and rather cumbersome company used to monolithic product releases, has simply dumped a new framework onto the masses with no intention of reacting to these suggestions, criticisms and requests. As the guy who's responsible for launching Adobe (formerly Macromedia) Labs to the world, I can personally say that the internal view of software development - and transparency of process around it - has taken a dramatic shift from what you're used to seeing from such a big company, and you're only now seeing the first of it.

I hope Don's postings help shine a light onto the fact that Spry is far more than just a one-shot, fly-by-night framework foisted onto the web designer/developerati and subsequently ignored for 18 months at a time, and in fact is an independent team and effort at Adobe committed to regular, constant updates and releases. Swing on by and let Don know what you're thinking. I'm sure they'll welcome the feedback.

Posted by sfegette at 01:23 PM | Comments (0)

January 25, 2007

Dreamweaver User Research in SF - interested?

I just got a ping from our User Research team I wanted to pass along ASAP- are you in the San Francisco Bay Area and interested in helping the Dreamweaver team research workflows and user interaction? If so- read on and take action!

---

Adobe User Research is researching work flows and functions of Dreamweaver by holding two Focus Groups in our SF office on Monday, 1/29/07. We know your time is valuable, so in addition to free parking, food and Adobe-branded gifts, we will also pay selected participants $75 for this two-hour focus group.

We would love to have you participate, but need to see if you qualify for one of the groups- please answer these few questions in our survey. If you meet the criteria we're looking for, we'll contact you this week to schedule sessions.

Find the survey here:
http://www.surveymonkey.com/s.asp?u=633863181873

You are welcome to forward this link to your friends and colleagues. To be included in our data base for future paid studies like this one, please register at www.adobe.com/survey.

Thanks!
Adobe User Research

---

I want to reiterate that this is a local/San Francisco testing opportunity only- apologies to out-of-area interested parties. There are no remote participation options for this round of testing.

(FYI, comments are disabled for this post- if you're interested, please fill out the survey questions linked above!)

Posted by sfegette at 01:17 PM

December 19, 2006

Studio 60 goes Spry

NBC's site for the new show 'Studio 60 on the Sunset Strip' just got an update- and is now using Spry for both effect transitions, and data loading for the list views (right of the video player), comment threads, permalinks and more. And Flash video is used for the video previews, natch. It's great to see Spry get implemented by one of the major US networks- head over and check it out!

Posted by sfegette at 05:27 PM | Comments (2)

December 15, 2006

What is the CSS Advisor?

The new community-driven site CSS Advisor was quietly launched this morning as a public beta, and although most people get what it's for pretty quickly there have been a few who haven't. So I'll take a quick poke at a mini-FAQ of sorts here...

Q) What's the purpose of the CSS Advisor? Is it a wiki?
A) A centralized site where the web design community can help surface best practices, bugs and snafus, and other good snippets 'o wisdom regarding CSS design and development. It's similar to a wiki, yes- in that the public can submit new articles/posts (and both rate and comment upon them), and selected editors from the community can help us keep the content fresh.

Q) There's a lot of other sites devoted to CSS design, why CSS Advisor?
A) First, CSS Advisor isn't a replacement for all the great CSS resources out on the web today - from the CSS-D wiki to positioniseverything.net and quirksmode.org, and so on - if anything it's a complement to these sites, helping to index and collect all the great sources of wisdom available today. Also, Adobe plans to link out to CSS Advisor from our products down the road - and it was necessary to have a consistent way to do that on the website end. Hosting it here helps that goal, of course. But the content and focus of CSS Advisor is yours- Adobe's just providing the server and storage.

Q) How can I get involved?
A) Have you pulled your hair out over a CSS rendering bug? Or worked around a nit-picky positioning error in Safari? Post about it on the CSS Advisor site and share that knowledge with the rest of the design community. Did you find an article elsewhere online that helped you out and you'd like to share? Come and link to it on the CSS Advisor site (or ask the author to!), so we can make sure that folks looking here find the great articles you may have written over there.

If you're really hardcore about your documentation and contribute a lot to the content on the site, we may ask you to be a site editor- and help directly contribute to keeping the content fresh. Again, we want this to be a resource for the design community and kept sane and honest BY the design community. Tell us how you'd like to use the site!

Q) What's the catch? What's in it for me?
A) We'd hope that the CSS Advisor site grows into a strong resource for CSS design issues and solutions, and helps you find solutions to your problems faster and more directly. And since sharing with the community is always good karma, it won't hurt your reputation much, either. ;-)
Seriously, though- the site will only be as good as we all collectively make it, and the only way to get started is to roll up your sleeves and get started. That simple answer you found last week may be a godsend to the right frustrated designer somewhere, so share!

If you've got any other questions, by all means post them here as a comment, or on the CSS Advisor feedback forum. The floor's yours. What do you want to say?

Posted by sfegette at 04:05 PM | Comments (0)

December 04, 2006

Firebug Public Beta - get it now!

Firebug, Joe Hewitt's long-awaited Firefox extension for debugging DOM/CSS/JS/Ajax projects has finally hit public beta, and is available for download as of today. If you're doing any work tweaking the DOM via CSS/JS, or general Javascript development, this extension is - quite frankly - a must have extension for your workflow.

Firebug takes some of the favorite staples of the Web Developers' Toolbar (link below) such as CSS/HTML visualization, the ability to introspect your HTML/CSS/JS assets, and adds some must-have debugging tools like an integrated JS debugger/logging tool, network bandwidth profiler (see how all the assets in your page contribute to page load), DOM inspector, and a great error-handling UI to manage all the tricky bugs in your code (you do write the occasional bug, right?).

Alongside the old-favorite Web Developer's Toolbar extension by Chris Pederick, Firebug should become a staple of your web dev toolchest in short order, and in my opinion- the first thing you install into Firefox. Hope you find it equally as useful!

Posted by sfegette at 08:17 AM | Comments (1)

December 01, 2006

24 Ways - an Advent calendar for web geeks

You don't need to celebrate Christmas to enjoy 24 Ways - a 'countdown' calendar in which a new surprise is revealed each day from December 1st to the 24th - and this one being crafted especially for the inner web geek in all of us.

Kicking off Day 1 for the 2006 advent countdown is a nice post from Drew McLellan, detailing how to build one of those tasty and delicious text area length trimmers (similar to the 'size of abstract' slider in Safari) using the YUI Slider widget, and a little crafty Javascript. Make sure to check back each day between now and Christmas day (12/24) for a new tip to keep your holiday season a productive and educational one!

(If you need a little extra convincing, check out all the great tips from the 2005 holiday season here.)

Posted by sfegette at 07:37 AM | Comments (0)

September 27, 2006

Question 2 - CSS Efficiency

The second question this week is from Guy Huntley:

"Comparing CSS to classic Tables/Frames - how much less time does CSS take to create a page? How much less time to modify a page? How much more efficient is CSS vs. classic techniques, and can it be quantified?"

Hm. Now keep in mind that it's very difficult to estimate exactly how much time it would take to create a page in CSS vs. older methods without seeing the design you have in mind, and it's specific issues and requirements.

Generally speaking, it doesn't take me much more time to flesh out a page in CSS than it would in traditional table layouts. If you're new to CSS, then sure- it could be a bit hair-raising your first project or two, but any new technique does take a bit of breaking-in to get used to, IMHO. CSS is no different.

Now that's my take on CSS for creating new designs- but when it comes to updating them? CSS is LIGHT YEARS more efficient, no question whatsoever. If your design markup is scattered throughout your content in each individual HTML file, you're going to have to touch every file that uses the design to update it. Sure, templating systems and cunning use of #include files can reduce this nightmare, but what's not to love about the CSS update process- tweak a stylesheet or two (there's usually not more than 3 or 4 stylesheets in my projects), watch the entire site suck up the changes in seconds. Simple. I would estimate that even if I didn't save ANY time (or even lost time) creating a new page in CSS as opposed to table layouts, all the iterative updates to 'child' pages is so much easier in CSS that at the end of the day I've spent less time working with the CSS version.

(And surprise- you can also play those old-school-but-quite-valid #include and template server-side trickery with CSS layouts as well, further reducing your time required to touch all the assets on your site. It's really a win-win.)

My recommendation, spend the time to tackle the CSS learning curve, and move forward instead of backwards. You'll start to see the benefits of CSS almost immediately- and whether or not they're quantifiable to your clients and projects is really up to you. I'll never go back to purely table-based designs, personally- and suspect after the initial pain of learning a new skillset is past you, that you'll agree.

You'll note I don't mention frames anywhere above- and for good reason. I don't use them, and try to steer my clients away from them at all costs. Why? The headaches they present in regards to search engines, bookmarking, and general navigation/usability are a far worse nightmare than learning CSS- and if you throw in a bit of cunning AJAX/Javascript trickery, you can make a very usable single-page that achieves the same goals.
Well, that's my opinion, at least. Feel free to rip on it in comments if you disagree, and I'll see you tomorrow for question #3. ;-)

Posted by sfegette at 01:24 PM | Comments (0)

September 26, 2006

Question 1 - Tables vs DIVs?

There were a lot of questions submitted to last weekend's panel Q&A in Dallas that I didn't have time to answer, so will answer one each day this week. First up, Bill Miller asked:

"Should we aspire to ditch all table/cell markup in pages and use CSS? Are tables still a good thing for pages?"

A: In order- no, and yes. Let me qualify those answers. Tables were originally designed to hold tabular data- any data that is best displayed in rows and columns. In the early years of HTML markup, they also became a defacto way of creating 'grid-based' layouts, before CSS was defined and implemented in browsers to help replace tables as a design tool, and provide a better (and more precise) way of laying out pages. But no, I don't think you should ditch all table/cell markup in pages just for sake of using CSS - but instead use each where their strengths lie. It's really more a 'use the best tool for the job' decision, in my opinion (and trust me, there are some widely-varying and heated opinions on this topic).

In a perfect world (at least mine), your data/text/content would live in the (x)HTML page, and your presentation/design would live in a CSS stylesheet. Clean separation of design and content is the goal. If you're finding yourself using lots of nested tables and spacer images to achieve a design, you probably should step back and ask yourself how that design could be achieved in a more standards-compliant way using CSS. There's usually a way to do it that's more forward-looking than the crusty old table methods of achieving 'grid layout' designs, spacer GIFs to force widths/heights, et al. Sure, it can present a learning curve, but the reward is well worth the effort- CSS really is amazingly powerful for achieving just about any visual layout you have in mind, and if you don't believe me, just go spend a few minutes at Dave Shea's CSS Zen Garden website. (Dave's got some interesting points to share in a podcast interview I had with him last March on this subject, too.)

However, if some of the content in your page needs to be displayed in a tabular format, there's no reason to not consider using a table to contain it. That's what they were originally designed for, and an absolutely valid reason to use tables in a CSS world. Don't run screaming from the <table> tags arbitrarily- there's still plenty of room for tables in a standards-compliant CSS world. But it's usually more for formatting content, in my opinion, as opposed to realizing your global page designs. That's where my line is drawn, and I've found it a pretty good rule of thumb which has made design updates (especially on large sites) a snap by just updating a few CSS sheets, and kept my XHTML pages clean and uncluttered so they're less confusing for the less technical folks who may need to update the content within them from time to time. Without access to the CSS, I don't always have to worry about those less technical clients/editors/etc. blowing out a table cell during a simple content update and destroying my entire page layout! I think you'll agree, that's a pretty nice byproduct of moving more towards CSS.

But if you're new to CSS entirely, it can be a deep learning curve. Start small, perhaps move more of your formatting and styles to a CSS stylesheet first, and then slowly start working at removing those outer nested tables and replacing them with DIVs that you can position via CSS. It's always best to walk before you run, of course- but once you're up to full speed with CSS you'll probably be very glad you made the effort.

And that's my take on that debate... ;-)

Posted by sfegette at 09:59 AM | Comments (4)

September 06, 2006

Adobe acquires InterAKT

If you were sleeping last night instead of coding, you may have missed hearing that Adobe just acquired Romanian development firm InterAKT, most widely known for their very popular Dreamweaver extensions such as MX Kollection, KTML and PHAKT. You can read the public FAQ on the acquisition here, and some personal thoughts on it from InterAKT's founders Alexandru Costin and Bogdan Ripa as well.

Now of course, whenever an acquisition like this occurs, there are inevitably questions raised outside the public FAQ- so I'd like to briefly touch on a couple of potential questions that could be springing to mind right now.

- Is Adobe planning to develop commercial Dreamweaver extensions now?

No. Adobe's not planning to enter the Dreamweaver extension market with this acquisition. That's a key area for third party Dreamweaver developers and the plan is to keep it that way. If anything, the DW team would like to try and improve the ecosystem for our commercial Dreamweaver extension developers going forward. The former InterAKT team will be working on various projects and products here within Adobe once the dust has settled, not focused on Dreamweaver specifically- let alone on building entirely new commercial extensions for Dreamweaver. But InterAKT does produce commercial DW extensions, so...

- What's going to happen to the current InterAKT products?

That's a complex question that relates to not just InterAKT's commercial extensions, but also their open-source and free extensions, so involves multiple answers. You can get more details on the InterAKT product plans here in the FAQ, and what you can expect in the future regarding your particular InterAKT product(s) of interest.

- Why did Adobe acquire InterAKT?

Adobe's been planning an Eastern European development office for some time, and the acquisition of InterAKT not only made geographic sense, but includes with it a great group of highly talented development and QE engineers. Did I mention that they already had a lot of expertise with the former Macromedia products? Great way to get a new development center up and running quickly. :)

- I'm going to miss the 'small company' spirit of InterAKT!

Sure, I can understand completely. That's always a concern when acquisitions occur - I regularly heard the same thing about the possibility of losing that 'small-company feel' at Macromedia before we were acquired by Adobe less than a year ago - but in retrospect, the integration went pretty smoothly and we weren't just 'assimilated into the machine' so to speak, and would expect the same with InterAKT. Let us know if you feel things are going in the other direction, though.

Now that the cone of legal silence is lifted, I'd like to officially welcome the InterAKT team to the big red Adobe mothership- we've long been travelling buddies (Alexandru and Bogdan being mainstays on the same conference/speaking circuits I also frequent) - our relationship may a bit more formal now, but hopefully no less interesting? :)

Of course, if you have any other questions relating to this news that aren't covered by the press release and FAQ linked above, by all means post a comment and I'll try to keep everyone informed as things progress over here.

Posted by sfegette at 06:54 AM | Comments (18)

May 23, 2006

sIFR 3 Alpha Available

The alpha release of sIFR 3 is now available- adding Flash 8 filter support, support for leading, a new font sizing algorithm - there's tons of new goodies in v3 worth beating away on. You can read more and download the sIFR 3 alpha at developer Mark Wubben's site. Don't forget to subscribe to the sIFR 3 mailing list to share war stories, cool projects and bugs, of course.

(Thanks to Stephanie for raising the alarm!)

Posted by sfegette at 02:44 PM | Comments (2)

May 17, 2006

Podcast 02 - Jorge Taylor on the Spry Framework

Just posted a 16-minute conversation with Jorge Taylor, who drops the skinny on the Spry Framework for Ajax, a designer-friendly framework the Dreamweaver team just released on Adobe Labs for community feedback. Why Spry? Tune in and get the inside scoop via either podcasted RSS/MP3 (just add my RSS 2 feed to your pod-catching application of choice), or in browser via the embedded Flash Odeo player below.

powered by ODEO

Direct MP3 Download

Comments or suggestion for followup/subsequent podcast conversations? Bang 'em out below.

Posted by sfegette at 09:42 AM | Comments (6)

April 04, 2006

Dave Shea - CSS Zen Master

Get to know Dave Shea and some of his thoughts on CSS, web standards, design/data separation and more in this ~11 minute podcast we recorded at SXSW 2006. This marks the first of a semi-regular series of conversations I'm having with various folks inside and outside the Adobe communities (dedicated RSS feed published here) - please let me know if there are any topics or speakers you'd like me to interview going forward, and I'll see what I can do to accomodate!

MP3 Download

Posted by sfegette at 05:02 PM | Comments (1)

Upcoming CSS eSeminars

If you're a CSS-jockey, you'll want to catch these two sessions hosted by Dave Shea (CSS Zen Garden, Bright Creative) and Jason Brightman (Harris Publications):

• "A Closer Look at the Best Practices of CSS" with Dave Shea
  (April 13th and May 23rd)
• "Rebuilding the XXL Magazine site with CSS and Dreamweaver 8" by Jason Brightman
  (April 20th and May 11th)

These eSeminars are hosted in Breeze, so all you'll need is a browser with Flash Player installed, and an live internet connection. Audio is available both as VoIP in Breeze, as well as by phone- you'll get full details once you register.

Posted by sfegette at 03:42 PM | Comments (0)

March 30, 2006

Microformats Extension for Dreamweaver

Very cool- the WaSP Dreamweaver Task force has released a beta version of the Microformats Extension for Dreamweaver, currently supporting hCalendar, hCard, rel-license, rel-tag and XFN. Not familiar with microformats? Catch up here.
This is an awesome example of how the WaSP task force not only helps advise and steer our products in the right direction to keep improving standards-compliance and accessibility, but roll up their sleeves and get directly involved. To quote extension developer and WaSP Strategy Lead Drew McLellan:

Right on.
You can read more about the Microformat Extensions for Dreamweaver - and download the current beta - from the WaSP website. Make sure to leave feedback and suggestions as you dig into it, of course. Thanks, Drew!

Posted by sfegette at 03:55 PM | Comments (4)

January 16, 2006

Dreamweaver 8.0.1 Updater Available

Attention, Dreamweaver-wranglers- you can download the Dreamweaver 8.0.1 updater for Mac and Windows ASAP from the Dreamweaver Support Center, which addresses many reported issues with the 8.0 release:

Dreamweaver 8.0.1 Updater

Formerly code-named 'Utah' (for those of you who track such things), the DW 8.0.1 updater is currently available for English versions of Dreamweaver 8 (localized updaters expected soon- keep an eye/bookmark on the Support Center page above for news on these builds as they become available)- you'll also want to read through the Release Notes before updating, as well as the full list of resolved issues in 8.0.1 to get the scoop on what's new in this dot release.

Posted by sfegette at 10:55 AM | Comments (2)

October 31, 2005

Studio 8 Case Studies - Got Content?

Have you been using the Studio 8 products to create your online content? Got some interesting work to show? Not averse to being featured in a case study and getting tons of exposure? If your answers to the last three questions are a resounding "yes" (and you missed Mike's post earlier this evening), the Studio product marketing folks are currently looking for some reference customers, and would be interested in checking out your work. Should you (or even someone you know) fit the bill, please drop a comment on this post with some details (or email me directly at sfegette AT macromedia DOT com) and I'll be sure to pass your info along for consideration.

Posted by sfegette at 07:33 PM | Comments (2)

October 28, 2005

WA SiteAssist - off to see the Wizard!

Just checked out a slick new Dreamweaver extension from Macromedia extensibility experts WebAssist, called SiteAssist. If you need to build a site up very quickly - SiteAssist is a great wizard-based means to rapidly design, build out, and manage web sites in Dreamweaver. There's a slew of pre-designed templates and color schemes to choose from, or you can update the resulting sites with Dreamweaver's template engine and your own visuals for a more custom look/feel. Changing designs and information architecture is even a snap.

SiteAssist is a commercial extension ($149 USD), but the kind folks at WebAssist are offering $50 off for the next two weeks to anyone who wants to grab a new copy - just click here and you'll pick up the discounted price. (For the record- I've no commercial interest here, the savings is yours alone!)

Very nicely done DW extension, for those times where you need a site up yesterday- and the clock is ticking fast. Check it out!

Posted by sfegette at 02:11 PM | Comments (4)

September 23, 2005

Dreamweaver Snippets- Import/Export Extension

Dreamweaver extension developer extraordinaire Massimo Foti has just released a new extension, which allows you to quickly and easily import and export your Dreamweaver snippets directly from the Snippets panel. As there's no out-of-the-box way to manage your custom code snippets in Dreamweaver save manually copying files out of your DW configuration directory, Massimo's extension is a very welcome addition, and a very slick and convenient way to manage Dreamweaver snippets in general. You can download the MXP extension file directly at Massimo's website, make sure to send him a good word if you find it handy. Nice!

Posted by sfegette at 03:41 PM | Comments (10)

Dreamweaver 8 - Template Path Changes

Stephanie Sullivan posted a great overview of recent changes in Dreamweaver 8 Templates you'll want to read through, specifically if you're noticing that template-based links to external files are getting transformed incorrectly when updating 'child' content. In a nutshell, you'll need to use either template expressions or template parameters to avoid having your link paths rewritten (note that this is primarily due to the fact that DW MX and DWMX 2004 were very lax in how paths like this were handled when publishing/updating template-driven content, and the fix in DW8 will certainly affect anyone who was relying on the prior behavior). Check out Steph's post at the link above for more details, as well as a similar post at Jesse Rodgers' blog, great info to have on hand if you've leveraged templates heavily in your sites.

Posted by sfegette at 10:39 AM | Comments (4)

September 09, 2005

FOTD 24: Dreamweaver 8 - CSS Improvements

Dreamweaver 8 recieved a lot of updates to the way it authors and displays CSS, and we've already looked at how the Unified CSS panel consolidates workflow on the authoring side. Let's take a peek today at how the rendering has changed- and first, some new visualization features that will make authoring much easier overall.

First up, you can now visualize your DIV-based layouts very effectively in Dreamweaver 8. In DWMX 2004, I got very comfortable using the Firefox "Web Developer's Extension" to help show me how my DIVs interacted with one another, but the DIV Visualization feature of Dreamweaver 8 makes that an option, not a necessity.

There are several new options in both the document toolbar and 'View > Visual Aids' menu that you'll want to note (in addition to the old-favorite Table visualization features and Invisible Elements "toggle switch"):

• CSS Layout Outlines
  Turns on simple outlines of your page elements.
  
  
• CSS Layout Box Model
  Turns on outlines/visualization of the box model properties for selected elements in your page.
  
  
• CSS Layout Backgrounds
  Turns on a 'colored' view of your page elements, helping visualize overlaps/collisions/etc.
  
  

If you've ever wondered whether margins, borders or padding (or all three) were conflicting between adjoining elements and confounding your design sense, the CSS Layout Box Model mode will help dramatically in pinpointing problem areas in your layouts. Let's start with a generic CSS layout and see how these visualization features will help you see what's going on in your page:

Now the view above has "CSS Layout Outlines" turned on, to get an idea of the boundaries of each (not just the border styles you've set - this is most noticeable above in the left-hand DIV). But you'd like to see exactly how your defined padding and border attributes play into the visual layout. Simply turn on the "CSS Layout Box Model" option, and you'll see a visual representation of the padding area within the DIV in question (diagonal 'crosshatched' lines), as well as the margin and border attributes:

As you can see, the 'Heading 2' DIV has a 200 pixel left margin that helps 'force' it right on the page (note the horizontal blue line stretching to the left-hand side of the layout), so that the left-hand column can stick cleanly to the left. Although my screen-capture utility won't let me snap them- hovering over any of the properties of your selected element will show their values - hovering over the left-margin will show a tooltip noting that it's set to 200px, hovering over the padding area will show that it's set to 1em (16px), hovering over the main area of the DIV will show the basic style information for the entire DIV itself. Heck of a lot better than jumping back and forth between your (X)HTML document and your CSS document and scrolling around. Very nice.

This feature alone has been a monstrous timesaver for me- toggling it on/off as I go helps dramatically in seeing the relationship between my page regions/DIVs and troubleshooting.

And finally, if the visual feedback from the Box Model view option doesn't give you enough of a distinction between the elements on your page, you can turn on the final "CSS Layout Backgrounds" view mode, and get this rather colorful display, helping to highlight exactly where your page elements overlap, push each other in various directions, collide, explode, etc. ;-)

For a quick scan of how your page elements interact, this mode is incredibly handy - although not exactly the option you'll want enabled when proofing your work with clients!

I also wanted to highlight some techie under-the-hood improvements and fixes to CSS rendering in Design View. Note that this comes from someone (myself) who hasn't used Design View much in the past in favor of Code view, but will likely be using the visual tools more in the near future given all these new improvements. ;)

• border-style
  As opposed to only rendering solid border-styles, all border styles are now rendered (none, hidden, dotted, dashed, solid, groove, ridge, inset and outset).
  
  
• Improved positioning
  Although CSS positioning of elements (text-align, float, position, margin, etc.) have mostly been supported in DWMX 2004, there were certain cases where rendering would not work as expected with certain combinations and nesting scenarios. This has been addressed in DW 8.
  
  
• Support for the overflow property
  Overflows are now rendered more accurately to your design intent, with a contextual menu item - "Full Element View" available so that you can toggle on/off the full view of the element in Design view for editing. Cool!
  
  
• first-letter and first-line pseudo elements
  Now rendered in Design View (these are very popular design properties, after all!).
  
  
• Inline Box support
  Dreamweaver MX 2004 only recognized a subset of inline tags. Dreamweaver 8 now recognizes all standard HTML text-formatting tags.
  
  
• Improved Horizontal Rule rendering
  HR color, background color/image, and margin/border/padding attributes are now rendered correctly.
  
  
• Overall Positioning improvements
  A literal snowstorm of issues related to alignment, floating, list rendering, margins, relative/absolute positioning and flow have been improved. If you've witnessed these in DWMX 2004, you'll be pleased with the updates in DW 8. ;-)
  
  
• Form Elements
  Support for margin/border/padding, form background and fonts, and a lot more were implemented in DW 8. If you were ever annoyed by the white backgrounds behind form elements, take a deep breath and let it go... ;-)
  

To be honest, that's just a few highlights of the rendering improvements- and there's a lot more (including more detail on the points above) that you'll be interested. But in the interest of posting this in a timely fashion, I'll simply close this thought by saying Design View is much, much more reliable in Dreamweaver 8.

The combination of small CSS rendering updates in this FOTD- in combination with the improved authoring experience the Unified CSS Panel provides - should give you a good idea of how your CSS workflow will continue to get better and smoother with Dreamweaver 8. I think you'll find these updates very welcome indeed. ;-)

Have a great weekend- and I'll see you again on Monday!

Posted by sfegette at 03:46 PM | Comments (5)

September 07, 2005

FOTD 22: Dreamweaver 8 - XSLT Authoring

Syndication is one of the most rapidly-growing themes online these days, and I've personally used RSS and Atom feeds to browse and aggregate content from the blogosphere, news sites, podcast directories, TV listings and many other sources quickly and easily in Flash (using its XML features) as well as with some server-side tricks. And now with version 8, Dreamweaver speaks XSLT authoring- allowing you to really do something with all those XML documents and site feeds you've been collecting. Roll up your sleeves, this FOTD will be a doozy (and it's relatively certain I'm only going to scratch the tip of this iceberg).

An XSL document can be an entire document, or just an XSL 'fragment' that's included/embedded in an existing HTML page. If you look at XML (and it's derivative content types, such as RSS, RDF and Atom syndication feeds) as strictly your content, and XSLT as strictly your presentation, you've got the rote basics. Now let's say you want to provide users on your site with a listing of the most recent posts and FOTDs I've written here. Let's start by creating a new XSLT document (entire page) by choosing "File < New...", and noting the two new XSLT document types in the template list:

As noted earlier, an XSLT document is a fully-formed document that you create to display a particular XML schema, and an XSLT fragment is for small news pods, lists, etc. that are to be displayed in an existing HTML page. In this case we want to create an entire page listing the current entries from my weblog, as published via its XML-based RSS 2.0 feed.

Let's dive in. After creating my new XSLT (entire page) document, I'm immediately asked to show Dreamweaver a sample document- either locally (on my computer) or remotely via the network. I'll use the URL for my RSS 2.0 feed here as the basis for this new page:

After entering the URL and clicking 'OK', you'll note the 'Bindings' tab of the Application panel is now updated with the schema of my XML/RSS feed- much like dynamic application development, this represents the heirarchical levels of data in my feed- both 'global' data variables that represent my 'blog itself - its title, the link to it's home page, description, copyright information, etc. - along with variables that are different for each content 'item' in my 'blog, such as title, description, permalink, category, etc. The top-level container is 'RSS'- the actual schema used in my RSS 2 file.
Wanna see?

From here, let's do a quick test. I simply drag the channel 'title and 'lastBuildDate' into a sentence I've already typed into Dreamweaver's design view as so:

Nice and easy!
I've just dynamically updated the content in that page based on the 'blog description and last update time in my live RSS feed. Are the potentials here becoming obvious yet? If not, let's take it a step further.

We just updated the page itself with the singular title and 'last modified' date from my 'blog, but what about variables in my XML schema that repeat- i.e. the variables underneath the 'item' node, which represent data in the posts themselves? Well, they're handled much like repeating regions in your favorite Dreamweaver server models- you need to set up an area that repeats, and then populate it with the dynamic data. First, I'm going to create a table to hold the sequential 'blog postings themselves- but just build out one entry as a 'mockup' like so (table borders left in place to help clarify):

Now I'm assuming that these three table rows will repeat for each 'blog post (item) in my RSS feed, so we need to tell Dreamweaver what part of the page actually repeats so it can do the heavy lifting! Since the three consecutive table rows will repeat, I'll just drop into Code View, select all three <tr> rows, and then select the menu option "Insert < XSLT Objects < Repeat Region", which brings up the XPath Expression Builder (although I won't get into it in this FOTD, XPath is how you write expressions to conditionally interact with your XML data, very powerful):

This will simply tell Dreamweaver to write those three rows for each 'item' in our RSS file, using specific values from each post to do so. We just did the first part (set up the repeating 3-row region), now let's finish the job by dragging the appropriate variables (title, description, link, date) from our Bindings Panel into the comp we've created replacing our 'boilerplate' text- and hit Preview in Browser to see it in it's full glory:

And that's all there is to it- with Dreamweaver 8 you can quickly consume XML data, bind it to areas of your document, and display it dynamically on your site. A few points to note:

• This FOTD does not cover server-side transformations, which are possible as well w/DW 8, but require your server to be configured with XSLT support.
• Despite the above, Dreamweaver will still let you perform client-side XSLT transformations using an included Javascript file (DW 8 will provide it, no worries) that you simply upload to your web server alongside your XSL document/fragment.
• Although we just showed a very basic example here, with the power of XPath you can build very complex logic around your XML datasources, allowing very involved applications without a traditional 'server model'!

Anyway, as mentioned in the first paragraph, I'm barely scratching the surface of what you can do with XML and XSL in Dreamweaver 8- but the possibilities are endless. Don't forget you can also consume XML data in Flash 8 (but that's not necessarily news), too.

See you tomorrow for another FOTD!

Posted by sfegette at 05:53 PM | Comments (21)

September 01, 2005

FOTD 19: Dreamweaver 8 - Style Rendering Toolbar

On Monday I introduced you to the new Unified CSS panel, but that's not the only CSS improvement included in Dreamweaver 8- today we'll take a peek at how the Style Rendering Toolbar can help you proof your CSS-based designs between media types. Because you've already started supporting at least screen, print and handheld media types, right? ;-)

If this is a new topic for you, we should probably step back for a second and look at why this feature exists. There are cases where you may want to specify different values for the various CSS properties in your page layout- specific to the type of device it's being displayed on (or by). For example, you could define one stylesheet to format your page for computer screens, another to format for TTY devices, another for handheld devices, or television, overhead projectors, etc. A crucial feature of CSS is the ability to send a specific stylesheet for each of these different "media types", based on the device browsing your page- helping make your layouts truly universal (well, within reason).

Now in previous versions of Dreamweaver, you could really only view the default/screen media type in Design View without manually juggling the stylesheets themselves in your document- and then rebuilding the <head> section of your document(s) with the appropriate rules/stylesheets again before deploying to the server. In Dreamweaver 8, you can just define all your media-type-specific stylesheets as you would in the live document- and forget all the juggling. If you haven't specified a media type, then all the options will appear the same. However, if you've specified two or more stylesheets, each targeted towards specific media types in your current document, you can use the brand-spanking-new Style Rendering Toolbar to switch Dreamweaver 8's Design View between the supported media types in your document. Easy!

First, you'll need to show the Style Rendering toolbar by selecting the "View > Toolbars > Style Rendering" menu option, and you'll bring out this little addition to your document toolbar (highlighted in red):

From left to right, the toggle buttons are:

• Screen media type (color CRT monitors, LCD flat-panel monitors, etc.)
• Print media type (paged/printed material or onscreen 'print preview' modes)
• Handheld media type (typically small screens, limited bandwidth, etc.)
• Projection media type (projected presentations, or prints on transparencies)
• TTY media type (for media using a fixed character grid like teletypes, terminals, etc.)
• TV media type (for televisions and similar devies- low resolution, color, limited scrolling, etc.)
• Toggle Displaying of CSS Styles

By simply clicking the appropriate media type button, Dreamweaver will - if you've specified a stylesheet for that particular media type - use the appropriate stylesheet to render Design view, allowing you to quickly proof the relative experience across your supported media types. Cool, eh? But that's not all.

Now obviously the first six buttons directly map to specific CSS media types, but the last button (Toggle Displaying of CSS Styles) is my personal favorite, allowing you to toggle all stylesheets on and off, and see exactly what your document will look like with no stylesheet attached. If you, like myself, are reasonably obsessed with the semantic markup in your document and the logical flow of elements within, this is a great way to see exactly what someone with a browser that has no CSS capabilities will see. Anyone remember lynx (ah, the memories)?

Pretty straightforward, huh? That's the idea- you shouldn't have to jump t