Sample page using semantic mark-up as viewed in Firefox.

Sample page using non-semantic mark-up as viewed in Firefox. Give or take a few pixels these look pretty much the same.

Sample page using semantic mark-up as viewed in Internet Explorer 6. As you can see, the banner breaks in IE 6 but everything else looks pretty much as expected. The page also breaks in IE 7 and IE 8 though the IE 8 version looks different. I've included these samples as a reminder to always check sites in multiple browsers.

Sample page using non-semantic mark-up as viewed in Internet Explorer 6. Again it looks almost the same at the semantic version, even breaking in the same manner.

The other day, Aaron Rester posed this question on Twitter: Webbies: any advice on explaining semantic HTML to non-webbies?

I wrote back that I usually show them some source code and walk them through things like using h1 and so forth for headers. That is what I usually do. In fact I'd just done that the other day when I was showing someone the changes I would recommend for search engine optimization (SEO).

But the question made me wonder if my explanations were adequate. If someone doesn't know anything about HTML or other mark-up languages, will such an explanation make sense? Or is there a better way to explain the differences between structural and presentational mark-up to clients and new Web designers?

Why do clients and other non-webbies need to know about semantic HTML?

Typically this topic comes up most often when one is discussing issues related to search optimization and accessibility. If a client needs to enhance their site for SEO, I may be recommending changes to the code that they won't even see when looking at the page in their browser. Understandably they will want to know why they should pay me to do things to their site that they won't notice. The changes we make may not be visually apparent, but they will convey additional information to Web browsers and search engines that can aid accessibility, usability and searchability.

What is semantic HTML?

Semantics is the study of meaning. Merriam-Webster's Online Dictionary provides us with a definition that relates closely to how the term is applied to HTML "3 a : the meaning or relationship of meanings of a sign or set of signs; especially : connotative meaning." HTML uses elements that convey structural meaning to Web browsers and other user agents such as search engine crawlers.

Writing a page in semantic HTML simply means that you are applying the appropriate structural elements to the various bits of content on a page. Huh? Code elements act like labels that tell the Web browser what each section of content is. HTML gives us structural elements to indicate headers, paragraphs, lists, tables and so forth. If I want to tell the browser to start a new paragraph, I'll type <p>. If I want to start a new subhead, I'll type <h5>.

Then isn't all HTML semantic?

You would think so, but no. Web browsers can be both fussy and forgiving. I can code the same content in multiple ways that will each look very similar when viewed, but will actually convey differing amounts of information to user agents.

Instead of using an <h5> I could use <p><strong>in front of my subhead and make it look the same as it would using <h5>. Such usage would be considered presentational mark-up. It can affect how the header looks, but it is not semantically correct because it doesn't let user agents know that this is a subhead. If a Web designer applies the incorrect elements to page content, the site may look perfectly acceptable. But it is not passing on vital information that user agents may need to:

• Help a visually impaired visitor navigate the page using screen reading software.
• Tell Google and other search engines what topics are the most important ones on the page.
• Show that you are citing a reference document such as a book.
• Indicate that you are presenting computer code, etc.

Same content, different mark-up

To illustrate this point I've created 2 very simple Web pages, one uses semantic mark-up and one using non-semantic mark-up. Basically the non-semantic version uses <p> for just about everything. When you view the pages through a regular browser you'll see that the semantic and non-semantic versions look pretty similar. They both look normal in Firefox, Safari and Opera, and they both break in various versions of Internet Explorer. You don't see the difference visually until you look at the pages in the text browser, Lynx.

When viewing the semantic page on Lynx, we can see that there is order to the page; it looks a bit like an outline. The menu looks like a menu and the headers standout to provide an introduction to the other text.

HTML elements in action, offering added information to user agents

Text readers for the visually impaired and search engine spiders are getting even more information than we can see in the Lynx semantic html example. They know that each menu link should be distinguished from the next. The use of an unordered list for the menu tells user agents to separate these links in a way that use of <p> does not, and allows users of screen readers to jump through or skip these elements to proceed to the main text. In the non-semantic version this is not clear, a text reader may speak all of those links together, making it more difficult for the user to navigate.

These user agents can also tell that the first header is more important than the second because it has been coded as an <h3> while the second header is an <h4>. Headers are ranked in order of importance from 1-6. Here we're using an <h1> for the site name, the most important header on the page. Search engine crawlers will see words in an <h1> as being more descriptive of the page as a whole. This is useful for search engine optimization, because we can include our keywords and phrases in our various headers to let the search engines know that core topics we are covering on the page. Thus on this page you'll notice that I've used the phrase "semantic HTML" in both the text and subheads (which in this case are <h5>'s.) That said I've not used it in every subhead because having these headers make sense to you, the reader, is still more important than SEO. People come first, then robots.

