Five years

I’ve been living in London for five years today. I’ve had five homes and four jobs in that time. I’d look back and reflect, but I’m too busy. That may be a good thing or a bad thing.

XHTML modifications for Dreamweaver

I’ve gone and implemented all Dreamweaver updates for XHTML and Unicode character entities. Anyone wishing to do the same and want to save themselves some work can download all changed files here. You need Dreamweaver 4. Also included is a clip library with numeric character entities for use with Textpad. Update 10/4/02: More detailed instructions, and some additional files that have been modified, detailed below. The files in the ZIP are now also organised in the correct directory structure.

Thanks to:

• A List Apart: Modifying Dreamweaver to Produce Valid XHTML (This article also provides detailed instructions)
• A List Apart: The Trouble With EM 'n EN
• evolt.org: A Simple Character Entity Chart

Here’s what you need to do:

1. Find your Dreamweaver configuration folder (typically C:\Program Files\Macromedia\Dreamweaver 3\Configuration), and back it up (e.g. make a zipfile of it.). You’ll only be altering a few files, but it’s much less hassle to just back up the whole thing.
2. Launch Dreamweaver, and make the following changes to the preferences:
   • lowercase tags (HTML Format)
   • save files as .html (General)
3. Install Configuration: Templates: Default.html: Updated 10/4/02
   • Default Doctype to XHTML
   • Remove body formatting handled by CSS, add link to CSS and alternate CSS, declare character set, add standard meta tags
4. Install Configuration: Objects: Common
   • Image.js, HR.htm
   • Line Break.htm Update: on some versions of Dreamweaver, e.g. the Mac, Line Break.htm is located under Objects: Characters, or possibly both Characters and Common. Make sure all existing instances is replaced by this one. It also appears that the Shift-Return keyboard shortcut in Design View on the Mac outputs <br> despite this update. No fix yet.
5. Install Configuration: Objects: Forms
   • Checkbox.htm, File Field.htm, Hidden Field.htm, Button.htm, Radio.htm, Text Field.htm, Image Field.js
6. Install Configuration: Objects: Characters
   • Change: Left Quote.htm, Right Quote.htm, Em-Dash.htm, Trademark.htm New
   • Add: Left Single Quote.htm, Right Single Quote.htm, En-Dash.htm (and GIFs for the Object palette)
7. Install Configuration: Objects: Head
   • Meta.js, Description.js New, Keywords.js New, Base.js New, Link.js New, Refresh.js New
8. Install Configuration: Commands
   • InsertEnt.htm, Rollover.js
9. Edit Configuration: Menus: Menus.xml Updated 10/4/02(Note: I do not recommend replacing your menus.xml with mine. Make the changes manually, using this text file or my menus.xml as reference.)
   • Create shortcuts for Left Quote ( Cmd+Shift+Q), Right Quote ( Cmd+Alt+Q), Em Dash ( Cmd+Alt+Shift+M)
   • Add, and create shortcuts for, Left Single Quote ( Cmd+Shift+W), Right Single Quote ( Cmd+Alt+W), En Dash ( Cmd+Alt+Shift+N)
   • Remove “show head elements” shortcut (Cmd+Shift+W)
   • Change B and I to ' strong' and ' EM' (find it by searching for Cmd+B, and use those cases)
10. Edit Configuration: Sourceformat.txt New (Note: again I do not recommend replacing your Sourceformat.txt with mine. Make the changes manually, using my file as reference. The <?attributes> section is at the end of the file.)
    • JavaScript attributes (e.g. “onAbort”) changed to lower case, which may be harder to read, but is valid XHTML.
