Take a look at HTML’s proportional widths and amount alignment features.

Look at this from HTML specification of <COL> elements:

Authors may specify column widths in three ways:

Fixed

A fixed width specification is given in pixels (e.g., width=”30″). A fixed-width specification enables incremental rendering.

Percentage

A percentage specification (e.g., width=”20%”) is based on the percentage of the horizontal space available to the table (between the current left and right margins, including floats). Note that this space does not depend on the table itself, and thus percentage specifications enable incremental rendering.

Proportional

Proportional specifications (e.g., width=”3*”) refer to portions of the horizontal space required by a table. If the table width is given a fixed value via the width attribute of the TABLE element, user agents may render the table incrementally even with proportional columns.However, if the table does not have a fixed width, user agents must receive all table data before they can determine the horizontal space required by the table. Only then may this space be allotted to proportional columns.

Proportional widths! Nice. This means that you can create tables like this example (i have swapped the original HTML4 style to lowercase XHTML):

Once the (visual) user agent has received the table’s data: the available horizontal space will be alloted by the user agent as follows: First the user agent will allot 30 pixels to columns one and two. Then, the minimal space required for the third column will be reserved. The remaining horizontal space will be divided into six equal portions (since 2* + 1* + 3* = 6 portions). Column four (2*) will receive two of these portions, column five (1*) will receive one, and column six (3*) will receive three.

<table>
<colgroup>
  <col width="30"/>
<colgroup>
  <col width="30"/>
  <col width="0*"/>
  <col width="2*"/>
<colgroup align="center">
  <col width="1*"/>
  <col width="3*" align="char" char=":"/>
<thead>
<tr><td> ...
...rows...
</table>

This leaves me with one big question: How is browser support for <col width=”2*”> ????

BONUS: Did you notice the little align feature ‘align=”char” char=”:” ‘ so that you can correctly align your decimal amounts? I was not aware of that either!

More info in W3C’s HTML4 specification “Calculating the widths of columns“

2) Animation without JavaScript

Believe it! It’s true. Drop those old scripts that made your website scroll and blink because why bother programming JavaScript when plain ‘ol HTML can do it for you! These are the ever-so-beloved

<blink>

and

<marquee>

tags.

blink and marquee

<blink>Sale! Sale! Sale! Buy now and save big!</blink>

<marquee>Welcome welcome welcome! Today is the beginning of the end, buy now!</marquee>

Fabulous humour, just the way I like it :). Especially I love the hit counter:

Oh and by the way, did you know who invented the spacer.gif?

Technorati Tags: spacer.gif, webstandards,

For example I added “quirks or !quirks” to determine whether a page runs standards mode or quirks mode. It pops up an alert that displays rendering mode for each frame.

• “Document mode: CSS1 Compat” is standards mode
• “Document mode: Back compat” is quirksmode

I forget where I found the code (please notify me and I’ll give you credit).I also modified Steve Chipman’s excellent “PageInfo” so that its usable with frames. If frames are found it asks you to enter a frame number (index from document.frames[x])

I also added Andy Budd’s CSS grid layout bookmarklet which I find useful on occasions to see if things line up.

In general I find that I use these less and less, because much functionality is built into Firebug. But on some occations the bookmarklets can prove very handy.

Import all at once (separate HTML page):

Web Standards Investigation Tools (WSIT) HTML page
(last updated 2007-10-12)

Instruction:

1. Save the linked HTML page locally
2. Open Firefox Bookmark Manager (Bookmarks > Manage Bookmarks)
3. Choose File > Import …
4. Import bookmarks into “Bookmarks Toolbar Folder” for easy access to them.

More info:

• Toolbox — locating problems in HTML
• Original Web Standards Investigation Tools (WSIT) bookmarklets (September 2006)
• Technique for locating problems in HTML (September 2006)
• Why web standards matter (case study) (June 2006)

Technorati Tags: javascript, bookmarklet, toolbox, webstandards, web standards

Now I stopped looking. E-texteditor for windows is very intuitive and easy to use. I highly recommend watching the screencast (a short tour of some of the best features). Although it’s still in beta, it seems so much better than the alternatives.

I’m using it for HTML, CSS, JavaScript, Ruby on Rails editing. And it just works.

One note for avoiding future head-scratching: In order to get the keyboard shortcuts (so-called bundles) to work, I had to delete Cygwin and let E install it automatically. Afterwards I had to add packages manually: Subversion (svn)

