Dreamweaver CS3, Spry widgets, and accessibility

I had a chance to try out Dreamweaver CS3 recently. One of the new features is called Spry. It’s a set of widgets that put some cool looking stuff on an HTML page with Dreamweaver ease. These work using JavaScript, XML, and CSS. While they are definitely cool, I suggest you test them carefully in differing circumstances before deciding to use them. Do at least the following browser tests.

  • Try them with JavaScript turned off to make sure your users can still get to your content if they are without JavaScript
  • Try them with CSS turned off to see how much sense it makes without styling
  • Run some online accessibility tests with Cynthia Says or some other test app

I’m not saying don’t use them. Each one of the widgets comes through testing like I just described in different ways. So much depends on which of the Spry widgets you pick that it’s hard to generalize about them all. Use them if you want, but only after making sure that your decision to do so is based on the knowledge that you aren’t making your content unreachable to large numbers of your visitors.

Technorati Tags: , ,

Reordering styles in DW CS3 CSS Styles panel

A nice new feature coming in Dreamweaver CS 3 (out in April from Adobe) is the ability to drag and drop styles in the CSS styles panel to change the order of the styles in the style sheet. It works in the same way moving a layer up or down in a Photoshop document works. Just grab the style you want to move. As you drag it a black bar appear that indicates where it will drop.

In my latest book, Mastering Integrated HTML and CSS I have a chapter that explains how to use CSS with Dreamweaver. At the time I wrote the chapter, the only way to reorder styles in a Dreamweaver style sheet was to open the style sheet up and cut and paste to achieve the order you wanted. If you own that book, take note of this new feature, because it makes keeping styles in a particular order for cascade purposes much easier.

Technorati Tags: ,

The Joy of HTML

I don’t understand why people treat the Code View option in Dreamweaver like it’s a bad thing. Like everything has to be done in a visual environment. Like the stuff behind the magic mirror of Design View is too awful for even a glance.

If you are using Dreamweaver, or teaching Dreamweaver, or writing a book about Dreamweaver, you and your students or readers deserve the chance to appreciate the joy of a clean, semantic page of HTML. Clean, semantic HTML is a joy to behold. Everyone deserves the opportunity to admire that nicely crafted doctype, the powerful link to the stylesheet, the well-written title. And what a body you get to see! You see properly marked up headings and paragraphs and lists and blockquotes, uncluttered and clean and purposeful. You may see an occasional div enclosing a group of page elements that fit together logically into a stylish and functional part of a page: perhaps a luscious sidebar or a shy footer.

The joy of clean HTML is that it’s all content. There is no clutter, no presentational trash like font tags and align attributes. Just beautiful words, words marked up or identified to indicate their logical purpose as headings or lists or acronyms.

There’s a name for HTML like that: standards-compliant.

Standards-compliant HTML goes anywhere, does everything, never quits being available, and always makes sense no matter how you get to it. That’s a lot of joy from something so basic and simple as clean markup.

If you are using Dreamweaver, or teaching Dreamweaver, or writing a book about Dreamweaver, open things up to Code View now and then, or maybe Split View, so that everyone can see what they are really doing. Then people can see if what they’re creating visually is joyful, clean, and semantic HTML. HTML that is meant for the masses. HTML that can go anywhere, do anything and always make sense.

That’s too hard you say. You have to learn CSS, you say. CSS takes too long, you say.

But. There’s motivation to consider. If you are using Dreamweaver, or teaching Dreamweaver, or writing a book about Dreamweaver, do you think you or the people you are training want to be what Kathy Sierra calls kick-ass users? Do they want to reach the most people on the most devices? Do they want to create work that will go anywhere, do anything and always make sense: professional level kick-ass work?

Let’s look at motivation a bit more. Suppose someone using Dreamweaver wants to move something over to the right on the page a few pixels. Using only Design View, you could have them use the text indent icon on the Property inspector. The stuff would move, right? But what if they were using Split View and realized that they had, in reality, created a blockquote. Having survived 10th grade English, your user realizes in her heart of hearts that whatever she just moved a few spaces really isn’t a blockquote.

Here’s your moment of motivation. In this moment, you show this user how to move things to the right just a bit with a CSS property called margin-left hitched up to a class or id for the element being moved. Not too hard, not too much CSS to take forever to learn. Just enough CSS to help the user kick butt with clean, semantic, standards-compliant HTML. Ah, joy.

Another example. Suppose you or a person you are training creates a class and assigns it to a paragraph. Wow, you feel cool cause you’re using CSS. However, each time you press Enter in Dreamweaver and type another paragraph, the class attribute persists. Soon you have a page full of paragraphs with dozens of class attributes scattered in the markup.

Unless you looked at Code View now and again, or perhaps work in Split View, you’d never know that the page was littered with class attributes. If you did look at Code View, you might wonder if you really need to assign the same class to every single paragraph you write. Isn’t that, like, classitis or something, dude? Here’s that moment of motivation when you explain that one style for the p element could do the same thing with no classes needed anywhere. Suddenly the difference between cluttered markup and clean markup makes sense and CSS isn’t so hard after all.

I’ve been known to call this notion integrated HTML and CSS, but today, I’m calling it joy.

Is writing standards-compliant web pages is a worthy goal? Is work that will go anywhere, do anything and always make sense a worthy goal? I certainly think so. If I’m right, we have admit that Dreamweaver’s Code View is worth using, at least sometimes. We have to admit that using CSS instead of presentational HTML is easier in Dreamweaver if people can experience the joy of HTML.

Technorati Tags: , , , , , ,

Awesome

Just came back from a party for the launch of Adobe Creative Suite 3 sponsored by my local Adobe User’s Group. Despite some technical glitches involved in the live stream from Adobe, the product demos of how everything is integrated and incredibly easy to use as a product suite were really impressive. Looks like a big step up for almost every product in the line. Can’t wait to see what they’ve done with Dreamweaver in more detail. People are going to love this stuff.

My ebook’s days are numbered

I’ve been selling an ebook, A Beginner’s Guide: Writing CSS with Dreamweaver 8 for the last few months. This ebook is about to be retired from service. The reason is the upcoming release of my new book, Mastering Integrated HTML and CSS. The new book will be released on Feb. 27. It contains a chapter about using CSS in Dreamweaver 8. The chapter in the book covers basically the same material as the ebook, but the chapter does a better job with the topic. The chapter benefitted from being newly written and reorganized after learning from the initial experience of writing the ebook. And the chapter also benefitted from a couple of suggestions from the book’s technical editor, Zoe Gillenwater. She’s an expert Dreamweaver user herself and pointed out a couple of things that I hadn’t mentioned in the ebook that helped improve the DW8/CSS information in Mastering Integrated HTML and CSS.

The ebook was a help to me, because I used it to show my editors at Wiley that a chapter about using CSS in Dreamweaver 8 actually had a place in a book about hand-coding HTML and CSS. I hope it has been helpful to those of you who have purchased it for your own learning or to use in a classroom. (The license allows reproduction for classroom use.)

Technorati Tags: , , , ,