In this example I've focused on just a few a few of the many HTML elements that are important to semantic mark-up, but hopefully these will give you a clearer sense of how such usage can help SEO and accessibility. Other elements such as address, cite and blockquote can add additional meaning to a page's code. You can learn more about other elements and related issues in the reference links below.

Semantic mark-up, validation and content

It's always a good practice to validate your code to check for errors and potential problems, but site validation doesn't guarantee that you've used the best mark-up for the site. While the validator can make sure you've used allowed elements, it has no way of knowing if you've them in the most appropriate manner. Both the semantic and non-semantic page samples used in this post were produced using valid W3C standards compliant XHTML and CSS. One is clearly better formed than the other, but both also break in Internet Explorer.

Thus it's also important to check sites in multiple browsers and to simply think carefully about how visitors will read the site. If my samples were for real sites, I'd fix the IE problem, but I used it here to remind us that using valid semantic code is just the beginning. There will always be additional details we must consider.

It's also worth noting that, when it comes to SEO, a semantically well-formed site is not a substitute for good content. Search engines such as Google are designed to help users, like you and me, find the most relevant pages for the information we seek. With that goal in mind they have to accommodate a wide variety of coding differences. If your competitor has great content and plenty of good inbound links, while yours does not, then his/her site will still win out, even if the code is atrocious. But if you can produce great content and present it in the appropriate format you will be off to a good start.

Semantic HTML Resources

