Indiana University: IT Training Tips Blog

For people new to the web design game, the process can seem kind of overwhelming. After all, at various points when designing and developing a website, you need:

1. aesthetic skills (to make things look good)
2. information architecture skills (organizing the content in a way so that users can find what they need)
3. interaction design skills (making sure that the paths within a website makes sense and are pleasurable for the user)
4. technical skills (XHTML, CSS, knowing how to turn on a computer)

Many web design shops have pros who are experts in each of these areas. How can you, a smart but inexperienced person, compete with that?  You're just trying to put together a little web site for yourself, your aunt the locally famous banjo player, or a volunteer organization...

divide et impera, or, Divide and Conquer

(more...)

Way back in July, the W3C (the governing organization of web standards) announced that it was not going to renew the charter of the XHTML2 working group. In non-bureaucracy speak, that means the W3C has stuffed XHTML2 standards development into a bottle and chucked it out to sea, where it will spend the rest of eternity bobbing on the waves and following the thermal currents. The W3C did this so that it could focus all of its attention on developing HTML5.

"Wait a minute, " one might shout on hearing this news, "I thought XHTML was the wave of the future, and HTML was what Cro-Magnons used to code their web pages??? What's going on?"

Its easy to be confused, and, yes, even a little bit alarmed by this news. But, in essence, the labels here don't really represent what you think they do: XHTML2 isn't really XHTML as you know it, and HTML5 encompasses a lot more than HTML4.01. Here's what you need to know about both of these standards: (more...)

IT Training and Education currently offers three workshops on Dreamweaver CS4:

1. Dreamweaver CS4: The Basics covers the Dreamweaver environment and building a publishing a simple web site using tables.
2. Dreamweaver CS4: Creating Websites with CSS concentrates on how to build a website using Cascading Style Sheets to control the layout.
3. Dreamweaver CS4: Navigation, Templates & Media Integration covers how to create pop-up menus for navigation, build Dreamweaver templates to simplify site maintenance, and include multimedia on your web sites.

While these workshops provide an excellent platform on which to start exploring web design and development using Dreamweaver, they are by no means exhaustive. And, there may be certain concepts (especially related to CSS) for which you'd like additional reinforcement. This is where lynda.com can come in. Remember that from now until Dec. 20, IU community members get FREE access to lynda.com. As of this writing, lynda.com has 8 Dreamweaver CS4 series, for a total of almost forty additional hours of training on Dreamweaver CS4. Awesome! And when we retire, we'll actually have time to watch all of it.
Here's a chart to help you narrow down which lynda.com Dreamweaver CS4 videos cover the topics you're interested in:

See a more detailed chart after the jump... (more...)

This entry in the “Web Accessibility Made Easy” series explains expanding abbreviations and acronyms so that, for instance, all users know that ARIA means Accessible Rich Internet Applications and not Automated Robot Integration Assembly.

ABBR and ACRONYM Tags

When web designers use the <abbr> or the <acronym> HTML tags, abbreviations and acronyms will be read as their full text. However, this is only true if the user has set their screen-reading software to do this. Web designers need to set the title attribute of the <abbr> or <acronym> tags to the actual meaning of the phrase. See code example below.

Example:

<acronym title="Web Content Accessibility Guidelines">WCAG</acronym>

