Archive for the ‘Strategy’ Category

Peter’s Blog - The window.onload problem (still)

Tuesday, February 6th, 2007

Peter writes about the still present window.onload problem. It’s a most excellent article, and you should go read it.

The base problem is that if you truly do seperate presentation, structure and interaction (HTML, CSS or Javascript), then you can be presented with a situation where a large image is trying to load, preventing from the window.onload from firing, which is preventing the Javascript from attaching the functions needed. If that Javascript doesn’t fire, the user can then easily break the page.

Luckily Peter outlines several solutions, all very easily explained.

Gridding the 960

Thursday, December 14th, 2006

Cameron Moll has collected a number of different articles, graphics, links and thoughts regarding designing for a grid. It’s an excellent resource.
Some highlights are:

How to redirect a web page, the smart way

Monday, August 14th, 2006

Steven Hargrove has a great article on how to redirect a web page the smart way.

The best way to redirect those pages is by using something called a “301 Redirect”.  He goes into why the 301 works, and examples of ASP, JSP and other pages.

Breadcrumbs

Tuesday, May 30th, 2006

I ran across this great article by Angela Colter on Exploring User Mental Models of Breadcrumbs in Web Navigation.

Breadcrumbs have three main types. Location breadcrumbs show the current position within the hierarchy, Path breadcrumbs show the path the user has taken, and attribute breadcrumbs show item meta-data. Most people are familiar with location and path breadcrumbs.

The most common connector for breadcrumbs is >, at 47%. Number 2 comes in at the colon (:) at 11%. That’s huge. This is probably indicative that being different might not be ideal. I say this because of several factors.

Breadcrumbs only appear on 17% of sites (that were surveyed). Only 72% of users even noticed the breadcrumbs. Only 52% even use them.

…if users do not have a clear mental model of breadcrumbs, it may be because they do not encounter them often enough to know what they represent.

So breadcrumbs need to thought about a bit more.  Angela also talks about the details of the three types of breadcrumbs (location, path, attribute) in greater depth, and really helps explain them clearly.

Ajax Mistakes

Tuesday, December 6th, 2005

The listing of [Ajax Mistakes][1] really could be applied to many other, non-Ajax instances.

__Breaking the Back Button__ is one my giant peeves. I hate it when I press back and things go all goofy. Gmail used to be really bad at this.

__Inventing new UI conventions__ is another I really agree with. While it might be cool, try and make it obvious at least. Be aware of what you’re changing, and why.

__Not using links__. I should be able to deep-link to any Ajax app.

It’s a high-level list, and doesn’t even try to go into how to fix these problems. It’s more of things to avoid from the get-go. If you do any sort of javascripting, then go read this. Hell, if you do any UI work at all, go read this.

[1]: http://swik.net/Ajax/Ajax+Mistakes

Effective Search Engine Optimization

Tuesday, November 8th, 2005

[Andy Hagens][1] has written a great article over at A List Apart. [1High Accessibility Is Effective Search Engine Optimization][2] is just great.

> …high accessibility overlaps heavily with effective white hat SEO.

The title says is all. The quote above is DEAD-ON. If you want __good SEO then make your site accesible__. Just an excellent article.

[1]: http://alistapart.com/authors/h/andyhagans
[2]: http://alistapart.com/articles/accessibilityseo

Tutorials, Best Practices, and A Thing I Want.

Thursday, July 14th, 2005

Couple of items today.

First is [Obsoletely Famous][1], which hopefully will fulfill it’s promise. It’s a [collection of good, up-to-the-date tutorials][1]. The idea here is to minimize and hide older cruft, and present the good stuff for our reference pleasure. I hope it works. Covering [JavaScript][1js], [CSS][1css], [HTML][1html] and [Accessibility][1ac].

Second is a new Official Best JavaScript Practice. It’s Official because it comes from [Peter Paul-Koch][2]. And it seems pretty dead-on. Basically there are two ways of changing the style of an element, through the `style` or the `className` element. The New Official Best Way To Do Things? [Change the `className` element][2].

And third. Someone buy me a [ZoHo Artform No. 1][3]. Please. I’m so in love with this. It’s just a thing of beauty. Go check ou the the photos. It’s got 920 parts, bronze and stainless steel, and it’s all wonderful. I really want one.

[1]: http://icant.co.uk/of/
[1js]: http://icant.co.uk/of/feeds.php?t=js
[1css]: http://icant.co.uk/of/feeds.php?t=css
[1html]: http://icant.co.uk/of/feeds.php?t=html
[1ac]: http://icant.co.uk/of/feeds.php?t=ac

[2]: http://www.quirksmode.org/blog/archives/2005/07/benchmark_tests.html

[3]: http://www.zoho.nl/zoho2.html

Link Dump, Part III

Friday, June 10th, 2005

A more web-centric dump of links today.

