Simian Design

A bunch of design and development links for you today. The majority (90%?) of these links came from [etc][via] the past couple of months.

* [Create really cool new windows][1] using [prototype][1a]. You can then use [script.aculo.us][1b] to have the sexy effects on the window. You _must_ try the demos.
* [24ways][2] really deserves it’s own post. It’s got [24 great tutorials/posts][2] on how to do things. Things such as:
* [Swooshy Curly Quotes without Images][2a] is great for pullout quotes.
* [Improving Form accessibility with DOM Scripting][2b].
* [An explanation of ems][2c].
* Russ Weakley shows us how to create [simple, accessible external links][3]. He uses a class in this example, but I’ve seen the same thing done using a Regex parser to loop through all the links. But that’s probably a bit much.
* [Tagcloud lets you create and manage clouds][4] with content you are interested in, and lets you publish them on your own website.

[1]: http://blogus.xilinus.com/pages/javawin
[1a]: http://prototype.conio.net/
[1b]: http://script.aculo.us/
[2]: http://www.24ways.org/
[2a]: http://24ways.org/advent/swooshy-curly-quotes-without-images
[2b]: http://24ways.org/advent/improving-form-accessibility-with-dom-scripting
[2c]: http://24ways.org/advent/an-explanation-of-ems
[3]: http://www.maxdesign.com.au/presentation/external/
[4]: http://www.tagcloud.com/
[5]: http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
[5a]: http://www.gr0w.com/articles/code/php_5_star_rating_system_using_hreview/
[6]: http://www.formarchitect.com/index.php
[7]: http://www.dragon-labs.com/articles/octopus/
[8]: http://www.skimcss.com/skimlist
[9]: http://www.smileycat.com/miaow/archives/comment-showcase.html
[10]: http://paularmstrongdesigns.com/weblog/css/navigation-magnification
[10a]: http://www.asktog.com/columns/044top10docksucks.html
[11]: http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
[12]: http://alltheheroesaredead.com/weblog/archives/2006/02/external-related-links-on-mt-blog
[13]: http://www.cssplay.co.uk/menus/dd_valid.html
[14]: http://www.mapsurface.com/
[15]: http://www.cssplay.co.uk/menu/one_page.html
[16]: http://pro.html.it/niftycube/
[16a]: http://www.cssplay.co.uk/boxes/snazzy.html
[16b]: http://www.spiffycorners.com/

[via]: http://www.fortysomething.ca/mt/etc/
read more »

[TAW (Web Accessibility Test)][1] is a tool for the automatic analysis of Web sites, based on the [W3C - Web Content Accessibility Guidelines 1.0][2] (WCAG 1.0).

They have three different versions of TAW for your needs. A downloadable version, a web-based service, and a Firefox extension.

All three are free, all three complement each other, all three are very useful. All three pretty much rock.

[1]: http://www.tawdis.net/taw3/cms/en
[2]: http://www.w3.org/TR/WAI-WEBCONTENT/

Sure, [I've got a Character Entity Reference Chart][1]. But it’s long, and sometimes can be hard to find what you want.

[This Character Entity Reference Chart][2] solves that problem. It’s fun, good looking, easy to find what you want, and easy to get the codes you want. The Periodic Table Look is good, and works well. [Jim Rutherford][3] created this, and I think it’s really well done. Nice job Jim.

[1]: http://www.simiandesign.com/blog-fu/2003/01/simple_characte.php
[2]: http://www.digitalmediaminute.com/reference/entity/index.php
[3]: http://www.digitalmediaminute.com/

A couple of days ago I posted a quick [post on browser elitism][1]. It was mainly based upon what I read from Jeremy in the comments.

Jeremy has given it more thought, and posted a very good article on [seperating presentation and behaviour][2].

It’s very good and asks some good questions.

> There are three fundamental points here:
>
> 1) DOM scripting, not CSS, is the correct tool for making behavioural usability enhancements.
> 2) Amongst browsers, the DOM is more widely-supported than CSS2.
> 3) Amongst developers, CSS is more widely-supported than DOM scripting.
>
> To me, it’s clear that the problem lies with the third point. Lots of developers use the hammer of CSS so everything looks like a nail to them.
I think he’s spot on here.