Using this method a web designer complies with the guideline below. However, as mentioned above this coding only provides the desired result if the screen reader user has set their preference (settings) to automatically voice the entire text of the acronym or abbreviation tags. Therefore, as is common writing practice, it is important that for the first use of a phrase which will subsequently be represented by an acronym or abbreviation, that the phrase be entirely spelled out and followed by the desired acronym or abbreviation in parenthesis (e.g., World Wide Web (WWW). For subsequent uses the acronym or abbreviation tag should be used. Then, for screen reader users who have set their preferences correctly, the entire phrase will be spoken.

Guideline

IU Web Accessibility Guidelines

2. Specify the expansion of abbreviations or acronyms where they first occur in a document.

This guideline requires that the first time an abbreviation is used, it is expanded. Common writing practice is that the first time a name or phrase is used for which an acronym will be used later, the words should be spelled out followed by the acronym in parenthesis. Web coding should employ this same practice. After the first instance, it is up to the web designer to decide whether to continue to use the <abbr> or <acronym> tags to expand the phrase.

Tutorial

This tutorial will again be using the Bad example web page, Good example web page, their associated stylesheets and Dreamweaver.

1. The Bad Code – Acronyms not Expanded

<p>Web accessibility standards have been developed by the W3C (http://www.w3c.org)</p>

The code shown above will validate to the W3C standards. However, since this is the first instance of an acronym, it needs to be expanded.

2. The Good Code - Acronyms Expanded

Example 1…First Instance of the use of a phrase for which an acronym will subsequently be used:

<p>Web accessibility standards have been developed by the World Wide Web Consortium (W3C), http://www.w3c.org.</p>

Example 2….Use of the acronym tag for the second and all subsequent uses of the acronym:

<p>Web accessibility standards have been developed by the <acronym title= “World Wide Web Consortium” >W3C</acronym> (http://www.w3c.org)</p>

Simply expanding the acronym physically in the text (example 1) or using the <acronym> tag in conjunction with the “title” attribute to expand the acronym (example 2) is all that needs to be changed to have the acronym display correctly to all users.

3. All users will know understand the acronym

That is it. Because the acronym has been expanded once, if a user cannot remember what it means they can refer back to the original expansion. Using the <abbr> or <acronym> tag is also beneficial because it can be used over and over again with minimal interruption to the visual design.

Wrap Up

Expanding abbreviations and acronyms not only helps users of assistive technology, it is beneficial to all users. With each new day in this age of the internet and text messaging, new acronyms and abbreviations are emerging. There are even online dictionaries of acronyms and abbreviations. So it is very important that web coders follow the suggestion above regarding the use of acronyms and abbreviations! Physically expanding abbreviations or using the <acronym> tag to expand an acronym adds very little time to the design and coding of a website. However, this practice contributes dramatically to the understanding of a web page.

This entry in the “Web Accessibility Made Easy” series discusses two guidelines that are essential to well-formatted layout and design of data tables.

Tables on the web have been around since the early days of the web. Okay…not the early, early days of the web, but tables were first discussed in 1996 (IETF RFC 1942) and then later included in the HTML 3.2 specification. This specification ensured that tables were the formalized way to display data from a spreadsheet or database.
(more...)

This is one of the easiest web accessibility guidelines to implement. Though this is easy to code, creating a proper alt tag is not always the easiest thing to do. (And yes, technically the Alt tag is actually an attribute of an element, but the more common phrase will be used here.)

Alt tag basics

The Alternative tag, commonly referred to as the “alt” tag, is an attribute of the image tag ("img") in HTML. Alt tags are read by most browsers. They provide an alternative text description for images or other elements so that those using screen readers have access to information conveyed by graphics. Also, if the image doesn’t load or only loads partially, the alt tag provides information conveyed by the graphic.

(more...)

Web authors have a wide variety of HTML or XHTML tags to work with when creating Web pages. In addition to common tags like <p>, <ul> or <strong>, there are lesser-known, but still useful ones such as those below:

There are dozens of similarly useful and perfectly valid elements available for use. Some of them, such as <code>, have a default style in most browsers (<code> will render in a monospaced font). Others such as <acronym> have no default style. However, you can use the tags as hooks to add your own style by redefining the look of the element using CSS.

(more...)

When I teach a workshop on Adobe Dreamweaver or Fireworks, I'm always amazed by a question that participants don't ask. (No, not: "Why can't you and the laser pointer get along?"  That question, I'm afraid, has no answer.)

The question that's never asked is: "How do you come up with these colors?"  And by "these colors", I'm referring to the 6-digit hexadecimal codes that we use throughout the Dreamweaver and Fireworks workshops to designate specific colors for display on the web:

(more...)

A number of laws have established precedence in issues of web accessibility. These laws continue to evolve and face legal challenges to establish benchmarks of web accessibility. Some laws related to web and information accessibility apply to just web sites and publications of the federal government. Others apply more broadly. Below are portions of the laws that may apply to web accessibility and higher education.
(more...)

Design First, Then HTML-ize

If you're new to the web design game, developing a new website (or redesigning an old one) is much like starting a new job: there are a thousand small details competing for your attention and its difficult to know how to proceed in a relatively efficient fashion.

One typical workflow, especially for smaller sites that only have static HTML pages, is to design the appearance of the site first. Some folks sketch designs on a pad of paper, others use a graphics program like Adobe Photoshop or Adobe Fireworks to lay out how the site will look. In fact, there's been more than one great website design where the impetus came from cocktail napkin scratchings at a Friday night happy hour.

The Challenges of Translating Your Design into HTML

(more...)