• The Elements of Meaningful XHTML (presentation showing examples)
• Fangs Screen Reader Emulator
• Guide to Semantic Use of HTML Elements
• Illinois Information Technology Accessibility Act Implementation Guidelines for Web-Based Information and Applications 1.0
• More than one H1 on a page: good or bad? (Video by Google's Matt Cutts)
• Semantics in HTML 5
• W3C Semantic Data Extractor
• W3C: G115: Using semantic elements to mark up structure

Monday I started redesigning a site that I'd first built in 2003. Tuesday I received today's mission from Problogger's 31 Days to Build a Better Blog project: "Write a list post." Somewhere in my brain these thoughts collided, so today I thought I'd share some of the core issues I consider when working on a redesign project.

Why do you want to redesign your Web site?

Hint: The answer is not "because the old site is old and boring and I'm sick of looking at it. I want something new." A lot of site owners use this line of reasoning, but we have to keep in mind that we're designing sites for our visitors, not ourselves. If you're thinking about redesigning a site, take stock of the old one.

Look at your site analytics and read your visitor feedback to gauge what is or isn't working. As Cameron Moll wrote in 2005, Good Designers Redesign, Great Designers Realign, so it is up to you determine which changes will enhance your site and which are change for the mere sake of change.

Web site goals

You've heard me wax forth about goals in my Planning Your Web Site Tutorial, so you already know that you have to set specific goals to develop content and measure results. Presumably you did that when you first built the site. But things change over time. Does your original goal still apply? Or is it time to focus on something else? For the site I'm working on now, the goal remains the same, but the scope has expanded. The site was developed to market one product. Now the company has 9 products in 3 product lines. These lines have related, but slightly different target audiences. So while the site still has a goal to sell widgets, it must now be adapted to appeal to a broader audience.

That site had, and continues to have, a clear objective. Such objectives are easy to determine for small commercial sites. For others it is more difficult. Most of us want our sites to do it all: sell more widgets, increase brand recognition, make coffee, etc. But if we try to tackle too much we'll never develop a clear vision. Instead try to focus on one primary objective. What do you want the site to accomplish this year? Is this the same objective you had originally or have situations changed in such a way that you should now focus on something else?

Let's say you're the chair of the philosophy department at University X. You have an interest in applying philosophical thinking to real-world scenarios and want to add more interdisciplinary classes—covering topics such as cognition and intellectual property. Doing so will require more faculty—and the funding to hire them. To make a case for this you must demonstrate a demand for these courses, a demand that can be shown if there is an increase in the number of students taking philosophy classes or, better yet, selecting philosophy as their major.

You have several weighty goals for the department, but if you establish student recruitment as the primary goal of your Web site, you are one step closer to achieving the rest.

Content: What information must you provide to support your goal?

Given that you already have a site, you may have existing content that will also serve your goal. That said it can be distracting to sort through what exists and what doesn't. Instead come up with a new outline based on the new goal. You can then use that to determine what old content to keep or revise, what content to create anew, and how the content should be organized.

For our philosophy site we can consider our recruitment goal by asking the following types of questions. What do students need to know about philosophy to decide if it is right for them? What are the features of the program? What benefits will it provide? What are the requirements?

Students must be given sufficient information to determine if the subject is right for them or not. Philosophy seems vague and esoteric to many, so the site should define the topic, the skill sets used in studying it and the benefits gained from its study. In our current economy, when many choose a major based on how it will help them find a job, it's also helpful to show the practical value of studying philosophy.

I majored in Philosophy because I found it intriguing. I'm the kind of nerd who liked the story problems in algebra; I see the world as a series of puzzles. The study of philosophy gave me a new approach to solving these puzzles, a framework through which I could approach problem solving from a variety of vantage points. I later discovered that this type of critical thinking applies as much to marketing and Web design as it does to hypothetical questions of ethics and meaning.

Prospective students and their parents may not yet know this. My parents supported my choice as they were already strong supporters of a classic liberal arts education. But they had friends who weren't. Vocal friends who asked things like "What are you going to do with a degree in philosophy, sit on a mountain top dispensing wisdom?

In this day and age it's not enough to show that philosophy builds critical thinking skills that can be applied to all aspects of life. People are more skeptical about spending money on a degree that doesn't seem as practical as one in business or engineering. To counter such obstacles you'll need to show exactly how the philosophical method can be applied to the real world. Examples of logical fallacies used in advertising, or ethical questions regarding file-sharing, help demonstrate how the specific reasoning skills learned in the study of philosophy can be applied in real life.

Whether your goal is to share information or sell more widgets, it's important to think about the audience. What information do they require to make the choice to do what you wish them to do? Get into their heads, consider the goal from their perspective, do market research, then apply what you've learned to developing your content.

Content formats: how can we most effectively convey this information?

These days people are anxious to add video and interactivity to their sites to show that they are keeping up with the latest technologies. But video isn't appropriate for everything. Think about the content first and let that help you determine its format. Will you be including a list of available philosophy classes and course descriptions on the site? How would you present that? Would you show a video of Professor Smith reading the course descriptions? Or would you present the information as text? I'd go with text.

How is a philosophy class different than one in math or history? Would it help students to see a class in action? Perhaps this is the time to videotape Professor Smith. If he's known for leading dynamic class discussions, ask him if he'd let you video tape a few seminars. This allows you to share his expertise and knowledge with the public while also letting prospective students see what a philosophy class is like.

Do you want to include educational resources on ethics or logic that will teach students about the field while also enticing their interest? Perhaps you could create a blog or discussion forum in which you pose questions so that readers can respond.

If you think carefully about the information you wish to share and what site visitors should do with it, you'll soon find yourself choosing content formats that are far more appropriate than some talking head yammering at a camera.

Organization/navigation

Once you've come up with a list of the content, and content formats, you will need to support your specific goal, you can organize it into an outline or site map that will guide you in organizing the content and navigational structure of the site. As before try not to look too much to your old site for guidance at first. Instead look at your outline with fresh eyes. Put yourself in the mind of your target audience, and see which content items form logical content clusters.

Then, when your new outline is complete, compare it to the old site. Is the new structure completely different? Or are there only slight variations? This will help you determine whether your revised site will need a new menu system or just some minor adjustments. Also look at your site analytics. Are there pages on the current site that are important but don't get enough traffic? Are those pages hard to find? Is the content less than compelling? Will your new outline make it easier for visitors to find and view these pages?

Whether our new site will be redesigned entirely, or modified slightly, we can learn a lot from the statistics for our old site. They can show us the pathways visitors use to get to specific pages, the amount of time people spend on pages, and which pages they are likely to use as exits from our site. If certain pathways are often used we can try to maintain them so that we don't break anything that is currently working well.

The pages our visitors spend the most time on are typically the most important. If they're not on your new site outline, you may wish to add them. Are there important pages (to you) on the old site that visitors don't spend time viewing? Do these pages support your new goal? If so consider how you can make these easier to find and improve the content so they provide more value to visitors.

Technology/code

Ideally your old site was built in W3C standards compliant HTML using semantic mark-up. If so it will make it far easier to re-use any of the old content you intend to keep. If not, here is your opportunity to clean things up. Whether you are making significant design changes or minor alterations this project will probably involve edits to every page. Given that, it's a good chance to make some changes.

Did your old site use a table-based layout? Did you use bolded paragraph elements instead of headers? If so, try recoding your site using CSS and semantic mark-up. This will both clean up your code (so you're not stuck trying to make sense of all those old nested tables) and help with search engine optimization (SEO).

Also consider how technology has changed and what new options are available through your hosting provider. For example I used to use SSI (server-side includes) to include repeating elements such as headers, menus and footers. I'm now using PHP which also makes it easier to create unique page titles based on my page headers. If your content will include new features such as videos and interactivity, research the best methods for presenting these. Perhaps a content management system or blogging software would help. For my project I'm using WordPress. This makes it easier for me to group items by category and generate RSS feeds and will allow the client to post event and product announcements.

Your needs will vary, but if you take the time now to determine what the best practices are for the features you'll require, you'll find that the site is easier to rebuild and maintain.

Graphic Design

People assume that a redesign means a change in the visual look and feel of the site. But how much you change depends on your goals. Does the current look support your corporate identity and brand? Does it work with the new goal? Does it support the navigational scheme of the new site plan? Do visitors like it? If so, a dramatic change may not be necessary, it may in fact cause confusion. If this is the case you may want to just tweak things here and there to support the new structure.

On the other hand, if you've changed your logo, the old design doesn't serve the new goals or if your site looks like it was built by someone's 10 year old nephew, then yes, change is in order. Let the new goal and your brand identity lead the way.

I take a fairly minimalist approach to design. I don't want flashy graphics and images to compete with the message. Instead I want them to augment the message. But the header image on the site I'm redesigning focuses on only one product. Now that there are more products I'm changing the header graphics and color scheme to better reflect the theme of the full product line. For example, if my site had originally been about grapes, I might have had pictures of grapes and vineyards on the site. But if the company now sells a variety of fruits, my imagery must reflect that.

There's neither time nor space here to fully discuss design theory, but as you work on your new design concepts, keep your visitors in mind. Your favorite color may be hot pink, but your site is meant for your visitors so choose color schemes and readable typography that make it easy for them.

Marketing

Build your new site with marketing in mind. Properly marked-up code, and the use of keywords in your content (especially headers) will improve SEO, thus making your site more easily found in the future. Avoid technology choices, such as using Flash for your entire site, that don't support SEO, page linking, bookmarking, cross-browser compatibility, etc.

Compare your new site plan to the old. Try to keep the old file structure intact as much as possible. If your site has been around for awhile, then others are already linking to your pages and those pages are ranked in Google and other search engines. You don't want to lose what you've already established, so if you can avoid moving old pages, that will help. If you must move or delete old pages, then use 301 redirects to guide visitors seamlessly to the new pages.

When you launch the new site, consider this an opportunity to re-connect with your visitors. If appropriate, poll your visitors before and after the redesign process to get their input. People hate change but they like to feel included. It's impossible to design a site that will appeal to everyone, but if you have access to user input, it will help you design a site best suited to your audience.

When the site is ready, you might also send an e-mail, announcing the launch to your existing user base. Some people will praise you, some will opt-out, and some will complain. Respond to the complaints in a timely and thoughtful manner. You may have annoyed them with your changes, but you've also started a conversation with someone who cares enough about your site, product or service to voice their opinion. Keep them onboard by responding to their issues.

As with any Web development project, there are far more details to consider, but I hope these have provided you with a good starting point for your next redesign. If you focus on the goals and the needs of your site visitors you'll be well on your way.

Web Design and Development Resources

• 10 Tips to a Successful Web site Redesign
• Daniel Burka on Iterative Design (video)
• The Definitive Guide to Semantic Web Markup for Blogs
• Understanding Web Design
• Usability First: Web site design

Edu Blogger Scholarship Update

Thanks to everyone who read Learning for fun and adventure: online education comes in many flavors. Through your support I made it to the finals! If you're interested in higher education and related topics, you may want to peruse the blogs of the other finalists. You'll find some good reads there. (Which means I've got some stiff competition.)

Last week's entry on outbound links spawned a lot of discussion, including the question of whether one should have outbound links open in a new window (or tab depending on the user's browser and preferences). Although many others have already written about this topic, it comes up often enough that I think it is worth discussing. Disclaimer: links that open in a new window or tab—when that wasn't my choice—are a pet peeve of mine, but I will attempt to explore the topic objectively.

What is the intended purpose of having links open in a new window or tab?

Those who recommend having links open in a new window do so with the intention of making it easier for users to return to the original site. Anyone who surfs the Internet knows that it is easy to get lost down a rabbit hole of links. For example, if I provide you with a link to Chuck Palahniuk's Web site, you might:

• follow the link
• peruse the section on author interviews
• read Dennis Widmyer's latest interview with Craig Clevenger
• then decide to add The Contortionist's Handbook to your Amazon shopping cart.

By now, the theory goes, you will have either forgotten where you were before or forgotten how to get back. If I'd set the Chuck Palahniuk link to open in a new window/tab (this is the only link on the page that opens a new window), you could just go back to your original window/tab and you'd be back where you started. Of course if the link opens in the same window, and you are using a current browser such as Firefox, you can simply click the down arrow next to your back button to navigate back through the series of links you just followed.

So which is better? Is it easier for a user to go back to a different window or to just use the back button?

I've always found it easier to use the back button. With one click I can go back and read another interview or I can choose to go all the way back to the original blog. To me that seems far easier than wading through a sea of windows, or looking at an array of tabs to find the one you want. But everyone is different. In researching this article I discovered a Get Satisfaction page in which a user actually requested that links on Pownce open in a new window. Two of the responders agreed that they would prefer new windows, while two others (including Pownce/Digg designer Daniel Burka) disagreed. I saw these differing opinions in many places.

Where does that leave us? Preferences vary, so unless you survey the users of your particular site it may be difficult to determine if your audience likes or dislikes it when a link opens in a new window. Pownce was able to solve the problem by giving users a setting that lets them pick which behavior is the default while they're on Pownce. But that's not an option for most sites and blogs. With that in mind, I think it is most appropriate to leave it in control of the user. If a user wants to open a link in a new window he can do so by right-clicking (Windows) or ctrl-clicking (Mac) the link in question. I often open links in a new tab if I know that I'll want to flip back and forth between them. I just don't want them opening up new tabs spontaneously.

Standards and accessibility issues related to opening links in new windows

If you're in the pro new window camp, I've probably not yet changed your mind. But there are more issues to consider.

W3C HTML and XHTML Recommendations

The traditional way to have a link open in a new window is to include target="_blank" in the link. The target attribute is not included in the recommendations for HTML and XHTML strict, therefore sites using target with a strict doctype won't validate. From what I've gathered target is not included because not all browsers support the attribute, particularly when it comes to browsers running on mobile devices. (This may change in XHTML 2.0 as the attribute may serve new needs as mobile browsers evolve. A valid alternative is to use javascript.

W3C Web Content Accessibility Guidelines 2.0 (WCAG)

According to the WCAG Success Criterion 3.2.5, "Individuals who are unable to detect changes of context or may not realize that the context has changed are likely to become disoriented while navigating a site. For example: individuals who are blind or have low vision may have difficulty knowing when a visual context change has occurred, such as a new window popping up. In this case, warning users of context changes in advance minimizes confusion when the user discovers that the back button no longer behaves as expected." To avoid this confusion they recommend that users should be notified if a link will open in a new window and if possible be given the choice to not have it open in a new window.

Kant's Categorical Imperative: What if everyone did it?

While writing this I kept having a vision of wandering the Internet in a world where every external link opened a new window or tab. In this vision it was only a matter of minutes before there were so many tabs open in my browser that I had to use the left and right arrows to scroll through them. Worse yet, instead of tabs windows began spawning as quickly as Tribbles and suddenly my desktop was impossible to navigate. This made me think of Kant. In his first formulation of the Categorical Imperative he states that one should "act only in accordance with that maxim through which you can at the same time will that it become a universal law." While this idea was meant to deal with issues of morality, it's easy to see how it could be applied to lesser situations such as links opening in new windows. If links always opened in a new windows it would pose significant usability challenges.

Naturally most sites don't open everything in a new window or tab. If they did we'd all be swimming in windows. Instead, most site designers choose to open new windows only in particular circumstances. Some designers do this only for external sites while others reserve the technique for opening up .pdf files. While I'd still prefer that links open in the same window, giving me the choice of whether or not to open them in a new tab, I understand that many may disagree. Most people have committed one way or another with few remaining undecided. But, whatever your preference may be, I hope this discussion will help the next time you're debating where a particular link should open.

Learn more about opening links in pop-up windows or tabs

• Accessible Pop-up Links
• D. Keith Robinson's Gorilla Web Tips: Launching New and Pop-up Windows
• Don't let your web site fall out of the window: opening new browser windows
• How evil is the target attribute?
• New-Window Links in a Standards-Compliant World
• Open New Window Still Has Usability Issues
• The target attribute and opening new windows
• Top Ten Mistakes in Web Design
• WCAG 2.0: H83: Using the target attribute to open a new window on user request and indicating this in link text
• WCAG 2.0: SCR24: Using progressive enhancement to open new windows on user request

Until recently I was one of the only nerds who had yet to upgrade to Firefox 3. I'd been waiting until I could find an easy way to install it alongside (rather than in place of) Firefox 2. When I'd tried doing this a few months ago—with the beta version of Firefox 3—it hadn't worked properly, so I'd put the idea on hold.

I mentioned this in a meeting, when a colleague piped up with a simple solution. He suggested using the PortableApps version, a standalone version of the program that can be installed on a Flash drive—for portability—or simply in a directory you designate on your computer. This was so obvious I immediately wondered why it hadn't occurred to me before, but then, practical ideas are like that.

PortableApps.com offers a plethora of portable software solutions—including Firefox—for Windows

Once I got back to my office I hopped over to http://portableapps.com/, looked for Firefox 3, then proceeded to download it. Within minutes it was installed, separately and independently of Firefox 2. When I tried to start it up I discovered that you can't run them both at the same time—I had to close out of 2 to open 3, then close out of 3 to reopen 2—but you can run them on the same computer. This will be tremendously useful if I discover some quirk in Firefox 3—such as an add-on that no longer works and has yet to be updated—or if I need to see how a Web page renders in each version.

That solved the problem for the Windows P. C., but what about the Macintosh?

FreeSMUG: Portable Applications for OSX

Firefox 3 from FreeSMUG (Mac)

A quick Google search turned up FreeSMUG's portable applications section. FreeSMUG offers a portable version of Firefox 3—in several languages—as well as other popular open source programs such as Open Office and Audacity. Those new to many of the Open Source programs available through FreeSMUG can learn more about them through a variety of helpful tutorials available on the site.

FreeSMUG says of its portable applications, "OS X FOSS portable applications are packaged so you can carry around on any portable device, USB thumb drive, iPod, portable hard drive, memory card, other portable device (or also on your internal hard disk), taking your preferences with you." This of course could be handy for any number of reasons, but the ability to run multiple versions of browsers to use for testing Web sites, is particularly useful to me.

Why test in multiple versions of the same Web browser? Why not just upgrade?

As a Web developer, you probably upgrade your browsers fairly often. That's not true of the average user. In many cases the people who visit your site are using the same browser that came with their computer.

The most popular browsers used by visitors to the Web Development Blog this month are:

• Internet Explorer 7.0 - 24.6%
• Internet Explorer 6.0 - 24.3%
• Firefox 3.0 - 12.7%
• Firefox 2.x - 17.8%
• Safari - 5.4%

Interestingly .5% were still using Netscape 4.0, which is over 10 years old!

To ensure that you, my site visitors, can view and use this site with ease, I need to make sure that it works properly in the browsers that most of you are using. This requires testing in multiple browsers and versions.

When a browser releases a minor upgrade, this isn't a big issue. But when a Web browser makes a significant upgrade it can make a big difference. A site that looked fine in version X, may look horrible in version Y.

When Internet Explorer 7 came out, users and developers quickly noticed that many pages didn't render properly in the new version. I.E. 7 was actually more standards compliant than I.E. 6, but developers who had used I.E. hacks to make pages look right in I.E. 6 found they didn't work with I.E. 7. This led to a lot of sturm und drang about I.E. 7 "breaking the Web," as those developers needed to modify those hacks to make their sites work in both I.E. 6 and 7.

Here at Case our templated sites don't rely on many I.E. hacks so they transitioned smoothly from I.E. 6 to I.E. 7. But when I'm building new sites, I may sometimes incorporate new styles or features that I've not used before. This is when I make a point of testing in multiple browsers. Tredosoft's Multiple I.E. Installer provides a convenient way to run different versions of Internet Explorer on Windows XP. They also provide information for running I.E. 6 natively on Vista.

Must your site work in every browser available?

No, the Web has evolved enough since 1993 that making a site backwards compatible with every browser version is pretty much impossible. But if you adhere to Web standards, build sites that degrade cleanly in older browsers, and test in the browsers used by most of your readers you should be able to provide a good user experience for all of your visitors.

Web Browse Testing Resources

• Browsershots
• Browser testing CSS and JavaScript
• Browser Tests, Services and Compatibility Test Suites
• CSS: Browser testing order
• Why your site should work on multiple browsers

The resolution on YouTube is not as crisp as the original.
You can also view the video in higher resolution .mov format.

Back at the turn of the century, embedding video was complicated. Streaming required a special server, you had to decide what format(s) you wanted to stream, then you had to provide links to whatever software users might need to view your video—in case it wasn't already installed on their computers.

With YouTube, that's all changed. Now you can just go to the YouTube page for the video you wish to embed, copy the coding they provide, paste it into your html file or blog entry and publish the page.

It's just that easy—unless, like me, you care about adhering to Web standards. In that case, it requires a few more steps, but don't worry, they're not that complicated. YouTube videos can be embedded on the Web using swfobject.js—in a manner similar to the method I described last year in "Embedding Flash Objects for Internet Explorer." You can also use this method for embedding regular Flash .swf files. Just substitute the path to your .swf for the YouTube link in the instructions below.

Downloading swfobject 2.0

SWFObject 2.0 provides a significant upgrade to SWFObject 1.5—what we'd previously been using to embed Flash .swf files. To begin you will want to download the new script from the SWFobject project page. After downloading the script, you can upload it to your site, in whichever directory you prefer. Note: SWFobject 2.0 is not backwards compatible with 1.5, but the script has the same file name, swfobject.js. If you are already using 1.5 on your site—and don't plan to immediately edit all the pages that use it—you should rename the file to something like swfobject2.js or store it in a different directory so that you don't write over the prior version.

Generate the embed code for your page

While you could do this manually by following the instructions in the documentation, the SWFobject team has provided a rather handy Web-based code generator that we'll use in this example.

1. Go the the YouTube page for the video you wish to embed and copy the embed code provided.
2. Paste this into a blank file in Dreamweaver or your preferred editor. We won't be using this code in our page, but we'll want it for reference.

   <object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/b-tYxJcFj9I&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/b-tYxJcFj9I&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

3. Within this code you will see a link to the video after value=". Within this link there may be an ampersand. Escape the & by typing amp; after it.
4. Copy this link,http://www.youtube.com/v/b-tYxJcFj9I&amp;hl=en, then go to the SWFObject 2.0 HTML and JavaScript generator.
5. Paste the link in the box to the right of "Flash (.swf):."
6. Near the top of the generator, choose between static and dynamic. I will be using static in this example as dynamic would require me to put additional code--specific to this video--in my header. Here on the blog my headers are part of my templates so I can't use anything that would be specific to only one entry. (The documentation offers additional information on the static and dynamic methods.)
7. Copy the width and height values from the YouTube embed code and paste them into the dimensions boxes in the generator.
8. Click on "more" in the SWF definition box if you like to edit additional attributes.
9. In the HTML definition box choose the version of XHTML or HTML and character encoding you use on your Web site.
10. Click the "Generate Code" button.

Embedding the video in your page

1. Copy the script code found with the head of the generated output.

   <script type="text/javascript" src="swfobject.js"></script>
   <script type="text/javascript">
   swfobject.registerObject("myFlashContent", "9.0.0");
   </script>

2. Paste this into the head of your HTML file or blog templates. Note: Because I have already been using the previous version of SWFobject on this blog, I named my script swfobject2.js before uploading it to the server. Therefore I must also change the name in this code then add it to the code that is already in my templates. Thus my files will include:

   <script type="text/javascript" src="swfobject.js"></script>
   <script type="text/javascript" src="swfobject2.js"></script>
   <script type="text/javascript">
   swfobject.registerObject("myFlashContent", "9.0.0");
   </script>

3. Copy the object code found within the body of the generated output.

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="425" height="350" id="myFlashContent">
   <param name="movie" value="http://www.youtube.com/v/b-tYxJcFj9I&amp;hl=en" />
   <param name="wmode" value="opaque" />
   <!--[if !IE]>-->
   <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/b-tYxJcFj9I&amp;hl=en" width="425" height="355">
   <param name="wmode" value="opaque" />
   <!--<![endif]-->
   <a href="http://www.adobe.com/go/getflashplayer">
   <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
   </a>
   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
   </object>

4. Paste this into the place in your file where you would like the video to appear.
5. Upload the file to your server and watch the video!

SWFObject Resources

• SWFObject devblog
• Active Content Developer Center
• IE Automatic Component Activation Now Available (Internet Explorer users will no longer have to click to activate videos embedded using the static method.)
• SWFObject discussion group
• SWFObject 2.0 Documentation
• YouTube JavaScript Player API Reference

About the Embedding YouTube Videos the Standards Compliant Way video

The video screen captures were recorded using iShowU, a program I discovered yesterday afternoon. The scenes were pieced together, and audio was recorded and added in iMovie. As this was my first time experimenting with iShowU some portions of the video are a bit wobbly, but overall I found it very easy to use. I expect my skills will improve with time.

I'll post more about the process as I become more familiar with the software. Members of the Case Western Reserve University community interested in producing similar instructional videos may also wish to visit the Freedman Center which offers tools and instructions on this and related topics.

I've recently come to the conclusion that a great number of Web developers either don't know about Web standards, or simply don't care. For those who aren't already aware of the standards I'll offer a brief introduction along with resources for additional information. For those who don't care, or who are anti-standards, I'll offer some examples as to why I feel they're important. For those of you already in the know, feel free to add your own advice, examples or pet peeves in the comments section.

The reason for Web Standards

According to the Web Standards Project Mission, "The World Wide Web Consortium (W3C), along with other groups and standards bodies, has established technologies for creating and interpreting web-based content. These technologies, which we call "web standards," are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web."

Think of these as the rules of the road. When you are driving a car in Ohio you know you have to drive on the right side of the road, stop at stop signs, not enter an intersection unless there is room for your vehicle on the other side, yield to pedestrians, etc. If you are driving in Hong Kong you know to drive on the left and follow the various rules relevant to that jurisdiction. Following these rules makes the driving experience more pleasant for everyone; whereas ignoring these rules will, at best, annoy other drivers and, at worst, cause a traffic related fatality.

In most cases, a non-standard Web site isn't likely to cause fatalities, but anything is in the realm of possibility. Errors in formatting can cause content to render incorrectly. Imagine if the word "Never" wasn't visible to users reading the sentence "Never pour gasoline on an open fire." A reader unfamiliar with the combustible nature of rising gasoline vapors could easily immolate himself. That's an extreme example, but whether your site is about fire prevention or your book club, you probably don't intend to misinform or confuse your readers.

Following Web standards lets you increase the odds* that your site will be properly rendered by most browsers and user agents and that your information will be more accessible to users and search engines.

* I say "increase the odds" rather than "guarantee" because there are still differences between the way browsers interpret the standards.

What are the Web Standards?

Different standards are available for different purposes, but for the most part standards will define the type of coding that you should use when creating a Web page or stylesheet, or the procedures or policies you should consider when creating the site. Thus if you are building a site in HTML using Cascading Style Sheets, and want to ensure your site is Section 508 compliant for accessibility, you might follow the standards for HTML 4.01, CSS 2, and Section 508.

For example, HTML standards specify using <p> to start a paragraph, <h1> for a primary header and <em> for emphasis. CSS standards specify things like color and position, so that a purple header could be defined in a stylesheet by: h1 {color:#571963}. Using a descriptive word or phrase in the alt tag of images conforms to accessibility standards (both 508 and WAI).

One of the most overlooked HTML standards seems to be the inclusion of the correct document type. For example, if you are building a site using XHTML 1.0 (as is true of many Case sites) you would include this document type:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This small piece of code tells browsers and user agents what version of HTML you are using, so they don't have to guess when rendering the site. This is like telling Babel Fish whether you want to translate a phrase from Dutch to English or from German to English. If you don't give it the right information you may not get the right result. I'm amazed by the number of sites don't include this basic information.

Another important standard for HTML 4.01 and XHTML 1.0 is the separation of format and presentation. <h3>Headline</h3> is an example of format, indicating that something is a header. Styling the <h3> with CSS, either in the document or in an external stylesheet, to be a certain size, color and font would be an example of presentation. In the old days of the Web this was done within the HTML using the now deprecated <font> tag. In the past one might have typed <h3><font color="33ff33" size="5">Headline<font></h3>. This not only filled up your page with a lot of extra code, but it also meant that if you decided later to make all of your <h3>'s a different color you would have to go and change all of the font codes one by one. When using a style sheet you can define how your <h3>'s will look in one place. To change the color you just make the one change in the stylesheet and you are ready to go.

Separation of format and presentation isn't a particularly new idea, but adoption has spread slowly. CSS 1 was first introduced in 1996 and the CSS 2 recommendation has been around since 1998. While many sites use CSS, it is still not uncommon to stumble upon current sites that are still using older codes such as <font>.

Why this has been on my mind

A few weeks ago a friend sent me a link to a pretty cool looking site for an online magazine. Alas the site wasn't standards compliant and therefore didn't work properly. This particular site was Flash-based with dimensions too big to fit my screen. The page had no scroll bars so I couldn't get to the menus to navigate through the site. I could see the whole site on my Mac, but not on my Dell, and I'm pretty sure I'm not the only one to have had that problem. Since I couldn't navigate the site, they might as well have posted a page that said "Do Not Enter. We don't care about your business." If they had built a compliant site they would have ensured greater accessibility to users and not had this problem.

I've found a number of other non-compliant sites while working to compile a list of local Web developers. Departments without Web staff often look to outsource their Web projects and turn to me for referrals. Thus I'm trying to put together a list of local (to support the regional economy) developers who I can trust to build compliant sites that follow the Case design scheme, maintain a logical navigational structure and support the goals of the client. This has not been an easy task.

The problem is that almost anyone can learn to build a Web site, but only a few can do it well. There are a lot of firms out there, but the quality of work varies dramatically, and only a handful build standards compliant sites. Sites with major compliance errors don't end up on my list. This isn't just because I'm persnickety. If a site fails validation because of a few stray &'s or they've forgotten to close a few <p>'s I'm not worried. Such errors are easily corrected and don't disturb the overall functionality of the site. But if a site uses <font> tags, doesn't include a doctype, leaves alt tags blank on all of their images, etc., then I will conclude that its designers are not professional and will not be able to offer the client the advice or service necessary to implement a successful site.

Conclusion and Disclaimer

If you've ever built a Web site, you've followed at least a few of the standards. The site wouldn't work if you hadn't. For example if you left out the <body> tag your page wouldn't render. Since we're all following some of the standards anyway, I would just encourage everyone to learn and apply more of them. As you become more familiar with them you'll find that your sites become both easier to use and easier to build. To learn more about Web standards visit The Web Standards Project and the resources below.

Standards compliance is an ongoing goal of mine, but I'm only human. Not every site I've built is standards compliant, and the errors become more egregious the older the pages may be. Since I readily acknowledge this you don't need to go hunt them down, they are out there, and I know it!

Web Standards Resources

• Asterisk Web Standards Archive
• Designing With Web Standards, Second Edition by Jeffrey Zeldman
• Jeffrey Zeldman: King of Web Standards (Business Week)
• Section 508: The Road to Accessibility
• The Web Standards Group
• The Web Standards Project
• W3C Cascading Style Sheets, level 2 CSS2 Specification
• W3C Cascading Style Sheets, level 1
• W3C HTML 3.2 Reference Specification
• W3C HTML 4.01 Specification
• W3C XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)
• W3C Technical Reports and Publications
• Web Accessibility Initiative (WAI)
• World Wide Web Consortium (W3C)