tag:www.shayna.com,2009:/ Shayna Productions - Sandy Clark Sandra Clark 2009-04-22T09:00:02Z urn:uuid:163 <![CDATA[DocTypes (Structural HTML Series)]]> 2006-12-19T07:30:00Z Before truly embarking on Structural HTML, its important to understand the importance of DocTypes. What they are, what they are designed to be used for, and what they actually are used for.

DocTypes are a specific reference which belongs on the first line of your HTML page. (In other words, there shouldn't be any whitespace prior to it). They specify what "flavor" of HTML you are serving up. In some ways, using a DocType is a contract, saying that you plan on adhering to the specification of the DocType in your HTML.

]]> Before truly embarking on Structural HTML, its important to understand the importance of DocTypes. What they are, what they are designed to be used for, and what they actually are used for.

DocTypes are a specific reference which belongs on the first line of your HTML page. (In other words, there shouldn't be any whitespace prior to it). They specify what "flavor" of HTML you are serving up. In some ways, using a DocType is a contract, saying that you plan on adhering to the specification of the DocType in your HTML.

]]> urn:uuid:160 <![CDATA[Structural HTML, What is it?]]> 2006-12-12T07:30:00Z #content h1, #content .title{color: blue; font-size: 1.2em; } #content table{width: 60%;} #content table, #content td{border: thin solid black}

I've noticed lately that when people ask me for help, either on a list or directly that very rarely is the code they send me structural. Its a different paradigm and its something that while hard to grasp at first is amazing in its simplicity.

Basically Structural or Semantic HTML means to use the HTML to give your content more meaning. Rather than designing sites visually, it means thinking about what the information means and how it relates to another.

]]> #content h1, #content .title{color: blue; font-size: 1.2em; } #content table{width: 60%;} #content table, #content td{border: thin solid black}

I've noticed lately that when people ask me for help, either on a list or directly that very rarely is the code they send me structural. Its a different paradigm and its something that while hard to grasp at first is amazing in its simplicity.

Basically Structural or Semantic HTML means to use the HTML to give your content more meaning. Rather than designing sites visually, it means thinking about what the information means and how it relates to another.

]]> urn:uuid:145 <![CDATA[Accessibility Series - TBODY]]> 2006-08-11T08:00:00Z Lately, I've been involved in conducting an accessibility audit. One of the common mistakes I see coming up in page after page is the misuse of the <tbody> tag. So, since the people who are creating these pages are smart people, and I know that the people who read my blog are smart people. I figured maybe some of you are laboring under the same misconceptions.

This is an article in an occasional series on common mistakes in markup and accessibility. While its fine to always talk about what the guidelines are, sometimes its also good to talk about what not to do or how to do something properly.

For some reason, many people think that adding a <tbody></tbody> series of tags to their tables increases accessibility. While I'm not sure where this misconception came from, I know its out there. I can definitively state that the <tbody></tbody> tags do not increase accessibility in and of themselves. In fact using them by themselves is not a valid usage.

]]> Lately, I've been involved in conducting an accessibility audit. One of the common mistakes I see coming up in page after page is the misuse of the <tbody> tag. So, since the people who are creating these pages are smart people, and I know that the people who read my blog are smart people. I figured maybe some of you are laboring under the same misconceptions.

This is an article in an occasional series on common mistakes in markup and accessibility. While its fine to always talk about what the guidelines are, sometimes its also good to talk about what not to do or how to do something properly.

For some reason, many people think that adding a <tbody></tbody> series of tags to their tables increases accessibility. While I'm not sure where this misconception came from, I know its out there. I can definitively state that the <tbody></tbody> tags do not increase accessibility in and of themselves. In fact using them by themselves is not a valid usage.

]]> urn:uuid:125 <![CDATA[Open Standards vs. Microsoft - The battle continues]]> 2006-06-13T07:30:00Z There's been a flurry of posts, comments and other hoopla regarding IE7, Microsoft, The Web Standards Project (WaSP) and the community in general in May.

It all begins with an interview in Vitamin with Molly Holzschlag, a noted CSS author and a member of both Wasp and the Wasp MS Task Force (a task force within WaSP which coordinates with various teams within Microsoft. This interview, while fairly innocuous and diplomatic, created an entire firestorm of comments.

]]> There's been a flurry of posts, comments and other hoopla regarding IE7, Microsoft, The Web Standards Project (WaSP) and the community in general in May.

