vanderwal.net

Testing HTML validation of output of tools

Knopf offers a componarison of how well Help Authoring Tools create HTML. The testing includes compactness of code, but even better is validating the output against the W3C. Dreamweaver MX does quite well in the testing. It would be good to expand the testing to some of the other tools, like FrontPage and GoLive.

CSS and Microsoft's poor excuse for a browser

Tim Bray adds to the Microsoft IE is garbage chant that has been spreading around the Web developer community for some time. Oddly, until I think of Tantek, the IE browser on Mac is far more compliant. The font sizing issues that Tim discusses are largely only a problem on Windows version of IE browsers. Most other modern browsers (Mozilla (including its Netscape 6 and 7 variants), Opera, Safari, etc. all resize fonts even if the fonts are set in pixels.

In the accessibility community having a fixed pixel size has been taboo for some time. As I talk with more people with vision problems I find most do not use Windows IE browser to view sites, but choose one of the other modern browsers as they allow easy scaling of fonts (some like Opera even scale images). This seems to be a trait across the visually challenged users. Most users with visual difficulties have a strong dislike for the Microsoft browser just on this point alone. A few have mentioned they really like Mozilla browsers as they can easily change the skin on the browser to make the buttons and other elements more visible.

Me, I can read Tim's site just fine, which is ideal as Tim understands the problems and knows where the blame should reside.

Note: The MS IE browser on Windows shows its downfalls to those that are trying to us modern Web development techniques by using CSS layouts rather than table layouts for their work. As Web developers learn tableless layout is a pain to learn initially, largely because of IE 6 and lower do not follow the rules properly. To get Windows IE to render properly one has to hack the valid CSS to get the browser to render the page as does a browser that follows the standards. The irony is Microsoft claims to own the CSS patent.

The bells are ringing

Great news from the Carrie Bickner and Jeffrey Zeldman camps. These two are getting married. We wish them all the best and much much more.

Building with Web Standards or how Zeldman got the future now

I awaiting Jeffrey Zeldman's Designing with Web Standards, which is available for order from Amazon (Designing with Web Standards). I have been a believer in designing with Web Standards for years, but it was Jeffrey that pushed me over the edge to evangelist for Web standards. One of the best things going for Web standards is it make validation of markup easy, which is one of the first steps in making a Web site accessible.

I work in an environment that requires Web standard compliance as it provides information to the public as a public good. Taxpayers have coughed up their hard earned dollars to pay for research and services, which are delivered to them on the Web. The public may access information from a kiosk in an underfunded library with a donated computer on a dial-up connection, but they can get to information that they are seeking. The user may be disabled and relying on assistive technology to read the public information. The user may be tracking down information from a mobile device as they are travelling across country on their family vacation. Each of these users can easily get the public information they are seeking from one source, a standard compliant Web page.

Every new page that is developed by the team I am on validates to HTML 4.01 transitional. Why 4.01 transitional and not XHTML? We support older browsers and 4.01 transitional seems to have pretty good access to information no matter the browser or device. We are not on the cutting edge, but we know nearly everybody can get the information their tax dollars have paid for. I dream of a day job building XHTML with full CSS layout, but with the clients I work for we still aim at the public good first.

I am very happy that Jeffrey has his book coming out as it should bring to light to more developers what it means to build to Web standards. Every contract that is signed buy the agency I work for must validate to HTML 4.01 transitional, but very few of the sites do when they come through the door to be posted. We provide a lot of guidance to help other developers understand, but finding a solid foundation to work upon is tough. When hiring folks many claim to have experience building valid sites, but most soon realize they never have to the degree to getting a W3C validation.

Building our pages to 4.01 does not mean we are going to stick with 4.01 forever. We plan for XHTML by closing all tags and stay away from tags deprecated in 4.01 strict. Much of what we create only needs a few scripts run to convert the pages from HTML to XHTML 1.1 transitional. Having the closing tags makes scripting to find information and search and replace much easier. (Enough for now, buy the book, we will have more later).

Using HTML tags properly to help external search results

There are some essentials to building Web pages that get found with external search engines. Understanding the tags in HTML and how they are (rather should be) used is important. The main tags for most popular search engines are the title, heading (h1, h2, etc), paragraph (p), and anchor (a). Different search engines have given some weight in their ranking to metatags, but most do not use them or have decreased their value.

Google gives a lot of weight to the title tag, which is often what shows in the link Google gives its user to click for the entry. In the title tag the wording is important too, as the most specific information should be toward the front. A user searching for news may find a weblog toward the top of the search ahead of CNN, as CNN puts its name ahead of the title of the article. A title should echo the contents of the page as that will help the ranking of the pages, titles that are not repeated can get flagged for removal from search engines.

The headings help echo what is in the title and provide breaking points in the document. Headings not only help the user scan the page easily, but also are used by search engines to ensure the page is what it states it is. The echoing of terms are used to move an entry to the top of the rankings as the mechanical search engines get reinforcement that the information is on target for what its users may be seeking.

The paragraph tags also are used to help reinforce the text within them.

The anchor tags are used for links and this is what the search engines use to scrape and find other Web pages. The text used for the links is used by the search engines to weight their rankings also. If you want users to find information deep in your site put a short clear description between the anchor tags. The W3C standards include the ability to use a title attribute which some search tools also use. The title attribute is also used by some site readers (used by those with visual difficulties and those who want their information read aloud to them, because they may be driving or have their hands otherwise occupied) to replace the information between the anchor tags or to augment that information.

Example

The application I built to manage this weblog section is build to use each of these elements. This often results in high rankings in Google (and relatedly Yahoo), but this is not the intent, I am just a like fussy in that area. It gets to be very odd when my posting weblog posting review of a meal at Ten Penh is at the top or near the top of a Google Ten Penh search. The link for the Ten Penh restaurant is near the bottom of the first page.

Why is the restaurant not the top link? There are a few possible reasons. The restaurant page has its name at "tenpenh" in the title tag, which is very odd or sloppy. The page does not contain a heading tag nor a paragraph tag as the site is built with Flash. The semantic structure in Flash, for those search engines that scrape Flash. Equally the internal page links are not read by a search engine as they are in Flash also. A norm for many sites is having the logo of the site in the upper left corner clickable to the home page of the site, which with the use of the alt attribute in a image tag within an anchor link allow for each page to add value to the home page rant (if the alt attritute would have "Ten Penh Home" for example).

Not only does Flash hinder the scapeing of information the use of JavaScript links wipes out those as means to increase search rankings. Pages with dynamic links that are often believed to ease browsing (which may or may not prove the case depending on the site's users and the site goals in actual user testing) hurt the information in the site for being found by external search engines. JavaScript is not scrapable for links or text written out by JavaScript.

Meet the Makers chats with Steve Champeon

Meet the Makers chats up Steve Champeon. Steve is one of the founders of WaSP, has written and edited many tech books, and just flat out rocks. You are still saying who? Go read.

Me with Japanese characters and others

I have wild and adventurous dreams, but my subconscious did not consider seeing my name on a page of Japanese characters. I have had The Vapor's Turning Japanese running through my head since I saw this.

WaSP Buzzing

The current Buzz is that the Web Standards Project is growing and offering a new perspective and as is noted in the WaSP press release I am now a member of the WaSP clan. This takes advantage of what I already do in my free time, try to build a better Web and work on structuring information for use and reuse. This is smart group dovetails very nicely with the smart group of information architects that absorb another chunk of my free time.

Apple Word Replacement Rumor and Information Structure Dreams

Rumor has it Apple is working on MS Word replacement. This would be a great thing if it would read native Word files seemlessly, but even better would be turning out valid HTML/XHTML. MS Word has always made a huge mess of our information with its conversion to something it "calls" HTML, it is not even passable HTML. One could not get a job using what Microsoft outputs as HTML as a work sample, heck, it would not even pass the laugh test and it may get somebody fired.

One of the downsides of MS Office products is that they are created for styling of information not marking up information with structure, to which style can hang. MS Word allows people (if the turn on or keep the options turned on) to create information sculptures with structure and formatting of the information. What Word outputs to non-Word formats is an information blob that has lost nearly all of its structure and functionality in any other format. It does not really have the format the Word document to begin with. What Web developers do is put the structure back into the information blob to recreate an information sculpture again.

You ask why is structure important? Structure provides the insight to know what is a header and sub-header. Structure provides the ability to discern bulleted lists and outlines. Structure makes it script-kiddie easy to create a table of contents. Structure makes micro-content accessible and easier to find with search. Structure provides better context. Structure provides the ability to know what is a quote from an external document and point to it easily. Structure provides ease of information portability and mobile access easier. These just name a few uses of structure.

Does MS Word have this structure capability? Yes, do people use it? No really. If people use it does MS Word keep the structure? Rarely, as it usually turns the structure into style. This is much like a somebody who spent months in the gym to build a well defined physique only to have the muscles removed to stuff their own shirt with tissue paper to give it the look of being in shape. Does the person with the tissue paper muscles have the ability to perform the same as the person who is really in shape? Not even close.

Structure is important not only for the attributes listed above, but also for those people that have disabilities and depend on the information being structured to get the same understanding as a person with out disabilities. You say MS Word is an accessible application, you are mostly correct. Does it create accessible information documents? Barely at best. The best format for information structure lay in HTML/XHTML/XML not in styles.

One current place that structure is greatly valuable is Internet search. Google is the top search engine on the Internet. Google uses the text in hyperlinks, the information in title tags, and information in the heading tags to improve the findability of a Web page. What are these tagged elements? Structure.

One of the nice things about a valid HTML/XHTML Web document is I can see it aqnd use it on my cell phone or other mobile devices. You can navigate without buttons and read the page in chunks. Some systems preparse the pages and offer the ability to jump between headings to more quickly get to the information desired.

These are just a few reasons I am intrigued with the Apple rumor. There is hope for well structured documents that can output information in a structured form that can validate to the W3C standards, which browsers now use to properly render the information on the page. I have very little hope in the stories that MS is working toward an XML storage capability for Office documents, because we have heard this same story with the last few Office releases and all were functional lies.

W3C breaks the silence with captioning

Meryl notes W3C add captioning by adding a TTWG (Timed Text Working Group). This is a great addition for the W3C and those that have been left in silence.

Zeldman discusses XHTML 2

Zeldman provides insight into XHTML 2, which provides a response and agreement with Mark Pilgrim's Semantic Obsolescence rant.

More future proofing information

Speaking of future proofing your information, Mark discusses CMS and information reuse. One quote that brings this to light is:

This ties you to your content management system. The further removed your raw data is from your published form, the harder it will be to migrate away from the tools that convert one to the other.

Mark also discusses how using HTML he then created PDF files of his Dive into Accessibility essays. HTML has much of the semantic tools needed and the structure to provide a reusable information repository.

Smart Mobs and Emergence provide sparks

I began reading Smart Mobs by Howard Rheingold the past few days. It is a fantastic book that covers a lot of ground, including free riders, game theory, mobile technology, information creation, and information use and reuse. The book is proving to be an excellent follow-on to Steven Johnson's Emergence. The two books are wonderful mind-joggers and fodder for new preceptions about information, technology, and the world around us. A trait that both share is excellent bibliographies and end-notes (the end notes in both books were not very user friendly and would seem to be structured for hypertexting and not paper books).

These two books put the focus on being future friendly, which does not mean any thing new, but reinforces my belief in properly structured information. Information use and reuse are the key elements in both books, which embrace bottom-up information creation and knowledge sharing. The need for access to information drives Smart Mobs, whether it is to grow open development or for mobile use access is important. The best access environment we have in place at the moment is valid HTML/XHTML that is used to properly structure the information.

This also requires thinking through every pixel on a Web page and understanding its purpose. Understanding the user will help provide a framework for building information interfaces. The information/content should take importance also that is why users are reading, not the entertaining graphics. Keep in mind we structured information can be reused on mobile devides that may not use your images, information may be scraped and repurposed, information may be printed, or read aloud to a person using a site reader while they are driving or read to a person with visual difficulties.

You may want to get your hands on either or both books and take a look for yourself and you may be inspired in new ways or have your beliefs in information and its used renewed.

Related to using the proper URL in the doctype, IE 6 renders table content as centered when wrapping the table with center tag. The article explains when this happens and how to work around the problem. One option is not using centering (either in a div align or in the deprecated center tag). It seems setting the CSS is the best work around. We have found using the center tag to be far more problematic than the div align usage of center. (Yes, we have to support "older" browsers at work).

Zeldman explains proper Doctype usage to have the browser use the Doctype you intend it to use. Many Web development applications leave off the URL from the Doctype statement, which renders the lowest common denominator in many browsers.