11. Also provided: “HTML Characters Extended” clip library for Textpad, containing the entities
    • – en dash
    • — em dash
    • ‘ left single quotation mark
    • ’ right single quotation mark
    • ‘WRAP single quotation marks’
    • ‚ single low-9 quotation mark
    • ‘WRAP single high-low quotation marks‚
    • “ left double quotation mark
    • ” right double quotation mark
    • “WRAP double quotation marks”
    • „ double low-9 quotation mark
    • “WRAP double high-low quotation marks„
    • … horizontal ellipsis
    • • bullet
    • † dagger
    • ‡ double dagger
    • × multiplication sign
    • ÷ division sign
    • § section sign (SS)
    • ¶ pilcrow sign (paragraph)
    • ¹ superscript 1
    • ² superscript 2
    • ³ superscript 3
    • ¼ vulgar fraction one quarter
    • ½ vulgar fraction one half
    • ¾ vulgar fraction three quarters
    • ‹ single left-pointing angle quotation mark
    • › single right-pointing angle quotation mark
    • ‹WRAP angle quotation marks›
    • € euro sign
    • ˆ modifier letter circumflex accent
    • ˜ small tilde
    •   en space
    •   em space
    •   thin space
    • ­ soft hyphen

Here are the downloads:

• All changed Dreamweaver files (The folder structure reflect the configuration subfolders they belong in.) Updated 10/4/02
• Textpad add-on
• Text file showing my new Dreamweaver keyboard shortcuts (for both Dreamweaver 3 and 4) Updated 10/4/02

These come without any warranty whatsoever. Use at your own risk.

Mac on Win98

No, I'm not running a Mac emulator. That's a VNC window looking at a G4 sitting in another room, via the company network. The G4 is running the 300kb VNC server, and I'm viewing it, and controlling it, using the 170kb VNCviewer application. It's as fast as if I were sitting at the Mac. Cross-platform website testing without leaving my seat. (Now, if only we had VirtualPC on that G4...)

Avoid italics

On the CHI-WEB list the other day, someone asked for arguments against using italics on web applications. A colleague was claiming that italics have been proved more legible than normal text.

I weighed in with the following:

Because text in italics is not easy to read on screen, it is better to avoid having long sections of italicized text. Therefore, as quotations can be quite long, don’t put them in italics.

The Web Content Style Guide, Gerry McGovern, Rob Norton and Catherine O’Dowd, Financial Times / Prentice Hall 2002, p.185

I’m not familiar with the assertion your friend refers to. If someone has claimed that italics are more readable than normal text, this almost certainly referred to print, not screen typography. But I find it extremely dubious as a blanket rule.

Other CHI-WEBbers confirmed this unequivocally, citing a wealth of sources.

The irony? This site uses italics for block quotations. It’ll probably stay that way for a while until I get round to updating my stylesheets again, but I’ll be removing the italics.

It’s a pity. In print, italics can be a beautiful part of expressive typographic language. In my head I was designing for print, and old dogma made me blind to what was in front of me on the screen.

When ultra-high resolution displays arrive, I’ll be happy to welcome italics back in from the cold.

Online cross-platform testing

So cross-platform testing is the bane of all webdesigners’ lives. I was just musing while reading this indispensable article, which advises, regarding browser support for character entities:

“To be sure a particular browser supports the entities (both named and numeric), simply open your browser to this pages and view the charts. If the character you want doesn’t appear in the target browser, it doesn’t work (simple, huh?).”

Pretend-it’s-magic time: Wouldn’t it be great if someone was to set up a website that’ll provide snapshots of a given URL on any browser on any platform?

Picture this: Using an online form, you enter your URL. Then you specify platform (PC, Mac, Unix, WebTV, PDA, etc.), browser, browser version and desired window size. Submit, and after a short wait, the site serves you a PNG snapshot.

Lynxview gives an idea of what I'm on about, but for something like this you don't want an in-browser approximation. You want a genuine pixel-perfect snapshot of a native application.