Other improvements that would be handy:
In HTML mode there is a shortcut “doctype [tab]“, but there is no shortcut for creating the rest of the HTML document. It’s probably easy to add (but i’m not into doing it yet). Besides, I think an addition like this would be a benefit to everybody, so it should be included in the general bundle.

In Ruby files, when looking on Ruby on Rails, it defaults the files to Ruby (because they are and they end in .rb). However, there is a lot of functionality with regards to Rails, so it would actually work better, if .rb defaulted to Ruby. Here is a workaround to add .rb files to Rails syntax.

I also added a bug report “Block selection should work without the mouse” (guess I’m a usability geek).

The simple cheatsheet for E-texteditor at errtheblog is worth checking out, although it contains only the general shortcuts and not the Rails specific ones. Via: RubyInside.

Technorati Tags: editor, e-texteditor, etexteditor, windows, textmate, html, css, javascript, rails, ruby on rails, ruby, rubyonrails, cygwin

I remember Eric Meyer mentioned this solution back at a workshop in 2005 (before he could actually tell that it was for Technorati — the redesign was unveiled a few days later).

Technique

HTML for the box:

<div class="bloginfo-summary boxc">
  <h2>..</h2>
  <ul>
    <li>..</li>
    ..
  </ul>
  <b class="cn tr"></b>
  <b class="cn br"></b>
  <b class="cn tl"></b>
  <b class="cn bl"></b>
</div>

The HTML is then styled with the following CSS:

