Skip to: Navigation | Content | Sidebar | Footer


Full Archives

Helping hands

July 29

In a 'Dailies' link two months back, I mentioned that US Peace Corps volunteer Scott Stadum was looking for a little design help. The response was great, and now he has bigger and better plans.

Scott originally wrote in asking for some leads. His plans involved a certain amount of web design, but he had neither the contacts or capacity to do that himself. Enter this site; a quick email and I was more than happy to expose the need and see what would happen.

The readers of this site make me proud. Response was overwhelming, and Scott's plans have snowballed as a result of the great work he received. Now he'd like to create an entire volunteer site to match projects with designers with time and the will to help out a good cause:

What I want to do is take this a step further. I want to build site that will link up average joe web and graphic designer, database guy and anyone else that can help with Peace Corps volunteers around the world. We do some partnering in Peace Corps but we don't tap the huge potential that exists with folks at home. We need to do this. It will help get more done in the tiny timeframe that we are here in country.

And of course I'm more than happy to link again. Web design on its own won't change the world, and anyone who thinks it can is probably taking themself too seriously. It's what you do with the sites you design that counts, and magnanimously donating time and effort to projects like Scott's is a great way to make a difference.

Permalink › | no comments

Dissidence

July 27

François Briatte has compiled a rather large-ish survey comparing 10 web sites selected from his daily reads. The findings are interesting from a statistical point of view, but more so because of the various dissidence from the perceived 'norm'.

After François emailed those of us he had surveyed, it was suggested that it might prove even more interesting to have us each explain our personal reasons for each of our own results. While some of the 25 questions asked feel a little arbitrary, and I could probably think of 25 more equally valid questions, the questions asked cover enough ground that it serves as a perfect starting point for this type of discussion.

So to each question a reason for differing if applicable, and general commentary if not.

Are links underlined? (80% do) (I do)

Though Nielsen recently embraced colours beyond blue for links, he still says they should be underlined. This is a generally sound principle; I still get frustrated trying to click on non-linked underlined text, so it's ingrained at this point. Underlining links is an easy usability win.

However, there are situations where underlines are problematic; in a text-dense page where every third word is a link, they only contribute to the clutter. Situations like these may call for a re-thinking of the way the information is being presented, but sometimes it makes more sense to turn off underlining. It all depends on the context.

