Off the Top: HTML Entries

Showing posts: 16-30 of 75 total posts


July 16, 2004

Web Standards and IA Process Married

Nate Koechley posts his WebVision 2004 presentation on Web Standards and IA. This flat out rocks as it echos what I have been doing and refining for the last three years or more. The development team at work has been using this nearly exclusively for about couple years now on redesigns and new designs. This process makes things very easy to draft in simple wireframe. Then move to functional wireframes with named content objects in the CSS as well as clickable. The next step is building the visual presentation with colors and images.

This process has eased the lack of content problem (no content no site no matter how pretty one thinks it is) often held up by "more purple and make it bigger" contingents. This practice has cut down development and design time in more than half and greatly decreases maintenance time. One of the best attributes is the decreased documentation time as using the Web Developer Extension toolbar in Firefox exposes the class and id attributes that provide semantic structure (among many other things this great tool provides). When the structure is exposed documentation becomes a breeze. I can not think of how or why we ever did anything differently.



Best Web Development Practices

Those of you looking for a relatively short article or essay on current best Web practices should look no further than the Best Web Development Practices provided by Apple. Yes, this focusses on web standards, but what best practice does not as it is the cornerstone of accessibility as well as makes the same content usable on mobile devices (one caveat the article will not print on 8.5 by 11 inch paper).



May 30, 2004

Make My Link the P-link

Simon hit on plinks as an echo to Tim Bray's comments and variation on Purple Numbers (Purple Numbers as a reference). As I have mentioned before, page numbers fail us and these steps are a good means to move forward.

Simom has also posted in more plinks and in there points to Chris Dent's Big Day for Purple Numbers.

I have been thinking for quite some time about using an id attribute in each paragraph tag that includes the site permalink as well as the paragraph with in that entry. This would look like: <p id="1224p7">. This signifies permanent entry 1224 and paragraph 7 with in that entry. What I had not sorted out was an unobtrusive means of displaying this. I am now thinking about Simon's javascript as a means of doing this. The identifier and plink would be generated by PHP for the paragraph tag, which would be scraped by the javascript to generate the plink.

The downside I see is only making edits at the end of the entry using the "Update" method of providing edits and editorial comments. The other downside is the JavaScript is not usable on all mobile devices, nor was the speed of scrolling down Simon's page that fluid in Safari on my TiBook with 16MB of video RAM.



April 17, 2004

Definition Lists Defined

Definition lists explained and examples by Max Design. Definition lists are often used incorrectly, but these examples are done to show how to use definition lists when it is semantically correct to use them. Definition lists are used for presentation purposes then the information is actually a list, ordered or not. Using the proper structure for information is critical for those that can not see the presentation (visually impaired, mobile devices, text readers for those driving, etc.).
[hat tip Mike]



January 29, 2004

Doing this how long

I realized today that I have been marking-up and posting to my own personal Web pages since November 1995. I have been trying to figure out when all this started. The pages started as "The Growing Place", which included the links page along with a handful of other pages on CompuServe's initial hosting of personal pages. I moved from there to Clark Net in late 1996 so I could get CGI access and have my own e-mail (well not really my own). In late 1997 I bought vanderwal.net and finally moved it to a couple hosting homes in 1998 and 1999. Then has been with its current host since 2000, which has provided great service and resources since then (I actually had an other personal site with this host much earlier and ran not so personal site the host for a short while.

Why all of this today? Don't know. It could be that I finally found when Compuserve started hosting member's pages. It does not seem like that long ago until I think that I have been building a presence on the Web for coming on nine years. I have been doing this professionally since 1996. I have been working professionally as a geek since 1988, either as my full-time role or just one of the hats I wore. I have learned a lot about application development and Web development in all these years. It is still about getting the information into the hands of people that are looking for it when they need it.



December 16, 2003

XFN Social Network

XFN, the XHTML Friends Network, has been developed and is now explained. Tantek, Matt Mullenweg, and Eric Meyer are the force behind this better than FoAF implementation of relationships. The key behind XFN is ease.



December 8, 2003

WaSP interview with Todd Dominey

The Web Standards Project interviews Todd Dominey, who was behind the standards-based PGA redesign. The interview raises the problems Content Management Systems cause with valid markup. Todd also highlights it is much easier to move towards standards when working from scratch than cleaning up previously marked-up content.



December 2, 2003

Harpers redesigned

Harpers Magazine has been redesigned by Paul Ford. Paul discusses the Harpers redesign on his own site Ftrain.

The site is filled with all the good stuff we love, valid XHTML, CSS, accessible content (meaning well structured content). The site is clean and highlights the content, which is what Harpers is all about - great content. The site is not overfilled with images and items striking out for your attention, it is simply straightforward.

We bow down before Paul and congratulate him on a job very well done.



November 6, 2003

Interdependance of structure, information, and presentation

Peter J. Bogaards explains The Document Triangle: The interdependence of the structure, information and presentation dimensions. This troika is very important clear information consumption, but also information reuse. Structure is extremely important to transmitting information, but also important to information reuse. Information lacking structure nearly as reusable as a newspaper article printed on paper.