#### JavaScript ####
* [domFunction][1] is one way to run scripts before `window.onload`. Useful, and slick. ([via][clag])
* It’s always good to have [generic, unobtrusive form validation][1] scripts at your disposal. A most excellent walkthrough of how and why he created this script. ([via][clag])
* Create [custom checkbox elements][7]. Nice, but it might be a little much. ([via][simion])
* [fadomatic][9] is a nifty little javascript class that provides cross-browser alpha-fade effects. Fun. ([via][simion])
* [Clear that event-cache][10]. It’s good for the memory. ([via][simion])
* There is a new, and super-simple, way to [clear floats][11]. PPK writes about this wonderful new method. `overflow: auto`. Wow. ([via][simion])
* [Zebra Tables][14] is a nice script to accompany data tables.
* This [Fluid Panel Layout][16] is just awesome. I so love it. The subtle wrapping of the inner, scrolling divs is sweet, as it the drop shadow. Seriously, this might be the __neatest link in this whole list__.
* The [minmax script][17] is pretty darn cool as well. Widths, heights, percentages, ems, pixels…it seems to have it covered.
* The [Multiple Text Applicator][18] is a different way to approach lists and a `textarea`, but it seems to work pretty OK. Basically it seems to create a list in a `textarea` that it then breaks apart and makes into a DOM-manipulated input list (create and delete rows of said list). Interesting.
* [Unobtrusive Dynamic Select Boxes][19], from Bobby van der Sluis. The semantic code behind it is quite nice.

#### CSS ####
* We have fixed layouts. Fluid Layouts. [Elastic layouts][3]. But this latest addition to Elastic is cool, because it uses `ems` and the `max-width` property. “But `max-width` doesn’t work in IE” you say. “expressions” says I. Good article, good technique.
* [Scrolling drop shadows][6] is a decent concept. I’m not the biggest fan of the `fixed`-type elements, but this isnt’ bad.
* A nice and simple intro to [3-column layouts][8]. ([via][simion])
* [Taming the back button][12]. ([via][simion])
* An excellent write-up on the [various ways to style visited links][20]. Worth checking out.

#### Misc ####
* “It is quite possible, in fact could be preferable, to [manage content and distributed authorship without the use of a content management system][4]“. Process really is the most important thing.
* [Accessibility footnotes][5] is a very intruiging idea. The idea is that you use the `longdesc` attribute to link to a footnotes section, _on the same page_, which can be hidden if you choose.
* Tired of Lorem Ipsum? Want to use some real text? The [ungreek.toolbot engine gives you different texts from which you can generate greeking][13].
* Most [standards-based sites don't need to include tabindex][15]. This article also talks about where and when to use `tabindex`.

[1]: http://www.brothercake.com/site/resources/scripts/domready/
[2]: http://juicystudio.com/article/generic-form-validation.php
[clag]: http://www.clagnut.com/blogmarks/
[3]: http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
[4]: http://www.7nights.com/asterisk/archive/2004/10/content-management-no-system
[5]: http://www.stuffandnonsense.co.uk/archives/accessibility_footnotes.html
[6]: http://zooibaai.nl/archives/2004/10/13/scrolling-drop-shadows/
[7]: http://slayeroffice.com/code/custom_checkbox/
[8]: http://joshuaink.com/blog/196/a-simple-guide-to-3-column-layouts
[9]: http://chimpen.com/fadomatic/index.html
[10]: http://novemberborn.net/javascript/event-cache
[11]: http://www.quirksmode.org/css/clearing.html
[12]: http://alex.netwindows.org/2005/03/in-defense-of-back-button.shtml
[simion]: http://simon.incutio.com/blogmarks/

[13]: http://ungreek.toolbot.com/?src=rubi&min_words=5&max_words=15&min_graf_len=2&max_graf_len=8&total_words=250&direction=forward
[14]: http://validweb.nl/artikelen/javascript/better-zebra-tables/
[15]: http://www.wats.ca/articles/keyboardusageandtabindex/62
[16]: http://experiments.mennovanslooten.nl/2005/FlexLayout/final.html
[17]: http://www.doxdesk.com/file/software/js/minmax.html
[18]: http://sparkcasting.com/assets/ajax/mta/
[19]: http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php
[20]: http://webdesign.maratz.com/lab/visited_links_styling/

The Hammer of CSS

Friday, April 22nd, 2005

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/

Desire Lines, or ‘Your users are trying to tell you something’.

Thursday, April 14th, 2005

[Desire Lines][1] is an excellent name to a phenomenon of [tactile user reaction][2]. [Peter Merholz][3] wrote about this years ago, and [Tanya][4] talks about this concept in relation to the physical world.

The whole idea is one of emergent design techniques based upon what your users are telling you. In the case of Berkely they listened, and said “No”. But the idea, and term, is a great one. ([via][viaURL])

[1]: http://www.pixelcharmer.com/fieldnotes/archives/process_designing/2005/000622.html#000622
[2]: http://www.peterme.com/archives/000073.html
[3]: http://www.peterme.com/
[4]: http://www.pixelcharmer.com/
[viaURL]: http://del.icio.us/