Setting something like this up would be a formidable task. Firstly, it would depend on running multiple virtual machines on the server, each clean-installed with the appropriate OS and browser. This thorough tutorial describes the general idea, using a Mac running PC virtual machines. VMWare on a PC would give you Windows and Linux; I don’t know whether you could run MacOS on VMWare. There are Mac emulators available, though. There are also WebTV emulators and Palm and other PDA emulators. (A true virtual machine—one that emulates the hardware platform—would always be preferable to an emulator—which only emulates an OS—though. Old browsers can be got from the evolt browser archive, amongst other places.

All these virtual machines, and the programs running on them, would need to be scriptable by the host machine. Simultaneous requests be many users should be possible, treated as separate processes. Difficult? Impossible? I’m afraid I wouldn’t know.

This adds up to an enormous number of possible browser/platform combinations, but a project like this could be built iteratively, starting with the most common configurations.

Needless to say, the host machine would have to be extremely powerful, and if more than a handful of users are to use it simultaneously, a small server farm will probably make more sense.

But I’m sure I speak for all web designers if I say I’d happily pay for a service like this. Heck, my company would pay for it. Any web design company would.

Of course, once standards-compliant web browsers are the norm, all this would be obsolete. But I'd give it, oh, at least another 2 years.

Anybody think there's a chance of someone doing this? Anyone want to give it a try? This idea is so obvious, I'm sure I'm not the first to suggest it. What are the main problems?

More crayons—and a lesson in HTML

People may be wondering what happened to the 216-colour “web-safe” palette. Besides increasing irrelevance in the face of improving technology, some have also pointed out that it is less than infallible.

So let's assume that the lowest common denominator is no longer 8-bit colour (256 colours), but 16-bit (still more than half of all users). We still need to ensure that colours display consistently across all 16-bit and 24-bit monitors. Enter the 4096-colour “web-smart” palette:

…a 16-by-16-by-16 cube of 4096 colors. The web-smart palette uses any combination of 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, aa, bb, cc, dd, and ff, and provides a more complete gamut that should display consistently on monitors that support thousands (16-bit color) and millions (24-bit color) of colors. Most of the colors dither to the nearest browser-safe color on 256-color monitors.

The main purpose of this site is to provide a resource for web designers and developers to test this expanded palette. The web-smart palette pages show different demonstrations of the palette. If you adjust the bit depth of your monitor, you can evaluate how the colors display at different resolutions.

The site does a great job of providing the means to preview and select colours from the palette.

But even if you're not interested in the colour issue, do pay a visit. The site's not only impeccably researched and clearly written, but it's a case study in scrupulous and thorough HTML practice:

1. Validating XHTML and CSS


2. Entirely laid out using CSS, tables used for tabular data only*


3. Structural markup throughout – tables with THEAD, TBODY, COLGROUP tags, SUMMARY and SCOPE attributes; forms with FIELDSETs, LABELs, OPTGROUPs, etc.; CITEs, definition lists, etc.


4. Proper ISO10646 smart quotes – “ and ” instead of " (inch-marks)

*1 demerit for using fixed instead of relative font units.

Humbling and thrilling

Saw Godspeed You Black Emperor! last night.

So I've never seen Floyd in the UFO c.'67, the Velvet Underground in Max's Kansas City, etc., etc. But at least I'll always be able to say I saw Godspeed in top form at London's Ocean in 2002.

Steenbeckett

Last weekend I saw Atom Egoyan's Steenbeckett installation. It's partially a nostalgic homage to analogue filmmaking, using the legendary Steenbeck editing table. He comments that these days, with the ease of editing on Avid, or shooting entirely on digital, the director tends to make fewer decisions in preparation and while filming, and thus "overshoots". This has the result that the editor is swamped under the sheer volume of material. Meaning that the film-making responsibility is making a marked shift towards the editor.

This reminded me of something I've noticed before about reading and writing in the internet era: we are becoming editors. It used to be, when schoolchildren or students were given a research project, most of them had access to the same source material in one or two libraries, or half the effort went into finding sources in the first place. Questioning those sources was rare. Now, the Net provides you with a flood of information, of varying legitimacy. With this, the researcher (or reader) has to assume a far more critical – editorial – approach, making sense of a multitude of often contradictory information sources. And that's a Good Thing.

In fact, all websites that contain links to other sites are contributing to a vast independent editing effort, as our links effectively count as "votes" for interesting sources of information.

Egoyan's installation was also commenting on the decline of the physical manifestation of and interaction with film, as is also happening in other media like print and music. This often makes me sad too, but changes like these occur in human history all the time, and should not be seen as some kind of decline.

Dreams illustrated

The Net's a great place for sharing dreams. Comics of dreams I find especially fascinating. Bringing the two together, here's Slow Wave,

a collective dream diary authored by different people from around the world, and drawn as a comic strip by Jesse Reklaw. A new strip is uploaded every week on the first minute of Saturday in San Francisco.

my blog got me fired.

my blog got me fired. No, not me. Just a meme currently doing the rounds (again). Probably worth taking as an addendum to this article.

No relation

Someone asked me recently why I have a website. Here's why: http://mzone.mweb.co.za/residents/fpj/fpj.html. Update 15/4: The joke’s on me. This person’s site had sunk to the the second page of Google search results for my name, but this entry promoted it to no.2. I’ve deactivated the link; hopefully it’ll sink back into obscurity in another couple of months. Lesson learned.

Blog gardening

Tweaked these pages a bit. The stylesheet's been given a minor facelift, and there's now also an alternative stylesheet with relative size units -- the text can be resized through the browser. I was trying to change the default styles to relative units, but gave up when I couldn't find a way to overcome the huge discrepancy between the sizes on PCs and Macs. (Basically, fonts would either be too big on the PC or too small on the Mac at the browsers' default settings.) The style sheet switcher is from Alistapart, but it won't work on 4.x browsers (Damn, just noticed while getting the URL that there's a newer script I could've used.) I've tried to improve the layout styles -- I realise most people have been seeing horizontal scrollbars on these pages now for weeks, but they're not without problems yet. I'll have to swallow my pride and consult css-discuss. Templates are also finally provided for archives and individual entries. Please let me know of any display problems.

