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: , , , , , ,

in Web-

(with apologies to ee cummings)

in Web-
standards       when the world is markup- 
luscious the semantic
html advocate

separates       words       and presentation

and everyone comes 
running from the inaccessible and
unusable and it's
joy

when the content is open-wonderful 

the valid
old handcoder posts 
far       and       wide
and readers come dancing

from mobiles and screen-readers and

it's 
joy
and
     the
           strict-doc

standardsista       posts 
far
and
wide

Technorati Tags: , , , , ,

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: , , , ,

Framing the web design experience

Dan Russell has a couple of posts on sense making over at Creating Passionate Users. Today’s post said something that stuck me as a key element in terms of teaching web design.

The point is that you need to frame things because the act of framing helps to focus on what to do next.

There’s a struggle involved in getting teachers who are used to teaching methods that began with Photoshop comps or tables based design moved over into a way of thinking that emphasizes semantics and interoperability. I think what we have here is a framing issue.

We need to reframe the whole notion of web design. Instead of thinking first about how we expect to make a site look, we need to think first about how we expect a site to be semantically organized. If we organize the content in a semantic manner, we achieve interoperability. Any design can be added to the structure we develop. Or as Mani Scheriar said in a previous post,

Let’s code our XHTML as if we plan to have 10 different designers apply their own unique layouts to it.

This is truly a change in thinking, a new frame for the whole idea of “designing a web site.” We can no longer assume that our web sites will be viewed on computer monitors. There are too many mobile devices out there. More, in fact, than computers. And at least 10 percent of your visitors will be using some sort of assistive device such as a screen reader to obtain your content. We have to think first about content and how it can be coded semantically in order to make our sites operable and accessible for any device. Once that goal is reached, we can think about creating a beautiful appearance for our content.

For those of you planning to attend SXSWi 2007, I invite you to attend my session on Sunday afternoon called “Best Practices in Teaching Web Design.” It’s a 25 minute power session with co-presenter Stephanie Troeth.

Technorati Tags: , , , , , , , sxsw