It all begins with an interview in Vitamin with Molly Holzschlag, a noted CSS author and a member of both Wasp and the Wasp MS Task Force (a task force within WaSP which coordinates with various teams within Microsoft. This interview, while fairly innocuous and diplomatic, created an entire firestorm of comments.

]]> urn:uuid:124 <![CDATA[Standards in a Nutshell]]> 2006-06-12T07:45:00Z While I was teaching up in Hartford, one of my students, Freddys Garcia, showed me this. It's a poster, ready for downloading that shows Web Standards in a very visual graphic way. Using 3 colors, Natalie Jost, has created a poster which shows how a site consisting of mixed up HTML, CSS and scripting becomes cleaner and easier to understand by separating the content, behaviors and presentation. A very cool and visual way of explaining something to management!

]]> While I was teaching up in Hartford, one of my students, Freddys Garcia, showed me this. It's a poster, ready for downloading that shows Web Standards in a very visual graphic way. Using 3 colors, Natalie Jost, has created a poster which shows how a site consisting of mixed up HTML, CSS and scripting becomes cleaner and easier to understand by separating the content, behaviors and presentation. A very cool and visual way of explaining something to management!

]]> urn:uuid:93 <![CDATA[CSS Naked Day April 5th]]> 2006-04-03T09:15:00Z On April 5th, I and hopefully a lot of other sites will be participating in Naked CSS Day. The idea behind this is that while CSS is wonderful for presentation, your code should be readable and understandable without any presentation at all. This means structural markup. I've always told co-workers and students that we should begin by coding our web pages as if it were 1995. By which I mean, no presentation, just content. If you can understand the content of a web page without any presentation, then you are well on your way to creating truly accessible web pages.

So join with me, strip off your CSS For the day and show us your content!

]]> On April 5th, I and hopefully a lot of other sites will be participating in Naked CSS Day. The idea behind this is that while CSS is wonderful for presentation, your code should be readable and understandable without any presentation at all. This means structural markup. I've always told co-workers and students that we should begin by coding our web pages as if it were 1995. By which I mean, no presentation, just content. If you can understand the content of a web page without any presentation, then you are well on your way to creating truly accessible web pages.

So join with me, strip off your CSS For the day and show us your content!

]]> urn:uuid:50 <![CDATA[Trimming Form Fields]]> 2004-07-07T06:30:36Z Jim Collins just sent me a fantasic link to an article that shows how a judicious use of CSS and DOM Manipulation via Javascript can enhance a form's accessibility by allowing a user to only see forms which are required. This goes a long way towards providing simpler forms to those with cognitive difficulties and also keeping them accessible to those with screen readers.

Check out http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html]]>

 Jim Collins just sent me a fantasic link to an article that shows how a judicious use of CSS and DOM Manipulation via Javascript can enhance a form's accessibility by allowing a user to only see forms which are required. This goes a long way towards providing simpler forms to those with cognitive difficulties and also keeping them accessible to those with screen readers.

Check out http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html]]> urn:uuid:41 <![CDATA[The big list of web standards]]> 2004-07-01T09:43:14Z

Simplebits has compiled a listing of 400+ links and articles on web standards. This one will keep me reading for a while.

]]> Simplebits has compiled a listing of 400+ links and articles on web standards. This one will keep me reading for a while.

]]> urn:uuid:37 <![CDATA[Form Widgets, Styling them or not?]]> 2004-06-30T04:20:56Z While I haven't been updating my blog as much as I would like to lately, I've been collecting information to share. One of the items, I've found of interest was this article from The Man in Blue, "Styling Form Widgets". The article could also be titled, "To style Forms, or Not to Style Forms" and frankly I think it brings up a good point. While we can style a lot with CSS, is it always in our user's best interest?

One thing that I do tend to do is to create styles so that both input buttons and specific links look the same. The reason I do this is that for some of the application programming that I do, some of the items that are really links (such as Return, etc.) are in the same line space as other buttons (save, delete) and really should look the same. Since I tend to not use graphical images for buttons anymore, I want them to look alike to increase usability. So in this case I guess styling a form button and a link are allowed (at least in my opinion).

What's your opinion? Read the article for yourself and see.

]]> While I haven't been updating my blog as much as I would like to lately, I've been collecting information to share. One of the items, I've found of interest was this article from The Man in Blue, "Styling Form Widgets". The article could also be titled, "To style Forms, or Not to Style Forms" and frankly I think it brings up a good point. While we can style a lot with CSS, is it always in our user's best interest?

One thing that I do tend to do is to create styles so that both input buttons and specific links look the same. The reason I do this is that for some of the application programming that I do, some of the items that are really links (such as Return, etc.) are in the same line space as other buttons (save, delete) and really should look the same. Since I tend to not use graphical images for buttons anymore, I want them to look alike to increase usability. So in this case I guess styling a form button and a link are allowed (at least in my opinion).

What's your opinion? Read the article for yourself and see.

]]> urn:uuid:24 <![CDATA[Microsoft ignores Web Standards]]> 2004-05-04T12:30:46Z Great article by Kirk Biglione on alt tag decrying and discussing Microsoft's inability to support web standards in a wide variety of its editors as well as its browser. Good reading.

]]> Great article by Kirk Biglione on alt tag decrying and discussing Microsoft's inability to support web standards in a wide variety of its editors as well as its browser. Good reading.

]]> urn:uuid:1 <![CDATA[Yellow Pencil explains ViewPorts]]> 2004-04-20T09:35:49Z Yellow Pencil has an excellent article on View ports, what they are, why we need to be concerned with them and some guidelines for re purposing content so that you can actually use the same content for multiple viewports.