[1]: http://www.simiandesign.com/blog-fu/2005/04/more_on_browser.php
[2]: http://adactio.com/journal/display.php/20050421185604.xml

[via]: http://www.clagnut.com/blogmarks/

Zeldman makes it easy for everyone and [creates a standard on how to include Web Standards in an RFP][1].

> HTML
> Validate to either the W3C’s XHTML 1.0 transitional or strict doctype
> http://www.w3.org/TR/xhtml1/
>
> CSS
> Validate to the W3C’s CSS 2.1 or 1.0
> http://www.w3.org/TR/CSS21/
> http://www.w3.org/TR/CSS1
>
> Javascript
> Javascript will never use browser detect but instead object detection to test for browser support of properties, arrays and methods

The JavaScript block is a good one. The whole aspect is brilliant in it’s simplicity. Because I can’t write my way out of a paper bag I’ve always taken a page to explain these simple ideas. Now I’m using this.

[1]: http://apartness.blogspot.com/2005/04/how-to-include-web-standards-in-rfp.html

Ajax is what [Adaptive Path calls Asynchronous Javascript + XML][1]. And boy howdy is it powerful. [Google Suggest][2] and [Google Maps][3] are two very high-profile implmentations of this type of application.

Ajax really isn’t an application, methodology, technology etc. It’s several things, all working together.

* XHTML and CSS
* The DOM
* XML and XSLT
* XMLHttpRequest
* Javascript

This article by Jesse James Garrett is so worthwhile. The charts, graphics and writeup illustrate the flow of data nicely. A very good article.

[1]: http://www.adaptivepath.com/publications/essays/archives/000385.php
[2]: http://www.google.com/webhp?complete=1&hl=en
[3]: http://maps.google.com/

[YourTotalSite.com][1] is a good resource. Good site, thorough information and nice collection of links and articles. Using the site is pleasant, the design is clean and open, and is worth bookmarking.

[1]: http://www.yourtotalsite.com/

François Briatte has developed a very comprehensive and informative survey about how much web design is based on common practices. His original thought was to "quantify redundancy in web design techniques, layouts, and code".

It is
a modest work, that may contain mistakes. It is written by a hobbyist,
and its conclusions are not earth-shattering, but I thought the stats
may interest you.

I find this survey very interesting. I’m still digging through it, but I really like the comparisons drawn. Most excellent work François.

Christina and Nate presented a very nice way to make wireframes more meaningful. Information Architects, designers and developers can (and should!) work together more effectively using a standards-based enviornment.

Within these new wireframes, references should be CSS-compataible. Hierarchies should be indentified. Task Analysis can define the source code order. (I really like this idea.) Using semantics and in-house vocabulary to develop a consistent CSS Naming Convention.

A great idea. I think it’s a real good step forward for wireframes, and for teams of designers, IA’s and developers that work on projects. Very good stuff.

Okay, I’ve just finished reading Eric’s thoughts about Canvas, and I was horrified. My initial thought was Oh no. Not again. Then I calmed down a little bit. It’s only for OS X. It’s not going to be like it was back in 1996. It won’t be tag-soup like before. Really.

Then I read Tim Bray’s response to Dave Hyatt’s announcement.

Both of these articles raise really good points. Basically which is Why?. Why should HTML be extended? Why not XML? Why not XHTML? I was starting to get upset. Why were they extending these fields (img tag, slider, search controls and canvas tag)? Was it only a matter of time before “special” extensions were introduced, and we were back at tag-soup?

Then I read Dave Hyatt’s response to the uproar. Whew. Now I feel better.

I suggest if you were getting worried about back-sliding, go read this. Now. I’ll wait.

He clearly outlines why XML, XHTML and SVG were not used. (real-world standards, amount of work required, feasibility). I won’t go over all his points, but I feel better now.

The four items that have been extended are the Slider (Safari and Dashboard), Search Fields (Safari and Dashboard), compositie img tag (Dashboard) and Canvas tag (Dashboard).

Also, all of these extensions have been submitted to the WHAT-WG for review. I would actually love to see the slider and improved search fields in real-world use.

As long as it doesn’t lead to tag-soup.