Monthly Archives: September 2008

A quick note on naming conventions

Many of my students don’t see the need or pay much attention to naming conventions; especially in the beginning stages of learning web design. The subject of naming conventions is a big one and there are several articles that deal with it well. Brielfly, understand that how you name your file does matter for several reasons:

  1. The files should have meaningful names so you can easily identify them
  2. Other files may reference them and are looking for specific names
  3. Javascript functions sometimes require filenames to have a specific pattern to work properly
  4. Many Content Management systems, like WordPress, require template files to be named in a specific way so the application can call them.
  5. Some files like RSS feeds, require specific filenames so applications like iTunes can recognize them.

For all of these reasons and more, understanding the importance of filenaming conventions is important for web designers and producers of digital content.

Accessibility: <i> vs <em>

For my students…

In one of the Quiz questions in Unit C, the following question was asked…

The tag <i>…</i> is available only to devices that can visually display text.

  • Incorrect Response: True
  • Correct Answer: False

The text book author on page c-6 states that this is True although the quiz is set up to mark the correct answer as false. So which is correct? The quiz or the author on page c-6?

I did a little research to answer the quesiton. Several pages from the W3C are included that explain how tags should be used when we are structuring HTML documents.

  • The HTML 4.0 Main Content page 1
  • Using the <em> and <strong> tags 2
  • Using the <i> and <b> tags 3

According to these documents, <i> and <b> render (meaning visually display) italics and bold text. <em> and <strong> are called logical tags and are used for symantic changes (changes in meaning) in non-visual representations of our web pages. Italics and boldness are visual concepts and can be used to "mean" several things. Emphasis and strongness have specific meanings for enhancing a passage of content. Since we are in the business of communicating via the web, it is in our benefit, and the benefit of our clients, for us to understand the nuance of each.

Alright then, so we are talking about how each of these approaches to modifying content presentation are supported by screen readers. We’ve read how the W3C recommends we design but what really (add emphasis to the word really) happens?

After searching a bit on Google for which tags are support by screen readers, I came across the following article by Steve Faulkner 4 . This author tested two different screen readers, Jaws and Windows Eyes, and found that neither "rendered" differences in content when using the <i>, <b>, <em>, or <strong> tags. Perhaps all this fuss about making our content accessible doesn’t matter because the device vendors aren’t supporting the nuance of meaning anyway. What’s a designer to do?

Faulkner concludes…

"While it is good to know this, it is not a reason to not use these elements to convey meaning. Accessibility is not just about people with vision impairment, it’s about all user’s with disabilites, and web standards is not just about accessibility. This is merely another example where screen reader vendors are not serving their customers well."

I agree, just because particular vendors are not utilizing the tags that have been designed to support nuance of meaning for non-visual rendering devices, it does not mean that we as designers should discontinue their use. Once the device vendors, or at least the ones mentioned in this test, catch up with the needs of their customers, our web pages will already be designed to utilize those technologies. We also don’t know what technologies are coming down the road that will take advantage of them. An artificial intelligence program that can discern emotive changes in content based on tag structure? Who knows. As designers of digital communications, we are served by understanding what tools are in our toolbox. It makes us better craftspersons.

References

  1. The HTML 4.0 Main Content page. The World Wide Web Consortium. http://www.w3.org/TR/REC-html40/cover.html#minitoc
  2. Structured text. The World Wide Web Consortium. http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2
  3. Font style elements. The World Wide Web Consortium. http://www.w3.org/TR/REC-html40/present/graphics.html#h-15.2.1
  4. Faulkner, Steve (February 28th, 2008). Screen Readers lack emphasis. http://www.paciellogroup.com/blog/?p=41

Properly closing xhtml tags

One of the concepts that stump new students of html (and xhtml) is the notion of properly closing tags. For common tags that have an opening and closing tag this is not so much of a problem, i.e. the paragraph tag clearly demarcates the beginning and ending of a paragraph.

<p>content</p>

That seems simple enough. The confusion lies in empty tags like the meta tag, img, br, and hr tags that don’t have content per se to surround. In this case the tags must be closed with a /> as follows:

  • <meta some attributes />
  • <img some attributes />

OK… fine you might say. I can learn and follow a rule that has been imposed upon me, but why is this necessary? The answer may lie with the W3C recommendations and what issues those rules are meant to solve or avoid. In this case, it is with assistive technologies.

According to the web page cited below by the W3C, different user agents, i.e. screen reader programs, browsers, cell phones, iPhones, or the next gizmo that reads web pages, etc., solve the issues of displaying html code differently. That is, how Firefox interprets html internally can be different than how IE, or Safari does it. So, to prevent errors from happening, strict rules are created to make sure each agent can produce reliable results.

References

F70: Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup, The W3C Techniques for WCAG 2.0, http://www.w3.org/TR/WCAG20-TECHS/F70.html

wmv media files in non-IE browsers

My students may be wondering why the video file supplied with their assignment plays properly in IE with an embed tag, but may not work in Firefox. It is because the author of your text book used a wmv media file which is a windows media format. The author is a PC centric developer. PCs running Windows can play it if the Windows media player is loaded on the machine and IE is the browser being used to view it. My guess is that the author had that set up and therefore did not run into problems as he was writing the book. Note: I have successfully played wmv file he supplied, using the embed tag as he suggested, with Safari on the Mac without incident. However, Firefox will not play it using the embed tag.

The following forum discussion on the Mozilla web site discusses this matter in length. Caution… it is technical. http://forums.mozillazine.org/viewtopic.php?t=206213

Many designers today prefer to use Flash to embed video. The Flash player is loaded on 99% of browsers on the internet. As such, media that has been converted to a .flv format to play through the Flash player will play with no problem through the majority of browsers. That is why Youtube, Blip, and most other video upload services use Flash as their media player. While that will not solve all of your design problems involving playing media files, it will meet the needs of the majority of your audience.

I am in the process of updating this course and will discontinue using the current book in the future. For now though, understand that many of the authors practices, while not standards or W3C compliant, are still coding practices you will encounter in the field. Knowing a bit about them will enhance your skills as a designer – especially if you are called to update an existing client web site.

Whoa! Hello!! I sure messed that up…

For those special few that may be actually reading this blog, you may noticed I totally screwed up the format. Yep! I’m playing around with my template and screwed it up. I’ll fix it later. So for the mean time, bear with me and enjoy the posts anyway.