Julie Harpring from the MU Graduate School gave a great presentation* today at the Web Developers Group meeting on the value of Web standards. A lively discussion followed where many of the developers in the room shared their experiences with CSS and creating standards-compliant sites. Despite a bit of a learning curve and some frustration, I think it's fair to say that most of the folks who have moved to standards-based design are reaping the benefits.
And here in Web Communications, we're one of those groups seeing the advantages of moving to standards-compliant Web design. Beginning last year, we made the switch to tableless layouts with Cascading Style Sheets (CSS) for all of the sites in future development. We are happy to report that the new MU Web site is standards-compliant. And we're not alone. The University of Kansas and University of Nebraska Web sites are also standards-compliant. If Jayhawks and Cornhuskers can do it, so can we!
So what are Web standards?
Developed by the World Wide Web Consortium (W3C) and other standards groups, Web standards are guidelines and best practices designed to make Web sites more accessible to the greatest number of people and devices. Web standards simplify and reduce the cost of Web development while increasing long-term viability of a site.
Standards-compliant sites:
• Separate content from appearance by using Cascading Style Sheets (CSS).
• Meet W3C coding specifications for valid, well-formed code.
• Meet W3C accessibility guidelines.
Why use Web standards?
- Manageability. Separating the content from the appearance by using streamlined markup (HTML, XHTML, XML) and an external CSS makes it easier to make changes across an entire site. Because the presentation code has been separated from the content, anyone with a very basic understanding of HTML can make changes to the site. Standards also offer a simple set of rules that all Web developers can understand so when staff changes, a new Web developer should be able to easily take over maintenance and development of a site. Following Web standards also gives developers the ability to use validation tools to easily find errors and correct them thereby shortening development time.
- Versatility. Standards-compliant pages can be easily converted to multiple formats (print, PDAs, TVs, databases, Word documents, etc.).
- Accessibility. Standards-compliant pages are accessible to both old and new browsers. Standards-compliant documents also are accessible to many types of devices including hand-held browsers, teletext machines and Braille text readers.
- Searchability. Standards-compliant pages are easier for search engines to access and accurately index which improves your site’s visibility.
- Stability. Standards-compliant pages are both backward- and forward- compatible in Web browsers. Sites developed with newer standards will still be accessible in older browsers while sites developed with older standards will also work in newer browsers.
- World Wide Web Consortium (W3C) — Includes coding specifications, accessibility guidelines and validators to check your work.
- Web Standards Project — The Web Standards Project is a grassroots coalition that works with browser companies, authoring tool makers and others to promote Web standards.
- Developing for Web Standards: Recommendations and Best Practices
- W3C's HTML Validator
- W3C's CSS Validator
- Section 508 Information
- Beginner’s Guide from a Seasoned CSS Designer, by Cameron Moll
- Introduction to Cascading Style Sheets
- CSS Discuss Mailing List — A community of developers who discuss tips and techniques for getting the most out of CSS. A good place to get help troubleshooting CSS issues in your own work.
- CSS Zen Garden — A great place to see the power of CSS-based design.
- The Official "Microformats" Site
- Add Microformats Magic to Your Site
- Lynx text browser for Windows XP, complete with a full installer and support for SSL and cookies. A great way to see how your site looks in a text-only browser.
- Firefox extensions:
Firefox Web Developer Toolbar
Firebug — A plugin that helps you debug javascript, CSS, HTML and Ajax.
HTML Validator — Validates pages on the fly and highlights errors when looking at source code. - Internet Explorer Web Developer Toolbar
- Opera Web Developer Toolbar 1 or Toolbar 2 — You can't use both at the same time (at least that we know of).
*Julie used Eric Meyer's S5 (A Simple Standards-Based Slide Show System) to create her slide show.
I also check A List Apart on a regular basis. http://alistapart.com/
What do you know? They have a new article called “12 Lessons for Those Afraid of CSS and Standards.” How timely! http://alistapart.com/articles/12lessonsCSSandstandards
In addition to the Web Developers Toolbar extension, I was recently turned on to the HTML Validator extension by Brock Brown at the Cascade Server User Conference. It makes use of the Tidy tool from the W3C so when you do the good ole’ “View Page Source” option it automatically lets you know what’s not right. Check it out!
The HTML Validator extension is PC only. :-( What about us Mac people?
HTML and AJAX and WEB 2.0 will change the world.
I just gave a presentation on SEO and AJAX at Search Engine Strategies 2007 in New York. We showed the work that we did for Rolex.com - a flash based site that still has SEO built in from the start.
It’s a lot of work at this point, but the reps from Yahoo and Google who were also on the panel said that in the future, web developers will not have to worry so much when they decide to use more bleeding edge technology.
—ryanj The Professional Web Developer’s Wiki - http://www.ryanj.org/wiki
Web Standards are essence of today’s seo world. They are the guidance users need for accessing online information. It makes web development faster and more enjoyable. Some people think that standards are limiting which is not true. It gives developers flexibility and time to be creative enough.