One great location to explore the ease of information reuse and the affect the presentation layer has should look no farther than, CSS Zen Garden, where nearly all the content is identical in the various layouts and designs. The structure of the content provides a solid framework to rework the presentation layer. The presentation layer can add to or detract from the clarity of the message as well as the attraction a user may have to the message.



October 30, 2003

CSS Tabs part 2

Doug Bowman provides Sliding Doors 2 for ALA. The sliding doors rounded tabs done with CSS, meaning the text is not in a graphic and the tabs have rollover effects with out having to build rollover images and deal with JavaScript. Doug's version 2 of sliding doors provides those with pages in CMS or other non-hand built pages. This beats the JavaScript sniffing the URL to set the local tab setting.



October 7, 2003

Building Web pages for crippled IE browser

Microsoft and others are posting the work arounds needed for the Web pages you build if they require plug-ins. Java and Active Script seem to been the focus at this point. Here we go: Microsoft guide for building to the new neutered IE browser, Apple developer guide for post EOLA development, Real Networks guide for embedded, and Macromedia guide. [hat tip Craig Salia]



September 2, 2003

Hyper Text 2003 Papers posted

The Hyper Text 2003 Conference has posted the Hyper Text 03 Papers online. There are some great reads in the pile, if you enjoy theoretical and future-current uses of hyper text as a tool and theory.



August 27, 2003

Kottke and others on standards and semanticsk

Kottke provides a good overview of Web standards and semantically correct site development. Jason points out, as many have, that just because a site validates to the W3C does not mean that it is semantically correct. Actually there are those that take umbrage with the use of the term semantically for (X)HTML, when many consider it structural tagging of the content instead, but I digress. A "valid" site could use a div tag where it should not have, for example where it should have been a paragraph tag instead. Proper structural markup is just important as valid markup. The two are not mutually exclusive, in fact they are very good partners.

One means to marking-up a page is to begin with NO tags on the page in a text editor then markup the content items based on what type of content they are. A paragraph gets a "p" tag, tabular data is placed in a table, a long quote is put in a "blockquote" tag, an ordered list gets "ol" tags surrounding them with items in the list getting wrapped with "li" tags, and so forth. Using list tags to indent content can be avoided in using this method. Once the structure has been properly added to the document it is time to work with the CSS to add presentation flair. This is not rocket science and the benefits are very helpful in transitioning the content to handheld devices and other uses. The information can more easily scraped for automated purposes too if needed.

It is unfortunate that many manufacturers of information tools do not follow this framework when transforming information in to HTML from their proprietary mirth. A MS Word document creates horrible garbage that is both non-structural and not valid. The Web is a wonderful means to share content, but mangled markup and no structure can render information inconsistent at best, if not useless.

While proper development is not rocket science, it does take somebody who knows what they are doing, and not guessing, to get it right.

Others are posting on Jason's post, like Doug Bowman and Dave Shea and have opened up comments. The feedback in Doug's comments is pretty good.



August 3, 2003

Understanding the Web Medium

Joe Gillespie has posted a current feature Factor-X about understanding the medium of the Web and digital information. Joe explains many that come from the print work of graphic and information design will create the information in graphics and slice and post that information. The Web is not only for reading information, but also reusing information. HTML pages can, if marked-up properly (which is not difficult at all), be read by audible site readers for those with visual impairments or for those that are doing other activities like driving. HTML pages, if built to the standards can also easily be used in mobile devices with nothing more than a browser.

Understanding the medium is where Joe is taking the readers of this article. One of the advantages of the Web is having the ability to structure the information easily and modifying the presentation as needed or wanted. There are standard interface conventions that are easily understood with HTML that get broken in Flash (the hand pointer on for all content, including that which is not clickable). The great advantage of HTML is having access to the information directly so one can quote and have an easy means of attributing quotes through linking to the source.

Go read Joe's article, actually bookmark Web Page Design for Designers and go read monthly, you will be happy you did.



July 22, 2003

Blogs get higher Google rankings thanks to proper HTML

Matt points out Google ranks blogs highly. This seems to be the result of Google giving strong preference to titles and other HTML elements. Tools like TypePad help the user properly develop their pages, which Google deems highly credible.

Matt's complaint is his very helpful PVR blog is turning up top results in searches for Tivo information, and other recorder info. Matt's site is relatively new and out ranking the information he is discussing.

This is something I personally run into as things I write about here often get higher Google ranking than the information I am pointing to and is the source and focus of the information. I have often had top Google ranks for items that are big news on CNN or the New York Times, which I am pointing to in my posts.

Much of the reason for this seems to be understanding proper HTML uses and not putting my branding at the forefront of the message. CNN puts their name first in the title of their pages (not the headers, which also have benefit if they are in "H&" tags). The tools and people building Web pages with attention to proper naming and labeling will get rewarded for their good work (if a top Google rank is a reward).

I have written on this in the past in Using HTML tags properly to help external search results from April, which mostly focussed on search ignoring Flash, but for the few HTML elements on a page wrapping the Flash. Fortunately there have been enough links pointing to the site that was laking the top rank to raise the site to the top Google rank.

Some of the corrected Google ranking will come over time as more sites begin to properly mark-up their content. The Google ranks will also shift as more links are processed by Google and their external linking weighting assists correcting the rankings.



This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike License.