div.bloginfo-summary {background:
  url(http://static.technorati.com/static/css/img/bg/fade-lightgreen.png) repeat-x;
  float:left;margin-bottom:20px;padding:10px;width:690px}
/* Large radius image backgrounds */
.boxc {position:relative;}
.boxc b.cn { height: 10px; width: 10px; background:
 url(http://static.technorati.com/static/css/img/corners/white.png) no-repeat;
 position:absolute;
 }
.boxc b.tl {top: -1px; left: -1px; background-position: top left;}
.boxc b.tr {top: -1px; right: -1px; background-position: top right;}
.boxc b.bl {bottom: -1px; left: -1px; background-position: bottom left;}
.boxc b.br {bottom: -1px; right: -1px; background-position: bottom right;}

/* IE Filters */
    * html .boxc b.bl {bottom:-2px}
    * html .boxc b.br {bottom:-2px}
    * html .boxc b.cn {background-image:
       url(http://static.technorati.com/static/css/img/corners/white.gif);
       line-height: 1px;
       font-size: 1px;
      }

So, graphically displayed, the

elements are actually positioned in each corner with no content:

Note that the background-image for the faded box is one thin sliced faded image:

The corners is made with only one image that’s positioned differently depending on which corner it’s in. The image is actually a transparent circle on white background.

shown on dark background for clarity.

So I included the final example on a separate page (because the Wordpress editor doesn’t let me add the HTML code precisely as it’s required)

example page: technorati-style rounded corners

More info
Eric Meyer: Technorati Redesigns (June 2005)
Smileycat: CSS Rounded Corners Roundup

Technorati Tags: web standards, css, html, rounded corners, technorati, tantek celic, eric meyer

Microsoft Vista Released

Microsoft released its new operating system, Vista, on Jan. 30. Here are some of its features:

• Microsoft Word’s helpful paper-clip icon now blinks at rate of normal humans
• Enhanced graphics on “System Is Not Responding” pop-up window
• Five new card-back designs for Solitaire
• Something that Apple would never, ever dream up in a billion years
• 4,391 security flaws to be patched over next 15 years
• Promise of broad, open-minded future or some bullshit
• Lists blocked wireless connections with greater speed and accuracy
• New operating system, same old Microsoft Paint

What are your best feature list (be imaginative and humorous)?

Geegish web standards side note: Actually, the HTML for creating the bulleted list in the original The Onion article is a

with nested

elements. Why are they angry with a standard unordered list?

Bonus link: Another fabulous The Onion piece: Google Announces Plan To Destroy All Information It Can’t Index (from August 2005).

Technorati Tags: the onion, microsoft, windows, vista, humor, paperclip, paint, solitare, security wireless, web standards, google

In a brief discussion about web standards, Bill seems to interpret web standards as ws*, xml, etc. He does not really mention html, xhtml, css or similar approaches, which is why he probably does not follow Molly’s point to sceptics of Microsofts commitment to webstandards.

Molly:

I’m just saying there are a lot of skeptics still out there.

Bill Gates:

How can they be skeptical? I guess if your job is to be skeptical, you’d hate to be out of a job!

Roger Johansson follows up on his blog:
Roger:

No, Bill, that is not why people are skeptical. They are skeptical because they find it hard to believe that the richest company in the world can’t afford to make a Web browser whose Web standards support matches that of browsers created by non-profit organisations, open source projects, and one man bands.

With the release of IE 7, I think that Microsoft has actually showed that it’s browser team is very comitted to pushing web standards to a better level. But there is another issue that — in my opinion — is more important because it affects the hordes of developers using Microsoft technology.

My biggest concern, therefore, is not the browser, but the Microsoft developer tools and their lack of focus on webstandards.

Microsoft tools lack support of web standards

The biggest issue is not IE’s commitment to webstandards, but Microsoft and it’s developer tools’ commitment to webstandards

And no, recent support for xhtml validation does not make your tools entirely focused on webstandards.

I have seen recent books bought by colleagues at work, where every piece of HTML is table based layouts, FONT tags, all capital tags, etc.

So there might be a commitment on the strategic level, but it’s very badly executed. I’d really appreciate if you post a comment with any examples you stumble upon.

Technorati Tags: microsoft, web standards, support, webstandards, 456bereastreet, molly, bill gates, ie, ie7, html, xhtml, validation

If you have not yet seen it, it’s an

-tag on each side of the Tower of Pisa:

I decided to visualize a few HTML tags myself:

Modified from http://flickr.com/photos/mikemac29/340503313/

Modified from http://flickr.com/photos/jorgeorte/18550828/

Modified from http://flickr.com/photos/maddiedigital/311161230/

Modified from http://flickr.com/photos/anabananasplit/337567708/

Modified from http://flickr.com/photos/idua_japan/258758222/

All photos are Creative Commons license that I found on Flickr via the creative commons search option. If you feel like contributing, we could start a complete HTML tag visualization encyclopedia. Dalager told me he will create a photo pool on Flickr.

Technorati Tags: html, tag, visualization, fun, humour, flickr, photo pool, creative commons

I decided to make a little toolbox that’s easy to apply on web pages, when investigating problems with web pages. Basically, it’s the tools I used when investigating the case I described in “Why web standards matter (case study)”

I split this into two posts. This is the second part. The first one is about the toolbox.

Web standards investigation technique

The case study shwoed a page in big trouble and the problem turned out to be a combination of different things that led to the guidelines:

• Avoid JavaScript (where appropriate)
• Remove HTML errors and warnings
• Remove elements without content

The following steps can be used on any page to assess if the page is likely to benefit from a rework. Of course I cannot guarantee that the investigation technique can find the root to trouble on any page. And it’s not likely that this checklist can replace a thorough investigation (which you’ll probably end up with in some cases).

However it might be a good starting point if something is not working or going wrong.

JavaScript errors
HTML errors and warnings
Total code weight
Content to markup ratio
Number of

elements
Number of

elements (used for layout)
Total number of elements in the DOM

1. JavaScript errors

JavaScript errors are important to get rid of as errors in JavaScript prevent your code from running. The Firebug extension for Firefox comes in handy, as it shows a little icon on the statusbar. It’s normally a green checkmark (but converts to a red icon and displays the number of JavaScript errors. A click shows the Firebug console with additional information on each error. Goal is to have 0 JavaScript errors.

A little more on JavaScript should be avoided (where appropriate): JavaScript is perfectly OK to use for adding functionality to your page. But, you should probably not use it for things like making a print version of you page (use CSS), or render stuff on your page during load (

document.write

).

2. HTML errors and warnings

HTML errors and warnings will in most cases lead to browser misinterpretation of your web page (because web standards only describe what to do when HTML is correct). HTML Validator (based on Tidy) comes in handy here: It shows an icon in the status bar. The icon is a green checkmark that changes to a warning icon whenever errors are present (and there is a setting that shows you both the icon and text about how many warnings.

The error messages are mostly good, letting you know exactly where the problem is in the HTML source.

Its realistic to aim for 0 HTML errors and warnings (but on a rare occation there can be reasons for leaving a few warnings in).

3. Total code weight

The “page info” bookmarklet tells you total code weight. In general, this number should be as low as possible because that means sending fewer bytes to the client, making code easier to interpret for the browser.

Ideally,

4. Content to markup ratio

Also from the “page info” bookmarklet. The relation between size of content compared to entire footprint of HTML page. The higher ratio the better.

In my experience, pages designed using tables and transparent images for layout has a content/markup ratio around 10-20%. Removing tables and unnecessary pixels easily bring the ratio up on the better side of 50%.

Of course, the exact ratio to aim for is depending on the type of page: The more content-heavy, the better the ratio.

5. Number of

img

elements

Count number of images with bookmarlet “#img”. The number itself should respond approximately to the number of images providing content on the page. Use it to assess if there are transparent images or other images that don’t convey any content to the user.

6. Number of

table

elements (used for layout)

Count number with bookmarklet “#table”. Use it to assess if tables are used for layout. Tables should only be used for tabular content. Also, the other bookmarklet “Number table rows” is sometimes handy to count the number of rows used.

7. Total number of elements in the DOM

Count total number of elements in DOM with the bookmarklet “#elements”. In the case study, I had a page with 27,000 DOM nodes (and that was asking for trouble).

All in all, these numbers can hint problems in your page and make it easier to guess what to do about it. I’m using this to estimate which pages to change (and which could be left).

Summary

These are the basic techniques that have been helpful for me when investigating web standards related issues in web pages. The technique here is complimented with the page describing the toolbox for locating problems in HTML.

Related reading:

• toolbox for locating problems in HTML
• Why web standards matter (case study)

Technorati Tags: javascript, bookmarklet, toolbox, webstandards, web standards

I decided to split this into two posts. This first one is about the toolbox. The second part is about the investigation technique (available separately).

Firefox Extensions for the toolbox

I use Firefox for the investigation. It has the best web developer tools and bookmarklet support. Get firefox.

1. HTML Validator (based on Tidy). HTML validation errors and warnings immediately in the status bar on the page you watch. Indispensible when aiming for standards compatible websites.
2. Firebug. JavaScript errors and warnings immediately in the status bar.
3. Firefox Web Developer Toolbar. Has a lot of handy tools, among others the ability to turn off CSS stylesheets.

For a more indepth description of Firefox extensions, refer to my previous post from last year: Web developer’s collection of browser tools.

JavaScript bookmarklets

Bookmarklets are small JavaScript snippets, that is stored as a bookmark and executed on any page. I prepared a collection useful for investigating web standards issues.

Import all at once (separate HTML page):

Web Standards Investigation Tools (WSIT) HTML page
(last updated 2006-09-18)

Instruction:

1. Save the linked HTML page locally
2. Open Firefox Bookmark Manager (Bookmarks > Manage Bookmarks)
3. Choose File > Import …
4. Import bookmarks into “Bookmarks Toolbar Folder” for easy access to them.

The bookmark above contains the following bookmarklets. I list them with a “shortname”

1. Page Info (contains key figures about content to markup ratio, total code weight and number of image elements. Shortname: pInfo
2. Mouse Over DOM Inspector 2. Turned on, you simply hover any element to learn about attributes, children and ancestors. Probably the easiest way to investigate a HTML page. Shortname: modi2
3. JavaScript Shell. Opens a JavaScript Shell and allows it to access the current page. Shortname: Shell

A few other bookmarklets that I use frequently for furthter investigations, but they are not used in my description.

4. JavaScript Variables. Displays all JavaScript variables and functions. Shortname: JS vars
5. Cookie editor. View, delete and edit cookies. (Will be available later due to a server crash).
6. Table number rows. Numbers each table row (makes it easy to see if tables are used for layout). Shortname: Trow

More info about the bookmarklets.

Page Info and Mouse Over DOM inspector are part of Steve Chipman’s bookmarklet collection “Favelet Suite” which is definately worth a mention.

JavaScript Shell, JS Variables and Table number row are from Jesse Ruderman’s indispensable webdevelopers bookmarklet collection (which you can download as one file)

The Cookie editor is my own invention. Will be available later as I will move it to a new server.

Summary

These are the basic tools that have been helpful for me when investigating web standards related issues in web pages. The toolbox here is complimented with the page describing the technique for locating problems in HTML.

Related reading:

• technique for locating problems in HTML
• Why web standards matter (case study)

Technorati Tags: javascript, bookmarklet, toolbox, webstandards, web standards