Are hovered links underlined? (80% do) (I don't)

François is mistaken in my result on this particular point—I don't leave underlines on hovered links. Since I highlight the whole thing with a background color, leaving them on didn't make much sense or look too hot.

Though it doesn't make much sense to me to turn off the underline on hover in most cases, a change of some sort is a good thing to indicate the link is clickable. This is safely a stylistic matter, so it feels like one of the more arbitrary questions.

Do visited links differentiate? (80% do) (I do)
Common knowledge says that visited links should be visually different than "fresh" links. There are situations where this isn't applicable (web applications don't require them, and in some cases are even detrimental to the usability of the application) but for the regular, content- and document-based web, it's a must.
Is the layout in fixed width? (60% do) (I don't)

Interesting that the survey was done now, as I recently went from a fixed-width design to a liquid layout (and other sites surveyed did the opposite). 60% is close enough to half, so the opinion is still clearly divided.

One of these days I'll get around to writing the big "Defense of Fixed Width" article I've been meaning to do for ages.

Is there a search box on the page? (50% split) (I don't)
This is another must. Content-driven sites must have search, end of question. That I don't is inexcusable, and explained only by this: it's on the list of things to do. (But then, it's been on there for ages, so that's no indication of when it will materialize)
Is there a right sidebar? (70% do) (I do)

The left side of a page is a more important area (for Westerners anyway) since we read left to right. Left is seen as dominant, right as diminutive. The content of this site is placed front and center, the incidentals and etcetera are placed on the right.

Is there a left sidebar? (90% don't) (I don't)
It's not a three-column layout, so I don't have a need for a second sidebar.
Is there a top clickable logo? (100% do) (I do)
The clickable logo leading back to the home page is more or less expected these days. No reason to break the mold, although I realize this site's current design has a pretty sketchy definition of 'clickable area'.
Is there a repetitive footer? (100% do) (I do)
'Repetitive' seems to be an unqualified term; it appears the goal was simply establishing if footers were used in web design. Everyone has one, so there's not much more to take away from this question than a simple, "yes, they're used in web design."
Is the main text on white background? (80% do) (I do)

I recently changed from a blue background, so this is a matter of timing. A coloured background is far more compelling, but white is more practical.

Not only does black text on a white background offer maximum contrast, but working with imagery is easier in the long run. Placing images with transparency means dithering to a specific colour, and when the redesign occurs two months, six months, three years down the road, you're stuck with legacy images that you either retire or spend time and money converting to the new colour.

While it's possible to avoid the issue by using only boxy and framed images, it's usually a better strategy (though more boring) to stick to the white that 90% of the web uses already anyway.

Is the main text sans-serif? (90% do) (I do)

Sans-serif is easier to read on-screen. Serifs are subtle, high-resolution letterform hints that emphasize the difference between each letter for better legibility and faster reading. It's impossible to adequately express the subtlety in pixels, which makes on-screen serifs clunky and harder to read. Sans-serif is the only choice short of 24px body copy or 200dpi displays, neither of which I'm planning on designing for in the near future.

Is the DOCTYPE Strict? (60% do) (I do)
There are reasons for choosing HTML over XHTML, most of which are part of a pedantic debate that will inevitably flare up in the comments. (It always does.) The question, though, is regardless of which you choose, are you using the Strict or Transitional DOCTYPE? Since Strict further encourages the separation of structure and presentation (XHTML Transitional is loaded with presentational elements) I chose it.
Do they use accesskeys? (80% don't) (I don't)
I've already documented my reasons against using accesskeys. I've started to reconsider, not in light of the advantages they offer those they were meant for, but because I can potentially see them as a usability enhancement for everyone else. Which feels like the wrong reason to implement them, thus explaining why I haven't yet.
Do they use 'Steal these' buttons? (80% don't) (I don't)
Ugh. Please, no.
Is there a header graphic? (70% do) (I do)
It's a pretty obvious way of branding a site. Not to say it's the only way, as Jon Hicks has a well-distinguished visual identity but no header. It works for me.
Is the copyright explicit? (90% do) (I do)

I used to have a Creative Commons license on this site, but in dealing with Zen Garden theft I've come to the conclusion that Creative Commons still leaves too many holes open. These aren't merely 'he took my work, I wish he wouldn't' issues, these are liability issues that I believe too dangerous to be left unresolved.

So the license was changed to an 'All Rights Reserved' copyright notice. This isn't to say I'm a lawsuit-wielding, pissed off creative type who'll sue the pants off anyone so much as sampling my colour scheme; I've had many requests for sharing my work, and 95% of the time I happily allow it. But there's the crux—Creative Commons doesn't allow enough of the control I'd like to retain over who gets to use my work, or more importantly, who doesn't. So a restrictive copyright it is.

Is the designer's full name present? (80% do) (I do)
An interesting query, and one that gets overlooked too often. I like knowing who I'm reading. I hit 'about' pages almost as soon as I stumble across a new site. There are obviously valid concerns over snap judgements, which is why some people won't talk about themselves; but for every one visitor who turns away because of something they don't like about your profile, I'd wager five more turn away because they don't take an anonymous voice as seriously.
Is there a print style sheet? (60% do) (I do)
I get email when I make a change to the site that I don't account for in the print style sheet; the redesign, for example, added extra text needlessly to the first full printed page. Which goes to show that people print this site, which means a print style sheet is a must.
Does the navigation bar use image rollovers? (60% do) (I do)
I suppose this option was included because you can't resize image-based text. Well, I thought of that, which is why Proton has a 'large fonts' version that doubles the size of the header navigation text. Problem solved?
Is the page UTF-8 encoded? (60% do) (I do)
I wrote up my Unicode experiences almost a year ago. UTF-8 just makes it easier, provided every piece of software along the way that's going to be handling the data supports it.
Is the page XHTML? (70% do) (I do)
Again with the HTML/XHTML issue. Google "xhtml mime types" if you don't know what I'm talking about.
Is there a XML prolog? (100% don't) (I don't)
It's optional, but it throws IE6 into quirks mode. Therefore, we exclude it.
Are quotes educated? (80% do) (I do)

Using inch marks instead of curly quotes is the product of technological limitations. They're a hack. Now that we have the ability, curly quotes—“ ” etc.—are the way to go.

Not to say that's it's just that easy. If you enable John Gruber's SmartyPants in Movable Type, you must also un-do them for users who comment, quoting snippets of 'educated' text. Otherwise a mess of garbled Unicode will make you regret installing the plug-in.

WordPress handles the proper character encoding automatically, but other systems might not. Fixing them to do so requires a working knowledge of regular expressions, which also raises the bar significantly.

Is there a 404 page? (60% do) (I do)

Though I wouldn't call mine perfect, it does more than a stock "Error 404" page. My main problem until this afternoon was that it would bounce you to a special error page, overwrite whatever was in the address bar, and prevent you from re-trying a new URL without typing the whole thing all over again.

No more though! It's an easy fix, and I'm surprised I haven't done it sooner. In my .htaccess file, the line that previously went:

ErrorDocument 404 http://www.mezzoblue.com/errors/404/

Now goes:

ErrorDocument 404 /errors/404/

…and all is right in the world.

Is there more than 6 navigation elements? (90% don't) (I don't)

Though my continual IA re-thinking has me up to 6 at the moment, they aren't represented on the site yet. The lower, the better, or so the classic thinking goes. Don't present too much choice to the user. Any more than 7 items and you have an IA problem.

Except that the trend seems to be wondering aloud whether broad and shallow categories might be better. Amazon was long a model for having just too many items. eBay until recently was an overload of too much choice. Interestingly, I've noticed both are looking a little more restrained these days. I guess the debate continues.

There, wasn't that a lot more fun than talking about validation again? Thanks for the survey François, and more so for touching on a wide variety of practices. The questions bring to light some issues that we haven't been talking about enough.

Permalink › | 23 comments

Design Theft: Crossing the Line

July 26

Altering someone else's design material creates a new work; is this acceptable? How much does the original have to change for it to become acceptable? A visual look at the process provides more questions than answers.

Long-time readers of this site will perhaps be familiar with some of the design theft issues discussed in the past, and their outcomes and consequences. It's an issue I've had no choice but to keep a close watch on.

But the question of theft of design material is an interesting one, because most have different definitions of when a piece of work can be considered a rip-off. How much does it have to look like the original? How much has to be changed for it to be considered a new work? Is it even ethical to start with someone else's material and create your own work out of it? Even if the final result looks nothing like the source?

In an attempt to visualize the problem, I've put together this series of images. Starting with a relatively mundane photo of Vancouver's skyline, I've applied a layer of effects and modifications in each step to progressively create a completely different final image.

step 1 step 2 step 3 step 4 step 5 step 6 step 7 step 8

Assuming the photo I started with was copyrighted by someone else and I wasn't licensed to use it, at which step of the design process above does the work become 'legitimate'? Discuss.

Permalink › | 109 comments

Notes From All Over Part V

July 23

Thoughts on the Odeon debacle and developer workarounds for bad sites, Internet Explorer news, and a few random links to start the weekend.

There's not a lot you can say for a company that turns its back on a third of its customers on point of principle. It's understood that Odeon felt leery about allowing customers to submit personal data through an unaccountable third party; but look at the numbers. 31 percent of users to the site feel it's so bad that they refuse to use it.

Paying developer Matthew Sommerville a yearly salary to keep it running would have been a pittance compared to the business they just shut off. Starting with the numbers in this Wired article and assuming all users stop ordering Odeon tickets online (which is a stretch), that's roughly £600,000 per year. There are enough unknowns that this number is probably far too high, but even half that is high enough.


Wired picked up on it in the article referenced, and extrapolated a common theme: developers are sick of putting up with Other People's Messes. Witness the flap over Allmusic.com's redesign. They went from hideous URLs, browser-specific code, and broken functionality to.... something even worse.

Adrian Holovaty took to heart Jeff Veen's straightforward thinking on routing around the damage and wrote a Firefox extension that fixes some of the problems with Allmusic's redesign. Is this the start of a new trend?


Pre-publishing update: looks like Zeldman has summarized these in more detail and clarity this morning.


The Internet Explorer team has a new weblog. IE for XP's second service pack is available as a Release Candidate. Good to see signs of life; too bad the bar was raised so high while they were sleeping.

It's hard to make too much fuss about IE's limitations anymore though. After kicking and screaming over the long dormancy, I've come to accept that no matter what the IE team does now, it's not going to actually make much difference in my day to day life for many years yet.

IE gained its market dominance because it was bundled with Windows. The version 3 to version 6 upgrade path was relatively quick because computers were replaced frequently over the past 10 years as technology improved. Consumers and businesses aren't upgrading like they used to. Combine this with the fact that Longhorn isn't due out for two more years at best, and you have a very long period ahead where IE6 is the baseline, simply because too many older computers will continue running it.

I expect to continue supporting IE6 well into the next decade. This is what I had in mind when I wrote this prior article on the slowdown. Perhaps the frequent and critical security issues will cause a quicker migration than that; perhaps not.

Whatever the case, I've made peace with IE. High-capability browsers will receive extra layout attention and effects, IE will receive somewhat dumbed-down equivalents. Users will never know the difference, and ignoring the limitations is freeing. Armed with these two filters, CSS development with IE is a far less troublesome experience:


 html>body #selector {rule;}
 /* hides the rule from IE only */

 * html #selector {rule;}
 /* hides the rule from everything but IE */

This is the future.


And a grab bag of extra link love just before the weekend: ROI is not a silver bullet. Congratulations Jay. XML on the web has failed. HTML saves more bandwidth than XHTML.

Permalink › | 19 comments

Veer, Marketing

July 22

A pleasant little surprise showed up in my mailbox this afternoon: summer goodies from Veer, the creative materials provider. This is a company that knows its market.

Veer's catalogues have always been of a particularly high quality. Instead of a boring contact sheet with type and image samples, Veer puts its designers to work coming up with creative ways of displaying stock. You can see what a great job they do by browsing through the PDF back issues.

Veer's Very Big Summer Activity Book for Creatives

But they've really outdone themselves this time. July's catalogue is a 101 page booklet called the "Very Big Summer Activity Book for Creatives". It's a bunch of puzzles, crosswords, and general fun little activities all wrapped in the Veer brand. And of course every single photo, typeface, and illustration used within the booklet is available at Veer.com.

With this kind of clever advertising and the general high quality of their catalogue, it's no wonder I smile every time a piece from Veer shows up in the mail. It's worth buying a throw-away font or photo just to get on their mailing list.

(I'm not receiving a cent for saying this, in case there was doubt; I'm just a happy customer.)

Permalink › | 10 comments

Heading Order

July 19

What's up with heading order? Tomas Jogin wants to know. A "Web Standards Solutions" Q&A session if there ever was one.

Ironically using author Dan Cederholm's SimpleBits as a test case, Tomas points to the W3C Outliner version of the site and reasons that perhaps there's a more logical way.

And after seeing it visualized, Tomas seems to have a strong point. Without the outliner view though, in authoring mode it's hard to make these sorts of choices correctly. Best intentions don't always lead to proper choices, as evident by the case studies he links (including this site).

What's particularly frustrating is that the spec itself doesn't offer clear guidance on semantic issues like this; we are given overly simple usage guidelines, and actual implementation is left to author discretion. And that leads to confusion and individual interpretation of the specs by those who didn't write them. We'd be hot and fast on the case of a browser vendor who took liberties in implementing the specs; why should content authors be any less accountable?

Anyway, the issue at hand is headings and there are a myriad of possible opinions here. The outliner appears to offer a firmer guideline than the spec, from a W3C voice, so armed with this tool perhaps we can move the discussion out of the realm of personal preference, and toward something more precise. Commentary follows at Tomas' site.

Update: A few have written to also recommend the Document Outline Panel extension for Firefox.

Permalink › | no comments

Texture

July 14

Flat colour and gradients only go so far. It's nice to have alternatives for filling larger stretches of space within a design; I've been turning to texture more frequently. Here are some notes on that.

I'm a sucker for digitally-generated effects. I can trace that tendency back to a time when I was working with a company that had a pitifully weak stock library, and no funds to buy more. In a bind, I learned a bunch of Photoshop trickery for faking various effects and extending low-resolution digital camera photos for use in production work. It still shows in my work today, though I've made the conscious effort to branch out in recent years.

All this to say that when I think of adding texture, I turn to digital effects before I think of photography in many cases. Most of it is pretty basic Photoshop 101, but combining the right filters and hand-painting methods can result in some interesting and varied detail.

Texture Examples 1 through 16

Above is a sampling of a few different methods, with details about their creation below. All textures sit on a layer over top of the basic brown square, and were converted to greyscale (by hitting CTRL+U (Cmd+U) and adjusting the Saturation slider to the far left) then blended using the 'Overlay' blending mode. Hence, the equal tone consistent across the set.

  1. The original brown patch, nothing applied.
  2. A bit of noise (Filter -> Noise -> Add Noise) was applied (a small value, Gaussian, and monochromatic—it's easy to over-do noise, I generally play in the 1 - 10% range). Noise is a good way to get quick, random detail into an image. It's one of what I'd consider the two fundamental building blocks for computer-generated texture.
  3. The same square as #2, with blur added (Filter -> Blur -> Gaussian Blur). The various blur tools are great for intermediate steps during the creation process. Gaussian Blur is the most commonly useful, to the point where I used to have an action set up so hitting F5 would save me the three clicks through the menu to load up the filter.
  4. The same square as #3, with the Emboss filter added (Filter -> Stylize -> Emboss). Emboss is dangerous; without adjustment you can spot it from a mile away, but using it subtlely can introduce a bumpy, stippled texture.
  5. The same square as #2, but what has happened here is I've used the Marquee tool to select a roughly 10 pixel high bit at the top, and then hit CTRL+T (Cmd+T) to free transform the selection. Stretching random noise along one dimension produces a grainy pattern, which could potentially form the basis for hair or wood grain if I were to take it further.
  6. Starting again, this is square #1 with Clouds applied (Filter -> Render -> Clouds). 'Clouds' is the other of the two fundamental building blocks. Each application of it renders an entirely different set of clouds. On its own the filter is pretty easy to spot, but it serves as a great, randomized starting point.
  7. The same as square #6, with Difference Clouds applied. You'll find them in the same menu as Clouds. They apply over top of an existing patch of colour or texture, and use it to form a random difference pattern. Applying them a few times in a row is additive, which allows layers of clouds to be built up on top of the source; this example is the result of 20 or more applications. (Shortcut: once you've applied a filter once, hit CTRL+F [Cmd+F] to do it again.)
  8. The same as square #7, with the Craquelere filter applied. (Filters -> Texture -> Craquelere) Interestingly, with the exception of the Texturizer Filter, most of the options under the 'Texture' menu are pretty limited. I rarely go in there.
  9. Starting fresh again. This time, no filters were used—instead, I selected the paintbrush tool, a small brush size, and clicked it into Airbrush mode (prior versions of Photoshop had a separate tool; CS and [I believe] v7 combined them into one). I started with a white brush, switched into brown halfway and continued building up over top of the white, then switched back to white to finish. The end result can be anything you need it to be, but in this case it resulted in a layered, webby kind of texture.
  10. The same as square #9, with the Motion Blur and Unsharp Mask (Filter -> Sharpen -> Unsharp Mask) filters applied. The former is just a specialized blur that smudges in a certain direction, and the latter is almost the reverse of blur. Unsharp Mask is a global sharpening tool that is usually used as a final addition to a photo just before it's sent for printing or processed for the web; it's easy to misuse it, so it's almost always a last step. In this case, the blur was a bit too blurry, so some sharpening cleaned it up nicely.
  11. The same as square #10, with multiple filters applied. I'm not going to list them all here, but the first few were to modify the base texture and the last, the one responsible for the effect you're seeing, was Torn Edges (Filter -> Sketch -> Torn Edges). Though I'd hesitate to use this as texture in a final piece since it looks too filter-like, it could make for a killer mask.
  12. The same as #11, with more filters. In this case I built up a base layer with #11, then copied square #8 over top and applied further filters to it. Multiple layers of texture often result in a more realistic image, since very few textures in real life see a repeating pattern across an entire surface without variation. That last word is the key: variation. The more varied and detailed your texture, the more convincing it will look.
  13. And now we get to the photos for comparison. This is leather.
  14. This is rust.
  15. Sand.
  16. Wood.

Compared to the last row of photos, most of the other textures obviously have a ways to go for true photorealism. With enough time and effort it's possible to produce truly convincing results; but it's not always necessary. Sometimes a lack of detail is a good thing. Sometimes subtle detail that's only faintly perceptible is a good thing. There are no hard and fast rules in this, it's just a matter of figuring out what works.

Permalink › | 16 comments

Mobile CSS

July 13

My old cell phone plan expired some time last week, and after the indentured servitude of a rather lengthy contract (for the sake of free hardware some time in 2001), it was time to refresh the handset. New toy: a tiny little Audiovox 8900.

Being a diligent web guy, one of my first official acts with the new phone was to load up a few sites to see what it could do. The mobile web has so far passed me by; sure, my old Nokia was capable of loading up a text-only version of most any site in its cramped three-line display, but it was never fun. The odd time I'd load up the Zen Garden for the simple thrill of seeing a couple of characters of familiar text on my phone, but that's where the mobile web ended for me.

A quick digression first: this new phone is stylish. No matter what I discover about its quirks and glitches over the next few weeks, my first impression has been nothing but admiration and I expect that will stick. Everything about this model is polished and functional; the manual seems to be a waste of paper so far, it's that intuitive. Compared to Nokia's current ugly and quasi-skeletal lineup, it's no contest. Compared to my old Nokia (which I grew fond of over time) everything feels next generation, and then some. 3 years of progress resulted in a smaller profile with way more packed in.

Except for one little thing. The web capabilities stink. Okay, now I get blue underlined links instead of black ones; is that all 3 years buys me? The browser is a lot more integrated in this model since other (mostly useless) things like ringtone and game downloading rely on it. But even those pages are a stark black-on-white contrast to the animated colour imagery that forms the menu system of the phone itself. Something doesn't fit here, and it's the second-class citizen they're calling a browser.

Mobile web screenshot

Patrick Griffiths put together a nice little suite of mobile CSS tests to throw at various devices; I took a quick wander over ('quick' being a relative value, given the trouble typing backslashes by hitting the '1' key nine times) and checked to see what was happening. The result? Failure on all 8 tests. A bright red 'NOT' greeted each test result.

That the 'NOT' was red seemed interesting though; turns out Patrick sets all spans within the test to a default red via an embedded style sheet, and overrides them with the mobile test styles. Which means that the import methods were failing, but the embedded style (which also has no specific media type defined) was somewhat... not.

Extending Patrick's tests just a little, I've dropped an extra paragraph with some basic text formatting and a couple of box model rules into the bottom of this revised copy. It looks like I get color and background color, the odd box model property (I think I saw a margin), and that's about it. No borders, no floats, no alternate fonts. In short, CSS is a pipe dream on this phone.

I realize there are better browsers out there; Opera's mobile version seems to be gaining momentum, Nokia appears to be throwing money at Mozilla, and full-fledged PDA phones with built-in PocketPC or PalmOS capabilities obviously have some choice in browser. But it seems I'm locked into the lightweight that comes with this phone for now, and at least in Canada, this is one of the more capable phones available at the moment without getting into a ridiculous price range. Not a hugely positive sign.

Is the mobile web a reality? Maybe elsewhere. Though given the slow input of URLs, dozens of seconds between each incremental page load, and almost non-existent support of anything other than text, it seems there's a long way to go in Canada.

Oh well. At least it has a camera.

Permalink › | 28 comments

Book Review: Web Standards Solutions

July 11

If you've been following Dan Cederholm's SimpleQuiz series for any length of time, you'll be happy to note that his new book Web Standards Solutions is a full-length summary of the best practices that have evolved from it, and more.

Web Standards Solutions (WSS) is a quick, easy read. Broken into 16 chapters, each one takes no more than 15 or 20 minutes to breeze through. Broken into two parts, the first half of the book analyzes general markup and style best practices, while the second half takes these practices and others and applies them to a real site, simplebits.com.

Web Standards Solutions Cover

Dan is interested in the theory as well as the practics; while multiple solutions are presented, he provides the best one along with reasoning why it is the best, and why the others aren't. Not to say this is a scholarly exercise in pedantry; writing around some needlessly mind-numbing purist issues that weigh down real-world projects, he presents the tools needed to get the job done quickly and well. A common sense approach to designing with web standards, this little yellow book is the perfect complement to another little orange book. Think of the latter as the book that'll sell you the 'why', and the former as the book that will instruct you 'how'.

Chapter 9, for example, talks about minimizing markup, and it's the sort of perfectly clear explanation of avoiding classitis and making the most of miminal markup elements that everyone needs to read. Chapter 6 covers basic text formatting markup and style, and in one of the most lucid explanations on the subject I've yet read, explains once and for all why <strong> should be preferred over <b>.

This isn't a design book. WSS discusses the practical approach to using web standards in your work, and provides some visual examples, but the imagery and design skills necessary to create the examples are left for the reader to negotiate using their own experience or another book. Dan discusses how to apply design, not how to design in the first place. If you're only interested in visuals then WSS may not be for you; if you're interested in applying visuals to properly structured and well-built sites using methods that allow for maximum accessibility and save you time, then you need WSS.

Some of the chapters are thinner than others; I found chapter 4 on quotations to be particularly wanting. And the good writing and clarity contained within the covers is unfortunately misrepresented by the grammatically and technically suspect marketing copy on the back cover; I certainly wouldn't be buying it on the strength of that alone.

Luckily there are plenty of other reasons to buy WSS, and these are minor criticisms of an otherwise excellent guide to making the right decisions and understanding why you made them. 9 out of 10, which on my scale means you should have it on your desk, no questions asked.

Permalink › | 14 comments

PHP, CGI, and MT: Together at Last

July 8

A long-standing problem with Movable Type's templating system is that the Perl-based .cgi files it relies on don't allow for the use of PHP. That's changing though.

The lovely and talented Shaun Inman wrote up his method of using PHP includes to pull in CGI data back in January, which allowed him to pass a query string to the script using HTTP GET. Technical details are at Shaun's, go read and come back when you're done.

Using his thinking as a starting point, I spent some time a few weeks back tweaking to solve another Movable Type problem — the comment preview pages that are so often the neglected children of sites like, say, this one.

The problem is that I use PHP to include a standard set of header and footer files across the site; changing one of those files changes the entire site equally. Includes are a beautiful thing, but .cgi files won't allow you to run PHP. So the only solution I've had till now is to flatten a copy of my HTML, reduce it to the bare minimum, and drop the whole thing into my preview template. Which results in parts of the site falling further and further out of synch with the rest as things change.

Out of the box, Movable Type jumps all comment previews and new comment posts to a file called mt-comment.cgi after you hit the submit button, which does the parsing and filtering and spits out a result based on whichever template you have told Movable Type to use. (There are a few possible templates here including those for Comment Preview, Comment Listing, Comment Error, and new in MT3, Comment Pending. Defining a non-default template for each of these is important and I haven't yet spent the time figuring out how to apply this to Error or Pending.)

Comment Preview is the one we're trying to hook into. Instead of relying on the .cgi file to render the whole page, instead what I've done is strip the template to a bare minimum, and hijack the Individual Entry Archive to point to a different PHP file that includes it.

Chart showing the before and after comment submission processes.

So that's the summary, but it's difficult to make sense of that without the examples. First step, having the Individual Entry Archive and Comment Preview pages point to the new PHP file instead of mt-comments.cgi. Look for the line that goes like this:

<form method="post" 
 action="<$MTCGIPath$><$MTCommentScript$>"
 name="comments_form">

And change it to this (replacing the /path/to/preview.php with the path to the .php file on your own server, of course):

<form method="post" 
 action="/path/to/preview.php"
 name="comments_form">

Do that with both templates. Next step is to build the actual PHP file that does the heavy lifting. Since your site will require custom includes and a completely different wrapper than my own, there's no point in listing the whole file. Instead, here's the code you'll need. Drop this first bit in the page header, before anything else happens. (Thanks to Dan Benjamin for help with the Post to Get conversion. All insanely genius type code is his; all mucking-around-without-a-clue type code is mine.)

<?php

function makeGetRequest( $str ) {
 $result = str_replace(':','%3A',$str);
 $result = str_replace('/','%2F',$result);
 $result = str_replace('@','%40',$result);
 return $result;
}

if ($_POST['post']) {
 $variables = 'entry_id=' . $_POST['entry_id'] . '&static=' . $_POST['static'];
 $variables .= '&author=' . urlencode($_POST['author']) . '&email=' . $_POST['email'];
 $variables .= '&url=' . $_POST['url'] . '&text=' . urlencode(stripslashes($_POST['text']));
 $variables .= '&post=post' . '&bakecookie=' . $_POST['bakecookie'];
	
 makeGetRequest($variables);
 readfile("http://www.example.com/path/to/mt-comments.cgi?$variables");

 exit;
}

Drop this second bit later in the page, where you'd normally place the preview text and the comment form.

<?php

if ($_POST) {
 $variables = 'entry_id=' . $_POST['entry_id'] . '&static=' . $_POST['static'];
 $variables .= '&author=' . urlencode($_POST['author']) . '&email=' . $_POST['email'];
 $variables .= '&url=' . $_POST['url'] . '&text=' . urlencode(stripslashes($_POST['text']));
 $variables .= '&preview=Preview+Comment' . '&bakecookie=' . $_POST['bakecookie'];
	
 makeGetRequest($variables);
 readfile("http://www.example.com/path/to/mt-comments.cgi?$variables");
} else {
 echo "
  <p>This is the comment preview form. You’re seeing this message because either something went wrong, or you’ve typed in the URL, or you clicked a link that shouldn’t have been pointing here in the first place.</p>
  <p>Whatever the case, there should be a form here, but there isn’t because of the above reasons. So if you were expecting a comment preview form, <a href=\"/contact/\">let me know that you got this instead</a>. Otherwise, hit the back button and try again. Thanks!</p>
  <hr />
  <p>For the sake of debugging and possibly retrieving your comment, this is the data that was posted to this page:</p>
  "; echo $_POST;
}
?>

The message in the second half is just a bit of defensive design to let the user know there's a problem if somehow they wind up on the preview page without going through the proper channel. Just in case something goes wrong, I'm dumping the post data as well to allow retrieval, though I can't foresee much chance of it ever being displayed. Never hurts to be helpful though.

At this point, it should work—but the comment preview page will look a little off. You need to strip everything but the essentials if you're going to be including the rest of your site structure. This will usually mean taking out everything from the HTML <html> start tag to where the comment preview form begins, and everything after to the </html>. For what it's worth, my revised, light preview template:

<div class="reply">
 <p class="postedBy"><$MTCommentPreviewAuthorLink show_email="0"$> says:</p>
 <div class="reply-body">
  <$MTCommentPreviewBody$></p>

 </div>
 <p class="posttimestamp">Posted on <$MTCommentPreviewDate$> §</p>
</div>

<hr class="divider" />

<div class="comments-body">
<h2 class="dom">Edit / Post Your Comment:</h2>
 
<form method="post" action="/path/to/preview.php" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<div id="replyForm">
 <input type="hidden" id="entry_id" name="entry_id" value="<$MTEntryID$>" />
 <input type="hidden" name="static" value="1" />

 <span><label for="author">Name:</label><input type="text" id="author" name="author" value="<$MTCommentPreviewAuthor encode_html="1"$>" /></span>
 <span><label for="email">Email Address:</label><input type="text" id="email" name="email" value="<$MTCommentPreviewEmail encode_html="1"$>" /></span>
 <span><label for="url">URL:</label><input type="text" id="url" name="url" value="<$MTCommentPreviewURL encode_html="1"$>" /></span>
 <span><label for="text">Comments:</label><textarea id="text" name="text" rows="13" cols="55"><$MTCommentPreviewBody convert_breaks="0" encode_html="1" $></textarea></span>
 <span class="submit">
  <input type="submit" id="preview" name="preview" value="Preview Again" />
  <input type="submit" id="post" name="post" value="Post" /> 
 </span>
</form>
</div>

<hr class="divider" />

<h2 class="dom">Previous Comments</h2>

<MTComments>
<div class="reply">
 <span class="replynumber"><a href="#c<$MTCommentID pad="3"$>"><$MTCommentOrderNumber$></a></span>
 <p class="postedBy"><$MTCommentAuthorLink show_email="0"$> says:</p>
 <div class="reply-body">
  <MTMacroApply><$MTCommentBody regex="1" smarty_pants="2"$></MTMacroApply>
 </div>
 <p class="posttimestamp">Posted on <$MTCommentDate$> <a href="#c<$MTCommentID pad="3"$>">§</a></p>
</div>
</MTComments>

</div>

It's not perfect. The conversion dropped out a few of the custom filters I relied on to get rid of things like SmartyPants-generated “smart quotes”, and things are messy when Unicode characters are pasted. But it's been running for almost a month now and I haven't received any nasty emails about comment loss, so the basic functionality is there.

As always, share and enjoy.

Addendum: Under some circumstances, every new comment starts being automatically blocked. It appears MT has some form of automatic IP banning. The comment form posts new comments from the IP of the site its running on, instead of the user's IP, so all it takes is one instance to trigger the banning, and all new comments are denied.

Quick fix—in your weblog's configuration, hit 'IP Banning' and delete the entry for your site. (If you don't know what it is, you may have to delete them all). Long term fix—still looking for one.

Permalink › | 30 comments

Notes on OFFF

July 7

Some reflections on the festival, the people, and the country I've spent my last week enjoying.

OFFF is an interactive festival, exhibit, and about as close to a design industry trade show as you're going to find. 2004 was its fourth year, and the first in Valencia (the prior years have run in Barcelona from what I hear).

The interesting thing about OFFF is that it brings together a bunch of people that could be labelled as 'digital artists', but doesn't discriminate about each specialty. There were video and audio people, web people, a lot of Flash people, and the kind of artistes that do work in any media they can get away with and do it well enough to make you weep a river of green tears.

Notably, the catchline for OFFF 2004 was: "I am not a digital artist, I am a _______". It was up to each individual to fill in the blanks. When interviewed I think I produced the blandest of possible answers ("user interface something-or-other") but the point was more to showcase the diversity of the field, and bring together the different specialties and celebrate the differences.

What kept occuring to me was that I was a representative of only one small piece of the overall pie; the context of the festival was largely web design, and the people who attended were undoubtedly supremely talented. The web is a large place though, and you and I and everyone else liable to read this represent the smallest of small fractions of those who use it, create it, and live it. There are other people doing it who don't see things the same way as you or I.

For example: I was one of the few presenters who used a Mac, and every PC there seemed to be using Internet Explorer exclusively. The audience at SXSW was, by contrast, about 85% Mac. I don't think I saw a single browser by the Mozilla organization gracing any screen other than my own. There was no wireless; internet access for the conference was handled by a set of PCs in a 'wired room' which all ran IE.

Some of this is just cultural difference. Spain is a country lax on software licensing, I heard from some individuals. The pirated CDs and movies for sale in the open on the streets of the tourist areas seemed to confirm this. (DVDs of the movies playing in theaters were for sale right outside the theater, in some cases.) Why this supports a monoculture when so much great open source software is legitimately available, I don't know; perhaps there's a correlation if awareness of the alternatives is lower.

Macs are undeniably expensive outside of the US, and Mac prices are all wrapped up in hardware which, at last check, you couldn't duplicate digitally. Ask me some time how many Canadian dollars I've invested in Apple so far in my less-than-a-year of conversion. And wireless is popular in the US and growing in Canada, but it's still an emerging technology elsewhere. I'm glad I brought my ethernet cable (and even more glad that the conference had some North American to European power cables that allowed me to actually plug in; the 34% on my battery when I arrived wasn't going to last through the presentation.)

But when it comes down to it, a lot of the non-technology-oriented mindset results from the technology and tools used to build the final product being seen as incidental to many people. Flash is popular amongst designers because cross-browser issues are non-existent. It has an authoring environment that allows for intuitive, true WYSIWYG design. CSS has no equivalent for either of these. 'Markup' and 'coding' are concepts that get in the way of a designer's ability to design.

Though more of the world is buying into standards-based design, it's becoming more apparent that standards are moving to the background as a tool and a way of getting things done, and more attention is being focused on the work itself. This is a good change, but there's still a vast difference between understanding the benefits of standards, and using them in your work. The reality is that proper browser support requires hacks and clever workarounds, and these are the sort of things that seem like mystical voodoo to those who just want to get the job done.

I have no conclusions, only anecdotes. I was exposed to a different way of thinking this past week that represents how a large portion of those creating for the web view what they do. It's easy to forget they exist, but they'll be the majority for a time yet. Perhaps there needs to be more focus by those people on the technology itself, but perhaps there needs to be more focus on the actual work by those of us who get it.

The recent standards backlash has been a healthy wake up call. Perhaps now would be a good time to quit obsessing over the latest validation war and start talking about the final product a little more.

Permalink › | 18 comments

OFFF

July 1

If you're in or around Valencia, Spain over the next few days, stop by the OFFF festival and hear me speak.

I held off on mentioning this here until I absolutely knew for certain. As far down to the wire as you can get, I woke up the morning of the flight and finally had confirmation once and for all that yes, indeed, the trip was on. I'm in a time zone 9 hours ahead of my usual right now typing this, so I am here and will be on stage on Saturday.

It's sort of a flash festival, sort of a media festival, sort of a web festival. It's like the three branches of SXSW compressed into one. Looking through the list of fellow speakers is inspiring and humbling, as some of the greats of the design world are going to be here. If you have a chance, do come check it out.

And unrelated, but lest it pass uncommemorated, a happy one year anniversary to us.

Permalink › | no comments