Great article, Can't wait til their next one.

]]> Yellow Pencil has an excellent article on View ports, what they are, why we need to be concerned with them and some guidelines for re purposing content so that you can actually use the same content for multiple viewports.

Great article, Can't wait til their next one.

]]> urn:uuid:55 <![CDATA[Seybold teaches structural markup]]> 2004-04-05T07:50:54Z I've had a lot of questions regarding css lately and while the questions are different, the answers still cover the same ground. Structural Markup. If you plan your XHTML/HTML properly and markup your content so that the underlying structural meaning is there, the css selectors are actually a lot easier to handle. So what is structural markup?

Structural markup is the effort of marking up your content so that the content itself makes sense.

While writing the actual CSS is simple, using CSS to do your layouts requires a slightly different way of thinking than most of us are probably used to.

Rather than thinking about things like "this goes here and this goes here" while we are working on a page or a layout, we need to think about the kinds of information in our page and the structure of that information.

Seybold has a great online tutorial on semantic (structural markup).

]]> I've had a lot of questions regarding css lately and while the questions are different, the answers still cover the same ground. Structural Markup. If you plan your XHTML/HTML properly and markup your content so that the underlying structural meaning is there, the css selectors are actually a lot easier to handle. So what is structural markup?

Structural markup is the effort of marking up your content so that the content itself makes sense.

While writing the actual CSS is simple, using CSS to do your layouts requires a slightly different way of thinking than most of us are probably used to.

Rather than thinking about things like "this goes here and this goes here" while we are working on a page or a layout, we need to think about the kinds of information in our page and the structure of that information.

Seybold has a great online tutorial on semantic (structural markup).

]]> urn:uuid:53 <![CDATA[March for Compliance]]> 2004-04-01T07:32:08Z First Annual March for Web Standards!

Washington DC, on the National Mall, April 1st 10am.

What Do We Want?
  • An immediate cessation of the use of all presentational <tables> and <font> tags.
  • Full withdrawal of Microsoft Internet Explorer and any version of Netscape earlier than 7.x from all occupied PC's.
  • A Constitutional Amendment consisting entirely of the upcoming XHTML 2.0 spec.
  • A complete redesign of the executive, legislative, and judiciary websites using valid, structural XHTML markup and skinnable CSS layouts.

When Do We Want It?

Now!]]> First Annual March for Web Standards!

Washington DC, on the National Mall, April 1st 10am.

What Do We Want?
  • An immediate cessation of the use of all presentational <tables> and <font> tags.
  • Full withdrawal of Microsoft Internet Explorer and any version of Netscape earlier than 7.x from all occupied PC's.
  • A Constitutional Amendment consisting entirely of the upcoming XHTML 2.0 spec.
  • A complete redesign of the executive, legislative, and judiciary websites using valid, structural XHTML markup and skinnable CSS layouts.

When Do We Want It?

Now!]]> urn:uuid:46 <![CDATA[Structure is important!]]> 2004-03-26T05:47:02Z Recently I have started to be involved in a redesign. Someone came up with a prototype and when I looked at it, it was the usual table elements, with visual presentation mixed in with content. Items were styled as <span class="h2"> instead of using an H2. Now not to denegrate the person who did this, they were simply doing what has worked for them for a long long time, but some of the other people in this redesign started to talk about why semantics, the structure of the document is as important as the look of the document.

For those in that discussion and for those of you who know someone who still writes code like <span class="h2"> (I know no one reading my blog would do that). Molly Holzchlag has an article up on informit, "Integrated Web Design: CSS Beyond the Retrofit" which should be required reading for people serious about separating content from presentation.

]]> Recently I have started to be involved in a redesign. Someone came up with a prototype and when I looked at it, it was the usual table elements, with visual presentation mixed in with content. Items were styled as <span class="h2"> instead of using an H2. Now not to denegrate the person who did this, they were simply doing what has worked for them for a long long time, but some of the other people in this redesign started to talk about why semantics, the structure of the document is as important as the look of the document.

For those in that discussion and for those of you who know someone who still writes code like <span class="h2"> (I know no one reading my blog would do that). Molly Holzchlag has an article up on informit, "Integrated Web Design: CSS Beyond the Retrofit" which should be required reading for people serious about separating content from presentation.

]]> urn:uuid:14 <![CDATA[10 ways to speed download time.]]> 2004-03-09T10:48:00Z Trenton Moss has an article on Evolt, 10 new ways to speed download time. Not surprisingly most of the tips revolve around using CSS.

Have a read.

]]> Trenton Moss has an article on Evolt, 10 new ways to speed download time. Not surprisingly most of the tips revolve around using CSS.

Have a read.

]]>