vanderwal.net

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).

IE blows up with valid HTML

Mark Pilgrim discusses human readable HTML and fatal IE browser bugs. The more bugs that are found in current versions of the Microsoft IE browser on Windows, the more I believe that IE is the current incarnation of Netscape 4. Netscape 4 was known for its lack of playing nicely with Web standards. IE 6 does horribly with valid CSS and now seem like it blows up with valid HTML. Nearly all other modern browsers play more nicely with valid CSS and do not have the problems with valid HTML. (Apple's Safari is not perfect yet, but Apple states their browser is beta.)

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.

Boxes and Arrows up for a Webby

I must mention Boxes and Arrows is up for a Webbie Award. Congrats to all the other alumni staff who helped get this wonderful resource off the ground and to the current staff that keep this great gift running and being so wonderful. Most of all to Christina Wodtke for having this crazy idea.

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.

Animatrix - The Detective

The third Animatrix has been posted, The Detective and it is my favorite so far. The first release is a very close second.

Matt Jones looses faith in navigation

Matt picks up on the failure of navigation and points to similar conversations to ones I had with Stewart that turned me to look for something other than navigation as a means to build information structures. Each user approaches information with two of their own receptors, cognitive and sensory receptors. The cognitive elements include vocabulary and rhetoric (essentially writing style). The sensory include visual elements, which include color, texture, and layout. Layout includes the visual structure and context given through proximity. These two seem to have paralells to Andrew Dillon's semantic spatial model, but I want to know more about his model.

Matt discusses the problems with navigation consistancy at the BBC sites. Here is where navigation gets in the way, as browsing structures is a better term and less restrictive. The user needs a means to find other information that is related or provides context to the information the see on their screens. If there is some attraction to the information infront of the user they often believe what which they seek will be close by if the information is grouped by like information. Much like a market where produce is grouped together, as they are like products.

Shopshifting using a Rough Cloud of Information

Shopshifting, is a well coined term I picked up from Mike Lee and something I am doing more and more with my Hiptop. In the Model of Attraction I discuss the a "rough cloud of information" that the user has following them. The mobile device can allow the user to have access to their desired information and make well informed decisions. I often use my Amazon Wishlist to find books or media I am interested in to physically see it and verify my interest in it, or to enter a new found item in the wish list. I entered one book into my wishlist while at Powells as it was full price and a large book I did not want to carry back. I did buy it yesterday with my Barnes and Noble discount and take it home. I also use IMDB while in the video store or Blockbuster to find DVD names or other movies with actors or actresses I like.

The "rough cloud of information" does take thinking about as not all information is accessible from mobile devices, it is not easy to drop into mobile devices, nor is some of the information called what I think it should be. Users often add metadata or change the descriptors for the information. I do this often as I am not attracted to what some want to call items or information chunks.

Number 6

Just when you think everything may not be on the Web... Sonny Sixkiller's jersey pops up. Who? Sonny was was my first collegiate hero, he is a Native American who was the starting quarterback for the Washington Husky's in 1970. If I remember correctly my parents took me to my first college football game to see him play. He also had a role in The Longest Yard. Mush.

Molly wants to discuss SXSW and flow of ideas

Molly asks what one gets from SXSW? I did not make it this year as I am somewhat burried with work, reviews for a great conference in June, and preparing for Portland. I get a great amout from SXSW Interactive infact part of why I am burried is because of a confluence at SXSW last year. The Model of Attraction solution to the failure of navigation as our metaphor of building interfaces to information on the Web. I have been whittling down over 5 pages of single spaced outline on MoA for the last 6 weeks trying to fit a solid understanding of it into 30 to 45 minutes.

Much of what can make SXSW great is the bright passionate people it draws in. The inspiration and spark from SXSW can last a year. I do agree there is a need for a higher level conference as a place to think and bounce ideas around to keep the growth horomones for design, research, and technology fresh. Some of that may come and I really want to be there. This is not to say that SXSW does not offer this, it does as follow on conversations after the panels. It would be great to have these discussions as small groups or as the panels.

Centrino poor WiFi functionality says Mosberg

WSJ's Walt Mossberg offers his insite on Pentium M and Centrino. The Centrino portion of the Intel solution seems to be a sham marketing ploy. If device makers use a real WiFi card with full capabilities the device makers can not use the Centrino or Pentium M monikers that are tied to all the hype.

HTML Hell and beyond

Eric S. Raymond offers his Welcome to HTML hell page (including content, style, and extension hell). I agree with every bit in this.

The Web, information use, and the failure of the spacial metaphor

Francis Cairncross' book title Death of Distance is a wonderful understanding of the world around us in many way and should now apply to spacial relationships on the Web. The idea of spacial relationships on the Web have been a stretch of the truth for a long time. Initially the idea of a person going out and "navigating" other spaces helped those new to the prospect of what the Web held grasp the Web concept.

The problem with spacial explanations of the Web is they do not work very well. The truth is we go nowhere on the Web, information is brought to us. The Web user is ego-centric and rightfully so, as the world of information and commerce on the Web revolves around the user. The Web is truly omnipresent. Information is everywhere at once. The Web can even follow the user on mobile devices. The user does not go out and explore different places, the artifacts of the places come to the user's screen based on what is of interest to the user.

I was reading David Weinberger's book Small Pieces Loosely Joined and it was painful to watch him twist and turn to get the spacial metaphor to work. A whole chapter in the book is devoted to Space [on the Web] (the book as a whole is very enjoyable and worth the time to read). Weinberger first discusses how we use the Web, using surf, browse, and go to a site. This is wrapped with an analogy explaining the Web is like a library where the user does not have access to the stacks of books, but a librarian (or clerk) goes and retrieves the book, based on the request the user made, and brings it to the user. He also states:

... this is perhaps the most significant change the Web brings to the world of documents: the Web has created a weird amalgam of documents and buildings. With normal paper documents, we read them, file them, throw them out, or sent them to someone else. We do not go to them. We don't visit them. Web documents are different. They're places on the Web. We go to them as we might go to the Washington Monument or the old Endicott Building. They're there, we're here, and if we want to see them, we've got to travel.

.... the odd thing is that, of course, we're not really going any place, and we know it.

This is just painful to follow. We keep bringing up this bloodied and battered spacial metaphor trying to make it work to explain more than the very tiny bit it did explain well. The spacial metaphor has long overstayed its welcome and it now hinders us as we try to build the future information interfaces, which include mobile information access and internationalization of information.

Yes, I am saying mobile information use is hindered by a spacial metaphor. It is more than hindered it is crippled by it. When prepare information now location is largely irrelevant, but access, device, application, and information form and highly relevant. Before we prepared information on paper and sent that information to people (which can be done today) and we largely knew how that information was going to be used. Today, with digital information the ease of information reuse and the user's ego-centric view of the information world, we must think of the user and how the information will be used. The proximity of the information to the user through access, storage, or personalization is what is paramount. Proximity is the only spacial element that has significance. This equally applies to internationalization as language and culture are the barriers to the information not space. A Brazilian may be sitting on the T in Boston and want to read the most recent information on rollout of WiFi in Rio. The user should not need to find the Brazilian neighborhood in Boston to get the information in the proper language (Portuguese) with familiar cultural inflections. The user can attract that information form easily, which can be brought to the user if that information and access have been prepared and enabled. The user may have come across a resource for this information while looking for a client's most recent press release and the user forwarded the link to her mobile device to read later. Access to information can and should be based on the users actions and choices.

The user can (and has been able to for some time) create their own metadata and retrieval structures. Communication with live people or machines that can and will convey useful information at the user's desire is not only the reality of the wired world, but what mobile use is all about. The user can set their proximity to information they have come across and connectivity conduits are enablers of that information they have yet to discover.

Up to this point the spacial metaphor only provided us with the navigation, but flat out failed us with what the user could do once they found what they were seeking. The user can browse, search, receive in e-mail (based on list subscriptions), read an information feed that brings to the user new information from sites the user likes or from aggregators, or a variety of other means. Once the user comes across information they have an interest in they want to keep that information attracted to themselves, via storage, putting it on a page that is accessible to a mobile or stationary device, and/or have the information delivered at a time that will be more convenient (getting a text message on your phone with the address and time of a party at an art gallery). Proximity also plays a role in location based services, such as bringing up restaurant listing and reviews when the GPS in our mobile device indicates we are near these establishments. The user should be able to identify favorites or preferences that can help provide "best options".

The realization of the failure of the navigation metaphor to provide for much other than a nice name for the grouped set of links that provide browsing options pushed me to investigate the Model of Attraction (MoA). The MoA is not perfect, but does provide a framework to think about information use and reuse as users currently interact with it. The MoA offers a method for us to work through how we allow the user to easily reuse information they found. The devices are just conduits for the attraction interaction to take place. MoA offers a framework that is also easy to understand, but is a literal description, which helps us see building, structuring, and preparing information and applications for the future.

Navigation -- R.I.P.

Tanya Raybourn finds Spirit of SXSW Interactive and her observations of the David Weinberge keynote glean the wonderful wonders of the Web.

Veen crankin' with OS X

Jeffrey Veen offers his views on Web development on Mac OS X. He discusses using PHP, MySQL, Perl 5.8, CVS, and BBEdit, which in my opinion are excellent choices and some of the reasons I moved over. Jeffrey offers some great links also... (the version control with Mac OS X is a new favorite as is the blog Forwarding Address: OS X