I wish I had more time to get to know Moveable Type better; I still have many questions...

Online typeface identifier: Identifont

Earlier today I needed to identify a particular cursive font in order to update a heading on an old website. The prospect of a trial and error search across the company network for a font that may or may not be there made me turn to Google. I wasn't expecting much, since I've never had much success with David A. Mundie's venerable "A Field Guide to the Faces".

Top result for "typeface identifier" was Identifont, which I hadn't come across before. 2 minutes later, I had my font -- Shelly Allegro -- and I was extremely impressed.

It uses the same heuristic approach as Mundie's guide, as I expected, but as my headline comprised only about 30 letters, that wasn't much help. But Identifont can also "Identify from a logo",

Choose this option if you want to identify a typeface from a restricted set of letters, such as in a logo or heading. You will only be asked questions that can be answered from the letters you specified.

Typeface specimens are of excellent quality. As a final bonus, all typefaces have extensive cross-referenced metadata, including descriptions, designer, publishers and publication date. (Did you know the Shelley family was designed by Matthew Carter, whose Verdana you are reading now? I didn't.) All fonts are linked to vendors selling that font.

But on top of excellent results, a huge up-to-date database and interesting metadata, the site impressed me with its beautifully simple interface that was obvious from the first step. Quite simply, I can't imagine it being improved. The web at its best.

Usability is not customer experience

This may well be the last word, in my opinion, on the subject:

Evan reviews Spolsky's UI book, quoting [quoting Spolsky, that is]

"Usability is not everything. If usability engineers designed a nightclub,
it would be clean, quiet, brightly lit, with lots of places to sit down,
plenty of bartenders, menus written in 18-point sans-serif, and easy-to-find
bathrooms. But nobody would be there. They would all be down the street at
Coyote Ugly pouring beer on each other."

No arguments there, but there's a difference between usability and customer
experience (as Mark Hurst has been going on about for years): customer
experience delivers what the customer wants, usability makes it easy to use.
Customers don't want a clean, well-lit nightclub, they want dirty, dark
bachanalia, so give it to them. Othertimes usability and customer experience
are the same thing. But customer experience comes before usability.

Zimran in the 3/4/02 winterspeak newsletter.

It may be time to start worrying about Googlebombing

Here's ample illustration, and also some occasionally astute discussion on the subject:
- MetaTalk: critical IP (This is the best thread of the bunch)
- MetaTalk: moron spammer
- MetaFilter: KPMG
- MetaTalk: Posts and personal profiles on MeFi

I spotted the CriticalIP (I'm deliberately not linking to it here) link on someone's blog the other day with the slogan "because there's no justice like angry mob justice!" Obviously the writer is being funny, but let us not forget that angry mob justice is a Bad Thing.

Of course, this Bad Thing is a mere knife-edge away from several Good Things about the internet: individuals having the means to get their voices heard, and how it is people's opinions -- and as a result, blogging -- that help make Google such a good search engine.

I hope Google has some time amidst all their new feature development to look into this problem. (Not that I have any suggestions.)

I tried to be paranoid, and imagine how a Googlebomb could be automated, but concluded it couldn't be done. This is a human, community issue.

> get off my search engine, you bunch of irresponsible thrill-seeking
> saboteurs! doesn't the web contain enough noise already?

Tom Stuart via the TBTF-irregulars list.

Site redesign: 37signals

Still the web design company whose philosophy I most agree with. And I like their work, too.

The future of digital music

OK, we've all read tons of articles on this issue, but here's a nice pithy point of view that I can't help but agree with.

The Matt Haughey and Steve Albini links are also worth checking out. (The latter, indispensable.)

For some background reading on this topic (copyright, intellectual property, the RIAA, artists' rights), try Negativland (a band). You can also find the hilarious (and eye-opening) interview with U2's The Edge here (U2's record company sued Negativland for using a sample from a U2 record). If you've ever thought being a "supergroup" meant having some kind of power, this should make you think again.

Customising IE

While it may not be the world's best browser, like many people I use IE6 every day. Today I took some time to improve its toolbars a little. Most MS apps are over-encrusted with useless icons, while hiding some very useful ones. With a bit of effort their toolbars can become quite functional.

Firstly, I finally installed the Google toolbar. I resisted doing this for a long time as I didn't want to lose a whole line of screen real estate, so I kept the Google bookmarklet in the Links bar instead. But there's no denying the usefulness of the toolbar, and today I realised I could squeeze it in on the first line if I drop some unneeded icons and captions.

Icons to go included Print, Search, and Favourites, the latter two being trumped by Google and Powermarks respectively. I added the Text Size button, as I use this more frequently these days and the shortcut on the mousewheel is somewhat lacking in feedback. The last button, by the way, is "Edit in Textpad" -- indispensable, if you haven't tied that button to a decent text editor yet. (Assuming you're a web designer.) The Media button is new to IE6, I figured I'll keep it around for a bit and see if I use it.

So here's what I ended up with, at an 800x600 window size:

Note that after you've spent some time finetuning the positioning of the various toolbars, lock them in place so you don't accidentally move them later. This option is under the View menu, but appears to be IE6 only.

The Links bar is an ideal place for frequently-used bookmarklets.

I'm still undecided about the utility of the Google "advanced features", but I'm trialling them for now. Unfortunately there's no option yet to add the Google Compute button; I assume that's for invitation-only beta-testers.

Distributed computing from Google

Google Compute: another unprecedented (and apparently altruistic) move from Google. Given the ubiquity of Google, and the Google toolbar, this may be the beginning of a milestone for distributed computing.