Leibovitz Phones It In

Over the years, I've built hundreds of websites. However, I sometimes worry that what I've really done is build one website hundreds of times. Such is the nature of any recurring creative endeavor, especially when working for a client. There's a continual struggle between trying to keep things fresh while keeping the customer's wants and needs at the forefront. There's also a tendency to fall back on the approaches and layouts that have worked in the past (not an altogether bad thing, of course, assuming that they'll continue to work into the reasonable future).

Which brings me to the current hoohaw around Annie Leibovitz's photograph of Miley Cyrus* for Vanity Fair. If you've just emerged from a cave after years of seclusion, you still know what I'm referring to, and it's not my intention to hash out the details of something to which millions of words have already been applied. There's no lack of culpable parties to which blame can be easily assigned (although I'll say that the one party who shouldn't be blamed is, oddly enough, Vanity Fair, any more than one blames a rattlesnake for biting the foot of someone who steps on it. That's what rattlesnakes do, and everyone knows it. Vanity Fair also has a natural and reliable role in lowering the bar for public decency and decorum).

What I want to focus on instead is Leibovitz's unimaginative photographic work that resulted in the Lolita-ization of a fifteen-year-old girl. The photographer claims that her work was "misinterpreted" but no one is buying that. You don't become that skilled at celebrity portraiture without knowing precisely the reaction the shot will engender in its viewers.

But, in the end, regardless of the moral or ethical implications of the photos in question, what Leibovitz did was clichéd and smacks of someone trying to collect a paycheck as quickly as possible. What was she thinking? "Oh, here's a cute and perky girl whose reputation is wholesome and charming. What kind of picture should I take? Oh, I know...let's make her pouty and sullen and have her throw a knowing look over a bare shoulder. That's never been done!"

Leibovitz may have been working an agenda at the same time, but that doesn't make the result any less disappointing from a creative perspective, especially for an artist whose prior claim to fame was the ability to capture the true personality of her subjects in a photograph. Miley Cyrus deserved better than that, and Annie Leibovitz can do better than that.

*I know...two posts that include mentions to Miley Cyrus in one day. But look at it this way: that averages out to one reference every two years.

Wired about "Bent Objects"

I have to confess that it's been a long time since I've seen anything as clever as Bent Objects. Do not visit this site unless you're prepared to commit some significant scrolling time. You've been warned.

Hat tip to Opining Online, which has also done us the immense favor of adding the Gazette to its blogroll.

Font of the Month

MyFonts.com is showcasing a picture font called SubiktoTwo™. Picture fonts are just what the name implies: images or icons converted into fonts so that they can be inserted into text at various sizes and colors without extensive retouching. In the case of SubiktoTwo, the pictures are of flowers and plants:

In this example, the characters spell "Fire Ant." (But, of course, you knew that.)

It's particularly easy to generate larger images without dealing with pixelation, so picture fonts are useful in graphic design projects. The background image of this post is the character associated with the letter "G," enlarged, recolored and with a drop shadowed applied via Photoshop, and is an example of one such use (although I actually cheated and processed a graphic of the font rather than using the font itself because, frankly, I'm too cheap to spend $25 just so I can post this for free).

Font-Obsessed Like Me

Don't know what you're doing on your Labor Day holiday, but I'm watching the Dead Like Me* marathon on the Sci Fi Channel and feeling pretty self-satisfied because I just tracked down the cool font used for the title and credits on the show.

Googling the term "font used on 'Dead Like Me'" turned up nothing useful, so I thought I'd take a shot at it with MyFonts.com's WhatTheFont typeface search feature. I extracted the title from the header graphic on the DLM home page, converted it to black-and-white for maximum legibility and uploaded the resulting JPG to the WhatTheFont website. After giving WTF (stop laughing) a couple of hints as to the identity of some of the more stylized glyphs, it quickly returned a font that is undoubtedly the right one: Chiller, by Linotype.

Here's another example of the font:

Now, what I need is a client whose site would be an appropriate vehicle for Chiller.

Well, on second thought...

*Dead Like Me, in case you've never watched it, is a black comedy series about the "lives" of Grim Reapers, who are actually dead people who harvest the souls of live people just as they are about to become, um, dead people.

[Design] Rules are made to be broken

Matthew Mahon's photography website breaks just about every rule in the Good Book of Usable Design:

• Its navigation scheme is non-intuitive because, frankly, it doesn't have one. Visitors have no way of knowing where they're going when they click a link...if they can even find a link to click.
• It's 100% Flash and thus search-engine unfriendly. And good luck surfing it on an iPhone.
• The animations and most of the text could be termed third-graderish, except that would give third graders a bad name.

The website also resulted in $100,000 of new business in its first year, by estimation of the photographer. Considering it cost him only $12,000, one can conclude that rules aren't always what they're cracked up to be.

This is another website mentioned in this month's edition of Layers Magazine, in the article focusing on photographers' sites. Mahon's site was built by the two guys who run the design studio of WEFAIL (the studio name and their own website quickly communicate that you're not in Kansas anymore, design-wise, as it contains profanity as well as content that is borderline pornographic, an approach that sets some definite sideboards regarding its prospective clientèle), and every pixel was placed with conscious purpose.

And it works. I spent way more time than I had browsing through the site last Wednesday evening. Despite the unconventional presentation, it does a fine job of presenting Mahon's work and his outlook, which, apparently, is equally important to art directors seeking to hire free-lance shooters.

I'm tempted to let you figure out how to work the site on your own, but I value my visitors' time, so here are a few steps to flatten the learning curve:

• Click on any image to zoom in.
• Click on white space to zoom out.
• If a scary little head appears in the lower right corner of an image, click on it to see a video of the photographer and his assistant offering commentary – which may or may not elucidate or edify – about the photo.
• If a curved arrow appears in the lower right corner of an image, click to flip the image, which reveals supplementary text of varying usefulness.

And don't blame me if you get caught up in this site. It's not against the rules to have fun with it, you know.

Technorati tags: Matthew Mahon | WEFAIL

Jeremy Cowart, Photographer

I went to Jeremy Cowart's website because of the write-up in the current edition of Layers Magazine. His is one of three photography websites spotlighted by the magazine as being a cut above the rest.

It certainly is a fine example of how Web 2.0 technology is making its way into sites that are using it for its practicality and not its novelty – but that's a post for another time. As I said, I went based on the magazine's review; I stayed because of Cowart's amazing photographs of Africa and its people. These are some of the most achingly beautiful photos of that place that you'll ever see.

This is not just another shoot for the photographer. He's collaborated with Jena Lee to produce a book, Hope in the Darkness, with the intent of raising awareness of both the desperation and the hope that exists on that continent, or, rather, in its people.

If you browse through more of Cowart's portfolio, you'll see that he's tagged a number of photos with the term "Christian." (The ability to sort and organize the photos by such tags is another cool application of technology for this site.) The photos in this section are primarily of musicians, and well-known ones at that (e.g. Jars of Clay, Switchfoot, Casting Crowns, Mercy Me, Everyday Sunday, and some guy named Michael W. Smith). Given that his website's target audience is art directors (according to the Layers article) it's pretty gutsy of him to use the "C" word anywhere on the site.

He's got a Virb blog, if you're interested.

Technorati tag: Jeremy Cowart

Swindoll's Church's Website

The church where Chuck Swindoll pastors – Stonebriar Community Church in Frisco – has a new website design, courtesy of Dallas freelancer Chris Merritt. Merritt's account of how he created the new design is found in the current Digital Web Magazine's The Working Designer column.

I'm always interested in learning the details of the processes used by other designers, and my situation closely resembles that of Merritt's (for example, my commute is measured in feet, not miles or hours), with a few minor exceptions:

• I've never been paid to submit proposals for a design project.
• I've never had the unimaginable luxury of collaborating with a web developer who says, "Just design it how you want to design it, and I’ll worry about how to make it work." (OK, he does do development work; it just wasn't required for this project.)
• I've never had a high profile project that required "two-to-three months" just to come up with the design, never mind the coding of such.

Merritt seems like a really nice guy, and his design skills are obvious and formidable. In a former life, he says he was a church planter and worship leader, and thus has a special affinity for church and ministry-related websites.

The Stonebriar site mentioned at the top of this post is indeed beautifully done. Church websites are among the most complicated of designs, due to the potential diversity of the organization's "clients," and it's almost impossible to make one user-friendly while also providing comprehensive information for the wide variety of users. Merritt's design is a good example of how that line can be successfully navigated.

Blog Font

It was inevitable that some designer would eventually name a new font "Blog," and that has indeed come to pass.

As the illustration above shows, the font isn't as ugly as its name, but it's also not breathtaking in its originality or its ability to evoke blogginess. I will admit that I have no idea what qualities should be imposed on a font design to make it, well, bloggy, but then, I'm not a designer. But when I look at this, "blog" does not pop into my mind.

And as long as we're on the subject of blog-evoking (blogvocative?) characterizations, I'm still waiting for someone to design a universal symbol for "blog."

How Not to Administer a Privacy Policy

I recently received an email from MarketWatch, a Dow Jones financial news and research service. The email was alerting me to a new privacy policy for the MarketWatch website:

Clicking here leads to the website's privacy policy page, as I expected. What I didn't expect was the complete absence of any explanation as to what was changing from the previous policy. And, in fact, the previous policy was nowhere to be found – despite the fact that the new one isn't scheduled to become effective until June 26 – so that even if I wanted to try to compare the two statements, I couldn't.

Someone at MarketWatch really dropped the ball on this one. Privacy and data security issues are important enough that every company should go out of its way to describe in detail its policies, and to highlight changes in those policies. This would seem to be especially important for a financial services website, but it applies universally.

For what it's worth, the new policy is explicit in describing MarketWatch's use of cookies, web beacons, and third-party targeted ads. I haven't decided whether to continue my subscription to the site's services, but their lack of consideration for their visitors is not pushing me toward staying with them.

Hard Day

I've never seen a book or a course entitled "How to be a Freelance Web Designer" but I'm sure there's one out there somewhere. However, I'll bet it doesn't include a chapter or lesson about dealing with the unexpected death of a client, which is what I've been doing since Monday. In fact, I just finished an email to the client's widow giving her some ideas about a notice to put on his website.

Drafting a death notice for a client's home page. It's probably inevitable that one will eventually face that situation, but does anybody really spend time planning for it?

I plan to write more about the client, because he was a special guy, someone who became as much a friend as a customer over the past few years. He was also what some would consider to be a "public figure," internationally known in his field. However, I want to hold off until the family has published an obituary. It's not my place to make the announcement.

There's also the unfortunate reality that losing a top-tier client directly affects the finances of the freelancer's business. Again, this is not something one can plan for in any meaningful way, but it underscores the importance of trying to diversify one's client base as much as possible.

In the final analysis, however, things like this also serve to remind one to consider what's truly important in life. In that respect, being a successful web designer falls pretty far down the list.

Web Design Survey

One of the things my profession lacks is a survey. Every profession needs a survey to validate its importance as a, well, profession. This lack of a survey has been a source of frequent embarrassment in social gatherings, and even in more intimate surroundings. However, thanks to the crafty and insightful folks over at A List Apart, all that is now behind me and my profession.

Seriously, though, if you're in the web design or development business, drop by and take the survey. The benefits of having a growing database of results are admittedly unclear to me, but I've pretty much always subscribed to the theory that more data is better than less data. And you could win valuable prizes!

Image Resolution: Clearing the Fog

Update: I've fixed the link to the article by adding, you know, an actual link. Sorry about that!

One of the most confusing areas of graphic design for many people seems to be image resolution. How does one go about making sense of DPI, pixel size, print size, etc?

While I can't guarantee that you'll find the answers to all of your questions in this area, I do think that this article is one of the better attempts at bringing the issues into clearer, um, resolution.

Highway Sign Fonts

Is there anything more annoying than needing to Photoshop a highway sign and not having the right font? I didn't think so.

I had a critical need for that capability just this week, and some tinkering quickly confirmed that those big green signs you see along the interstate don't use Arial or Helvetica or any other common sans-serif font. In fact, many of them are now using a typeface called ClearviewHwy®, which was developed by a multi-discipline design team, including representatives from the Texas Transportation Institute.

ClearviewHwy® was developed using the results of lengthy studies regarding legibility and recognition (which are not the same, by the way) issues that arise when the reader is potentially moving at a high rate of speed, in a wide range of weather and lighting conditions, and at differing angles of view. The research even looked at variables such as the performance of the typeface when set in reflective material (which tends to produce a mild halo effect -- halation -- when illuminated by headlights at night).

The end result is a font that's been approved by the Federal Highway Administration for highway signage, and is being implemented by a number of states, including Texas.

So, given these credentials and the increasing ubiquity of the font, I figured it was worth adding to my personal collection for my own Very Important Uses. So I popped over to the online order form...and immediately dropped my gum. They're obviously not interested in catering to the blogging market, given those prices.

I decided that Arial was a perfectly acceptable substitute for a sign on the information superhighway, even though I realize that most of you are speeding through on your way to somewhere more enlightening and entertaining.

Don't even try to justify your blogging!

I ran across an interesting discussion thread on the SitePoint message board, where someone posted the following question:

The general consensus is that justifying text -- which results in the spacing of words being compressed or expanded so that the left and right margins of the text are even -- is a bad idea on websites.

Text justification is another in a long list of techniques that don't transition well from print to the web. Justification in print media works fairly well because (1) the layout software is smarter than a web browser and (2) the final version presented to the reader will look exactly as the creator envisioned. Even in print, however, the practice isn't universal. A quick sampling of magazines in my, um, reading room showed that less than half justify their text. The conventional wisdom seems to be that the ragged right margin makes it easier for the eye to jump to the next line of text, providing better readability.

Web browsers aren't consistent in how they interpret the instruction to justify text. Their algorithms for expanding or contracting space between words can yield strange results, especially for narrow columns or in text with longer than usual words. Also, to my knowledge, no browsers have the ability to automatically hyphenate words, and hyphenation is a critical technique for making justification work.

The result is text that might be neatly aligned at both margins, but is a mess in the middle. This can result in "rivers of white space" which, according to several comments in the above-referenced thread, can be quite distracting to readers with dyslexia, something I didn't know.

Despite the post title, I can't think of a single blogger who uses text justification, although I'm sure they're out there. If you've implemented a template on your blog that has justification built into it and you'd like to remove it, just look for the following coding in your CSS file: text-align: justify;. Either delete that snippet, or change it to text-align: left; and your blog will no longer be justified.

Of course, for some of us, that has nothing to do with the text. *ahem*

Touting Tiny Type

Anyone who does web design or web graphics on a regular basis is familiar with pixel fonts, those teensy typefaces that are sharp as a tack -- when used properly -- despite their small size.

Pixel fonts are most properly used for labeling web graphics, e.g. embedded photo captions, or labels on diagrams and flowcharts. They don't work well for large blocks of text, because of their small size, and they're not optimized for printing. Here's a good primer on pixel fonts, via PhotoshopSupport.com.

Pixel fonts don't require anti-aliasing to improve their appearance; in fact, anti-aliasing makes them look worse. This also means that web graphics using pixel fonts will be smaller, byte-wise, than their counterparts that use "regular" fonts. This is because the anti-aliasing process -- which is designed to smooth the edges of the text -- actually adds colors to the graphic, which results in larger files.

Here's an illustration of this effect. The following graphic is a simple green rectangle containing a line of text in Verdana, font-size of 10 pixels, anti-aliased in Photoshop using the "Sharp" setting.

# of colors: 14; File size: 674 bytes

The next two examples display the same text in pixel fonts. The top one uses Tenacity, which renders properly at 10 pixels; the bottom one is Silkscreen, which requires rendering at 8 pixels (or a multiple thereof).

# of colors: 2; File size: 382 bytes


# of colors: 2; File size: 347 bytes

Legibility and readability of the pixel fonts is better than for the anti-aliased Verdana, and the files are almost half the size. (Note that you won't see this kind of file size reduction in a photo, however; the incremental weight of the caption will be insignificant compared to the pixels comprising the photo itself.)

Design Suggestions for Bloggers: Comments

It's been a while since I tackled the issue of blog usability, not because it's less relevant today than it was back in '03 when I first dived into it with a post about why people should care about their blogs' designs, but primarily because of other distractions. However, I've started seeing more of a particular kind of thing occurring -- something that is probably overlooked by most people -- and that's the placement of the comments link preceding a post rather than following it.

I realize that most people don't obsess over their blog's template. They've picked a template that works for them and one of their criterion is that they don't have to obsess over it. But that doesn't mean that the template's designer kept the blog reader at the top of his or her thoughts when the layout was created.

If you've chosen to enable comments on your blog, presumably you've done so because you enjoy the conversation...the dialog. If you apply a conversational metaphor to the post/comment process, when you place the comment link at the beginning of the post, it's as if you're soliciting the other side of the conversation before it's begun. That's not very logical, even if it might yield more entertaining results, depending on the nature of your readership.

From a practical perspective, when the comments link precedes the post, the reader may have to scroll back up after reading the post in order to reply to it. Granted, we all can use more scrolling practice, but there are more appropriate places to implement it.

My advice is simple: if you know how to edit your blog's template, move the comment link to the bottom of the post. Everything else -- the tags, categories, date stamp, etc. -- can stay at the top, but dropping that link to the bottom will make it easier for conversations to take place.

Related to this is the odd practice of showing comments with the most recent one at the top. This works if the comment window opens by default at the bottom of the thread, but that's hardly ever the case.

Once again, this practice hardly seems logical if comments are viewed as conversations. You're requiring your readers to follow the conversation in reverse order, which is fine for those who think Memento was the best movie ever made, but that's probably a small and finite population, and quite possibly comprised of many non-blog-readers.

[You may be thinking at this point, (1) "Dude, get a life!" and (b) "Well, if that's the case, why are blog posts listed in reverse chronological order?" My responses are (a) Good point, and (2) The posts themselves aren't conversations. Besides, most blogs are set up so that the older posts drop off the home page; you don't have that problem with comments.]

Last, and probably least, please consider enabling at least month and day for the timestamp on comments. Enabling only the time of day prevents your readers from knowing if they're entering a thread in a timely fashion, or if everyone long ago moved on to something else.

In the end, if you have a blog, it doesn't really matter what I think. OK, it doesn't matter what I think whether you have a blog or not, but you know what I mean. But as I wrote in 2003, you're blogging presumably in order to attract and retain readers, and anything you can do to make it easier for readers to participate is likely a good thing. I simply want you to have good things; that's just the kind of guy I am.

That, and a bit OCD.

Technorati tag: Blog Design

Outlook 2007 Hoses HTML Email

SitePoint's current newsletter sheds some light on a move by Microsoft that will likely affect your incoming email, as soon as Outlook 2007 lands on computers around the world. It reports that Microsoft has switched the HTML rendering engine in Outlook from that used by Internet Explorer -- which in version 7 had become quite competent -- to that used by Word 2007, which, to put it in polite terms, is not fully CSS-compliant (in less polite terms, it reeks).

Here's a quick summary of the features that Outlook 2007 will no longer support, as provided by SitePoint (Microsoft's own summary is found here):

• no support for background images (HTML or CSS)
• no support for forms
• no support for Flash, or other plugins
• no support for CSS floats
• no support for replacing bullets with images in unordered lists
• no support for CSS positioning
• no support for animated GIFs

What does this mean to the average email recipient? Expect to see much simpler layouts, as email developers find that their previously complex designs don't work in the new program. And since they can't target their emails based on which email program the recipients use, everyone will see the change.

Now, lest you think this is more Microsoft bashing on my part -- to be honest, I applaud this change. When it comes to my email, simpler is better, and there's nothing in the preceding list I can't live without. I try to avoid sending HTML-formatted mail, and I prefer not to receive it, when I have the choice. If someone wants me to see a web page, they need only to send me the URL and I'll visit it at my convenience; I don't want it embedded in an email. HTML-formatted mail is often ponderous and bandwidth-sucking, makes phishing easier by allowing the disguise of URLs, and increases the potential for recipients to allow the introduction of malware onto their systems. In fact, according to the SitePoint article, this change by Microsoft implies that the company isn't as comfortable with IE 7's security as it has previously asserted.

In summary, how you view this move by Microsoft will depend on the extent you favor HTML-formatted email vs. text format. There may be much wailing and gnashing of teeth in the developer community (SitePoint's own email newsletter is broken under Outlook 2007), but the average email recipient may be better off (never having to see another animated GIF in an email is a blessing from my perspective) or at least neutral (I subscribed to the text version of SitePoint's newsletter so I don't care).

What would Annie Oakley shoot?

Would she go for a 40 cal. S&W with slide, trigger and accents in a nice anodized lavender, equipped with a teal-colored tac-light and fitted with a tiger-skin grip inlay?

OK, the real reason for this post is to introduce a Photoshop plug-in filter called AKVIS Decorator. I'll be posting a full review of this software within the next few days, assuming the Firearm Fashion Police don't haul me off.

Firebug for Firefox

If you like to dabble with website design, I'm guessing that you use Firefox as your browser, and you've come to view the Web Developer extension as the greatest thing since sliced bread. (Perhaps I'm projecting, since that describes me.) But if you've ever wished for an even more powerful add-on to assist your development chores, Firebug may be the answer you've been waiting for.

This free open-source application allows you to browse, edit and debug HTML, CSS, and Javascript on any web page via a browser-based interface. It's currently in beta, but seems pretty stable on my installation of Firefox 2.0. It's also available in a "lite" version for browsers not named "Firefox" (as a Javascript that you embed in the pages you want to use it with...not a particularly elegant solution, but I assume it will get the job done).

One caveat: Firebug works best when you have a lot of spare screen space (it supports dual monitors), as its console attempts to convey a lot of information at one time.

I'm not ready to abandon Web Developer, as Firebug doesn't really fit with the workflow I've grown accustomed to, but it's worth checking out if you're not set in your ways and are looking for a full-featured browser-based development tool.

Technorati tags: Firebug | Web Developer

Client Intimidation

This is the "disappearing post" I mentioned earlier. If it causes some kind of cosmic rift, it's all Brian's fault for telling me how to resurrect it from the grave.

I just fired off a solicited proposal to redesign the website of a well-known area art museum, and I'm feeling a little nervous about the prospect. I mean, I know that it appears that I have mad art skillz, but, really, that's a river that's a thousand miles wide and a nanometer deep. Whatever that means.

Anyway, I'm excited about the prospect, and I'm taking some comfort in my philosophy that the design should be about the art and not, well, the design, if that makes sense. After all, some of the most respected art museums in the nation have very approachable websites, and, if nothing else, I'm approachable. (That is, if by approachable one actually means simple.)

Stay tuned...

The Madonna Connection

Let's try this again, shall we?

Tomorrow, October 24, is the release date for Madonna's new children's book, The English Roses, Too Good to be True.

"So what?" you may ask. There are a couple of reasons this is significant, from my perspective. First, the book's illustrator lives in west Texas. Second, she's a new client.

Media inquiries should be made directly to the artist.

Judging a Book by its Cover

I'm a sucker for one-trick-pony software: little applications that do one thing, and do it well. I've got a program that does nothing but jiggle the cursor at predetermined intervals to keep my computer from going to sleep if I'm not using it. I have another that lets me rename files in batch mode. And, of course, there's the application that allows you to create comic strips [creativity not included].

Thus I'm intrigued by Insofta's Cover Commander, a program that allows you to create "virtual covers" for books, CDs, product boxes and other packaging, etc. Some publishers are choosing to use it to create images of their book covers instead of photographing the real thing, because the results are better.

The only downside is that it's a Windows-only program which means that I'll not be using it until (1) I get a new Intel Mac or (2) I actually have a book, CD, DVD, or other product package that needs showcasing, whichever comes last. In other words, it's not likely to ever become relevant for my purposes, unless I choose to write and publish an exposé of the Midland blogging scene. But if you're an author or product designer, Cover Commander might be of use.

Bunk Sofa

Meet DOC, a sofa that transforms into a bunk bed in mere seconds.

Via swissmiss, by way of this completely unrelated post at CreativeTechs. But the Visual Thesaurus in the latter post is pretty cool, too.

Technorati tags: Sofa/Bunk Bed | Visual Thesaurus

Type of the Living Dead

From E-Zombie.com, by way of Denise over at Blue Sky in Texas, the new Font of the Week:

Please note that no zombies were harmed in the making of this typeface.

What a web designer's blog should look like

I'm a little late in writing about this, although I doubt that any of the Gazette's regular visitors include Digital Web Magazine in their list of daily reads. The July 25 issue has an interview with Belgian web designer Veerle Pieters, and Ms. Pieters is quite candid about a number of aspects of the way she approaches her successful business.

A few items of note that I found particularly relevant to my own situation:

• She says that she meets only about 25% of her clients face-to-face. While I've met a much larger percentage of mine, there is a significant minority whom I've never met and likely never will, even though we may correspond and collaborate as often as weekly. That's one of the fascinating aspects about this business.


• While she agrees that web design is evolving to the point where many designers will be specialized, Pieters believes there will always be a market for the "one person shop who does it all." I hope so, since that's me. But, really, I can't do it all; I have to make a conscious decision about what technologies I'll try to master and which ones I'll leave to someone else (like, say, Flash).


• She charges different rates for different clients (e.g. slow-pay vs. fast) and different types of jobs (mainly distinguished by tightness of deadline). That's something I still haven't come to grips with entirely, although I do take into account perceived ability to pay when developing an estimate, particularly when I'm working with a small nonprofit organization.

Pieters's blog is a showcase of her eye for design. I hate to even link to it, as it serves to highlight my own design inadequacies (as if they weren't already apparent). She makes a comment in the interview to the effect that you either have design talent or you don't, and if you don't, well, you're just out of luck.

I really hope she's wrong about that.

Puzzling Logo

Take a look at the logo at right. Do you recognize it? Does it resemble anything else you've seen elsewhere?

I find the design to be very ambiguous, and I don't know if it's because I'm not perceptive enough to identify it, or if it's intentionally so. From one perspective, it resembles a duck's head; it's a bird's wing if viewed from a different angle. It also resembles one of those tools that first responders use to cut the seat belt from a victim of a car crash.

What am I missing? Am I missing anything?

Click the following link (if you're reading this via the Gazette's home page) to learn who owns the logo.

The logo belongs to an organization called "GOPUSA." It's a conservative activist company that is not, as far as I can tell, officially affiliated with the Republican Party.

Most political organizations seem to develop logos and other branding identities that are rooted in patriotic symbols or political traditions (e.g. the Donkey and the Elephant). I can't discern such a tie in this logo, and that's vaguely annoying, for reasons that I can't quite nail down. I suppose I tend to prefer branding that actually communicates something about the organization it represents.

Overfed Flatbed

Bloggage has declined precipitously around here lately for one simple reason: Real Work.

I'm in the process of creating a new website for a local photographer. I enjoy doing photography websites because I like seeing what the client chooses for the portfolio sections. In this case, the client is a longtime fixture in Midland; he's been a professional photographer longer than I've been alive, which is pretty astounding. As you would expect, he's got a large body of work, and he's picked about 200 photos to go on his website.

The catch is that he's Old School. He's done just fine with film over the years and he has no intention of switching to digital. I certainly won't second guess his decision, but what that means for the project is that I have to scan 200 prints and make them web-friendly.

Besides the sheer volume of the work, there are two basic problems. The first is that all the prints are on satin finish paper. This means that there's no reasonable way for me to make the scans look as sharp as if they'd come from glossy paper. The client understands that and is fine with it.

The second issue is dust. When you're showcasing someone's photographic talents, the appearance of dust motes on the image is a very bad thing. Unfortunately, next to heat, our most common natural resource in west Texas is dust. And it's amazing at how the smallest particle jumps out in an otherwise flawless photo. As a result, I have two choices. I can do quick scans and then use Photoshop to remove the dust spots, or I can apply canned air and a dry dust rag to each print and the scanner bed before every pass. I've elected to do the latter, counting on an ounce of prevention and all that.

On the positive side, my new Canon scanner and SilverFast software are working together beautifully, and the client has been quite pleased with what we've accomplished thus far.

I hope to return to more consistent posting soon...but I've got to process 72 scanned photos of high school seniors. Such is the glamorous life of a pixel pusher.

Those who bathe in glass tubs shouldn't...

Wasauna makes a glass-and-stainless-steel bath tub:

Now, I've never been of the tub persuasion anyway, but if I was, this might turn me to the Shower Side, if for no other reason than I can't imagine how hard it would be to keep something like this clean.

From a design perspective, the use of corners (well, to be more accurate, the perpendicular intersection of planes) is not something you see very often in bathtubs, and I'm guessing there's two reasons for that. First is the cleaning challenge. I suppose if you have $9,000 to drop on a tub that doesn't come with magic fingers, you can afford to hire someone to clean it.

Second -- and more cause for pause -- is the problem of getting a watertight and long-lasting seal between the glass and the steel. I realize that modern epoxies can do miracles, but I can't help wondering what 20+ years of daily exposure to hot and cold water will do to the longevity of the seal.

Wasauna seeks to reassure us regarding that worry, but its marketing text on the website is unintentionally amusing: Each unit is inspected for 5 hours with a magnifying glass. I'm sorry, but that just makes me think of a Monty Python sketch.

We Card...Colors, That Is

This is pretty exciting. I just got a notice that my ColorChecker Mini color card has just been shipped by the manufacturer, GretagMacbeth. I can't wait!

Um, you do have a color card to check the color fidelity and white balance of your digital photos and scans, don't you?

If not, join the crowd. This will be my first one, but it's long overdue. I had never thought about adding one to my gear bag until I received some professionally scanned images from a client, and each scan included color and grayscale cards adjacent to the image. It made adjusting the color range of the images in Photoshop a snap, and helped ensure that the web versions of the scanned paintings more closely approximated the originals.

Obviously, you can't frame most photos to include a color card, but where you have control over the environment -- or when you're scanning an image -- it's generally easy to place a card next to the subject. At the very least, it's a quick and easy way to ensure that the white balance of the images is correct, using the eyedropper tool in Photoshop's Levels command.

These little gems aren't cheap -- $59 for the small one and $74 for the larger version -- and they recommend replacing them every two years in order to assure color fidelity. But it's a small price to pay to speed up image processing while increasing a client's satisfaction level.

Horseshoe's New Website Underwhelms

Update: I've been reminded that the management and marketing of the Horseshoe was award to Dooley Management, in that great west Texas *ahem* city of Glen Rose. At least Dooley's website has photos.

Last January I was invited by a local ad agency to join it in submitting a proposal for the marketing of the new county "multipurpose facility," known as the Horseshoe. My contribution was, of course, the design and construction of the facility's website. Based on the guidelines provided by the county I submitted a bid, which was then integrated into the overall proposal submitted by the agency.

After several months of hearing nothing, I assumed that a competing proposal had won the bid. I wasn't particularly disappointed; while the project would have been a good addition to my portfolio, there are certain challenges to working for government, and I'm not lacking for business at this point. Still, my curiosity was aroused each time I passed the Horseshoe, wondering who got the job and what the results would be.

I noticed on Wednesday evening that the Horseshoe's marquee is inviting folks to visit its new website at www.midlandhorseshoe.com and I finally remembered to do that this morning.

Well.

OK, here's the good news. The site loads quickly and is easy to navigate*.

However, I think it fails to adequately represent what presumably will be marketed as a first-class facility. I'm still amazed that people will build multi-million dollar complexes and then think that 1990s-vintage websites are adequate to provide an increasingly important online image for those projects.

The site was apparently constructed by the county's IT staff, and while I commend them for not using FrontPage, I hope at some point they'll learn to (a) use CSS and (b) stop using things like font tags. However, I'll give them the benefit of the doubt and posit that this perhaps is simply the first draft of a website that will eventually (and quickly?) evolve into something that matches the facility itself. Perhaps visitors will someday even be able to see a photo of the buildings.

I don't fault the county for trying to save some money, but I wonder if that's really what it's accomplished. And without trying to secondguess their decision, I'd like to point out that for less than $1,000 the county could have had a site like this.

*Don't confuse "easy to navigate" with "usable," however. I consider myself to be reasonably intelligent but I admit to being completely stumped by the organization of the Horseshoe's Event Calendar, which seems to be presented in either a completely random sequence, or employs a sorting scheme that I'm too dense to understand.

Technorati tag: Midland County Horseshoe

Local Website Wins Another Award

I've just learned that the Permian Basin Area Foundation's website has once again been recognized by The Council On Foundations, via the COF's Wilmer Shields Rich Awards Program for Excellence in Communications. (Yes, it takes a pretty big plaque to contain all that.)

This is the third time in the past four or five years that the website has been recognized by the COF, but this one is especially meaningful, for two reasons. First, we redesigned the site late last year after it was not recognized in the previous awards competition. It's gratifying to know that the new design got some positive attention.

Second, the PBAF has moved up a class and now competes with larger community foundations ($21-$100 million in assets). The PBAF site was awarded the bronze medal; the gold went to The Ontario [Canada] Trillium Foundation (an agency of the Canadian Ministry of Culture) while the silver went to the Midland Area Community Foundation (asset base - $52 million) of Midland, Michigan (an interesting coincidence). One would expect the competition to be stiffer in this category, although the amount of resources brought to bear on a website doesn't necessarily correlate with its success.

I suppose the latter point is proven by the fact that I provide all website services to the Foundation on a strictly pro bono basis (not counting the annual lunch I get at the Petroleum Club ;-).

Lest you think that all of this is going to my head, I need to disclose the fact that I've seen the judges feedback sheets (just for the PBAF site, not the others) and they served to emphasize the fact that these kinds of competitions are very subjective. The criteria were vague and relatively unsophisticated ("does the site offer hyperlinks?"); no weight was given to accessibility. One judge knocked the site because it lacked "dropdown menus" even though this is one of the flattest websites you'll run across. (The Javascript-driven "dropdown menus" on the Canadian website consume 24kb by themselves on each and every page!) The sites were obviously tested on one browser (IE, I'm sure) and one platform (Windows, I'm sure), as the Midland foundation's website navigation is seriously broken in Firefox/Mac.

Regardless, it's still nice to have your work recognized, and I'm proud to be associated with an organization like the PBAF.

Technorati tags: Permian Basin Area Foundation | Council On Foundations | Wilmer Shields Rich Awards

WTF?

No, it's not even my acronym, it stands for "What The Font?" and it's very cool. It's the free font identification tool found on the MyFonts.com website.

Simply browse to a scan of a text sample or an image from a website (either stored on your hard drive or an uploaded URL) and WTF will process it and provide you with some possible matches for the font used in the sample. I used Photoshop to create four test images (in JPEG format) and WTF correctly identified three of them (the fourth was a font named "Haettenschweiler" that I didn't even know I had and which I've never used; WTF didn't recognize it, but provided several very closely matching alternatives). It did recognize Copperplate, Skia and Mistral...putting each one at the top of the list of potential matches and alternatives.

This one's worth bookmarking.

Tip o'the hat to Gervase over at Hacking for Christ.

Technorati tags: Font Recognition | What The Font?

Light! Photoshop Plugin

Next to fonts, Photoshop plugins are my favorite "add-ons" in a design toolkit. Most plugins are created to extend the capabilities of the program to allow the user to quickly achieve effects that would otherwise be difficult and time-consuming to replicate.

Some plugins are about as subtle as a sledgehammer; that doesn't make them any less fun, but they aren't always practical. The truly useful ones are more ethereal in their impact, and "Light!" by Digital Film Tools is a fine example. This plugin allows you to choose from almost 600 lighting patterns and integrate them into a photo. Here's a crude example I cooked up:

You can also use Light! to add colored gel effects to photos, or to simulate Fog and Mist filters and Glow effects...just like photographers used to do in the "old days" with actual stuff that mounted on their camera lenses. Can you imagine having to do that?

The Digital Film Tools website has some much better examples of how this plugin can be used to subtly enhance a photo; you might start here to get a feel for the natural effect that can be achieved.

Light! incorporates the lighting patterns catalog created by GAM Products, Inc.. GAM is an interesting company itself, specializing in special effects projection and lighting equipment and resources. The Light! plugin is reasonably priced at $50, and you can download and try it out in demo mode before purchasing. It's compatible with Photoshop and Photoshop Elements for Mac and Windows, and some other Windows-only apps.

Technorati tags: Light! | Digital Film Tools

Making the Web an Artsier Place

Every now and then I actually get paid for designing a website (did you catch that, Wallace?) and we went live with one of those this afternoon. This site was commissioned by award-winning impressionist painter S. Burkett Kaiser. If you're skeptical that it's a big deal, try Googling her name.

Kaiser currently resides in Malibu, California, so you might wonder how she ended up with a hick designer in west Texas. Fair question. She found the website belonging to my other Big Name Artist client, Charles Sovek, who also lives on the coast -- the East coast in this case, in Connecticut. She liked the overall style of Sovek's site and came to the logical conclusion that whoever did that site could also capture her vision. (The really interesting story is how Sovek found me; another time, perhaps.)

Artists are fun to work with on projects like this. They see things in ways I'd never consider, left to my own devices, and I invariably get stretched -- in a good way -- during the project. For example, I can't tell you how many color schemes we burned through before settling on the one you see. It's occasionally frustrating, particularly when you're working 2,000 miles apart and can't just point to the screen and say, "see, this is what I'm talking about..." but it's a great feeling to finally hear the words, "that's it! That's what I want to see!"

Anyway, I'm pleased to have this one up and running. Visit her site if you get a moment; she'd be thrilled to know that people are seeing it.

Technorati tag: S. Burkett Kaiser

Lafite Seat

I never remember the annual Champagne Chair Design contest sponsored by upscale furniture retailer Design Within Reach. The rules are simple: "...create a miniature chair using only the cork, wire and foil from no more than two champagne bottles."

Fortunately, I have Deb over at Write Lightning to keep me apprised when the winners are announced.

Technorati tag: Champagne Chair Contest

Top 10 Fonts of 2005

As I've mentioned previously, I could spend all my disposable income at MyFonts.com, which is ideally designed for giving type junkies a fix.

MyFonts.com has just released its "Top 10 Fonts of 2005" based on sales, but it was wise enough not to use absolute sales numbers (can you say "Helvetica"?) but instead to choose the best seller in each of ten categories plus some editorial discretion. There are some great choices in the list (click on the links to see font samples; tacky and/or inane parenthetical observations are, sadly, mine):

• Best San Serif: Elektra (Lousy movie; cool font)


• Best Serif: Esta (When Times Roman just won't cut it (as if it ever did))


• Best Antiqued: Garfield (As in "the president," not "the cat")


• Best Floral Deco: Bodoni Classic Deco (More flourishes than a night at the Tonys)


• Best Comic: Grilled Cheese (There's something slightly askew about this font, not unlike my sense of humor.)


• Best Cursive Rough Script: Baka (Bold and artful, with just a whiff of insouciance)


• Best Grunge Poster: Kab (The only way to publicize your next doof doof rave.)


• Best Brush Script: Qwigley ROB (Umm...I dunno; looks a lot like Mistral to me.)


• Best Calligraphic: Pendulum (All I can see now is bunny ears.)


• Best Grunge Script: Chato Band (Because even bangers sometimes have to write thank-you notes)

Resolution for Designers: Ditch the Bloat

Gene Redlin is fed up with sloppy, bloated websites.

According to a September, 2005 survey for the Pew Internet & American Life Project, 39% of home internet access is via dial-up. That's a large minority of potential website visitors who are continually feeling frustrated by bloated websites with long download times dedicated to delivering useless stuff.

Heck, I've got cable and I still encounter sites that annoy me to no end with their long download times. SI.com is a prime example.

Most of my clients understand the issue and ask for a clean, fast-loading layout, and I'm happy to accommodate them. However, I still get the occasional request for a splash page (no one has yet been able to explain to me what they want to accomplish with it) or the automatic display of a 20-megabyte movie (usually a TV commercial; I'm like, "dude*, people don't want to watch your TV commercials on TV; why do you think they want to come to your website to watch them?").

So, for 2006, I suggest that website designers (and that goes for you bloggers, too...don't get that smug "he's talking about someone else" look) try to remember that broadband hasn't penetrated the market to the extent you might think. There's still virtue in optimizing your photos and other graphics and using CSS to tighten up your code and eliminate bulky Javascript/graphic rollovers. You'll make 39% more people happy without alienating the other 61%, and there's not much downside to that scenario, is there?

*OK, I confess that I have yet to address a client as "dude," but I'm working my way up to it.

Technorati tags: Website Design | Website Usability

Danger: Art Ahead

Every artist wants to feel that her or his work has made an impact on those who view it...but probably not to the extent that vehicular crashes, bodily injuries and psychological traumas are involved. If you're too good at what you do, you might find yourself in the position of one John Pugh, who feels the need to issue a disclaimer of liability for any adverse affects the viewing of his trompe l'oeil murals might engender.

His work is remarkable, no doubt about it. I suggest starting here (albeit in the safety of your home, not behind the wheel of a car) and then exploring the rest of his site.

Technorati tags: Trompe L'oeil | John Pugh

Overdoing Simplicity

You know me...I'm all about simplicity, usability, yielding control to the customer. When I see "KISS," I think facilitation, not osculation.

So it's strange that I should find myself needing to issue a mild rebuke to the Wall Street Journal for going too far down the path of simplification. Here's what I mean:

This is a screen capture from the bottom of the page devoted to today's "Question of the Day," an informal poll regarding burning issues (la pregunta de hoy: "Which type of Web site is most in need of greater government oversight?" (Fortunately...surprisingly...blogs weren't among the named choices, although I'm sure they're what everyone has in mind when they pick the "Other" category.) This page contains the poll itself, followed by a series of message board-style comments left by those who want to editorialize about why they voted as they did. It's all very routine stuff.

However, someone at the Journal has apparently decided that despite the fact that access to their website costs around a hundred bucks a year and the average subscriber has at least an undergraduate degree, something on this page is potentially confusing and therefore readers need the equivalent of the Staples "Easy Button."

I applaud the designer's sensitivity, but, frankly, I don't get it. It's especially puzzling when I click the "Basic View" link and -- just as with the "Easy Button" -- nothing changes. I can't tell any difference between the Basic and Advanced Views. Perhaps I'm not looking hard enough, but I submit that if one has to look really hard to distinguish between two options, there may well be one too many options.

OK, I'll admit that there is one difference between the Basic and Advanced Views. The Basic View is lacking the option to change the font size. It's possible that the designer decided that the popup menu allowing the change in font size might be intimidating or confusing -- Wonder what they mean by "adjust"?. Never mind that the option is, well, optional.

I've intentionally not placed this example into the Gazette's world renown "Usability Hall of Shame," because it's not bad design; it just appears to be unnecessary design. It's as simple as that.

Technorati tags: Wall Street Journal | Usability

Web Writing

Here's an article designed to tell you how to improve the writing on your website. I wish I understood what it meant.

Technorati tag: Writing for Websites

What's in a [Domain] Name?

I wouldn't normally link to an article of this nature as it contains some references that are, shall we say, on the other side of tastefulness, but it's also a valid reminder that details are important when creating a website for your business. Keep in mind that the sites mentioned are (or were at the time the post was made) real websites for legitimate businesses.

It occurs to me that until the web became ubiquitous, there was never any reason to think about the seemingly harmless space between the words of a business or organization name.

Of course, there are some who might suggest that consideration should also be given to the acronym associated with, say, blog names.

Tip o'the hat to the occasionally bilingual 網絡暴民 Jacky's Blog, one of the true "link blogs," the genre that once ruled the blogosphere.

Layout Tweak (Did you notice?)

Ever since the Gazette got a makeover last August, I've been dissatisfied with the look of the blogroll and recent post links shown in the right sidebar. The look wasn't bad...it just wasn't what I wanted, and I was frustrated that I couldn't get it right. I decided that the problem was that I didn't understand how Blogrolling.com was delivering the links via its Javascript, but I never thought to explore its website to see if there was some documentation that would clarify things.

Turns out, there is. In fact, there's a page entitled Customizing Look and Feel with CSS (the link is also available via the "Code Generator" page associated with each blogroll). A quick read of that page showed me what I needed to do.

I've now eliminated the too-wide gaps between the links and added discrete borders between them. And, I just checked the page in both IE and Firefox for Windows and it looks fine. I hope you approve.

And if you have a blog and are using Blogrolling.com's service, you might want to check the above-referenced documentation. Unless, of course, you've known about it all along...in which case, thanks for nothing. ;-)

Mozilla Style Properties

As a follow-up to yesterday's post about tweaking webpage layouts using Mozilla-specific CSS, here's a page that describes about forty similar proprietary tags. Most of them are pretty esoteric and you may be hard-pressed to find any use for them.

One of the most intriguing of these is -moz-opacity, described as follows:

This can be used to make any object to which it's applied partially transparent when viewed via a browser using the Gecko display engine (Firefox, for example). Use your imagination...

Technorati tags: Mozilla Custom CSS | Gecko | XUL

Fun with Gecko

Typical of our usual scintillating Friday night social life, MLB went to Barnes & Noble for coffee and dessert (following a quite excellent dinner of pad thai and summer rolls), and then we browsed the books for another hour or so. I tell you, the party never ends around here.

Anyway, I spent most of my time, as usual, perusing the somewhat limited collection of technical and design books. B&N has a separate set of shelves for O'Reilly publications, and my eye was grabbed by one entitled Firefox Hacks. I initially dismissed it as seeming a bit too opportunistic, but then I was intrigued -- how could anyone write a whole book about customizing Firefox? -- so I began to thumb through it. I was impressed. I am impressed; I bought the book.

And I've already experimented with one of the "hacks" the book discusses. Have you noticed it yet, right here on this page? Of course you have...but only if you're using Firefox or another Gecko-based browser that supports the custom Mozilla styles. The rounded borders enclosing this post and the sidebars are generated courtesy of a simple CSS tag: -moz-border-radius: 20px; (substitute whatever number you want for the "20"; the smaller the number, the tighter the bend in the corners).

The moz- in the example indicates that this style property is proprietary to Mozilla-based browsers (or, to be more technically accurate, the Gecko display engine). If you're a design purist, you'll sniff at the use of such code, because of its less-than-universal recognition. But, really, it's harmless in that non-Gecko browsers will simply ignore it and display the borders in the traditional squared-corner manner. And it can be used as sort of a secret-handshake acknowledgement of fellow Mozilla users...which, indeed, is how I'm using it here.

There are many more such -moz style tags. You may see some additional implementations in the future. If, that is, you're not using Internet Explorer. ;-)

Technorati tags: Mozilla Custom CSS | Gecko

Best Magazine Covers Since 1965?

The American Society of Magazine Editors has announced its list of the "40 greatest magazine covers of the last 40 years." [Note: Not all covers are office-safe. Taste-wise...well, YMMV.]

The January 22, 1981 cover of "Rolling Stone" was the top pick; this is the one with a photo of a naked John Lennon curled up next to a fully clothed (thank you!) Yoko Ono. The equally naked but much more pregnant Demi Moore's "Vanity Fair" appearance on the cover of the August, 1991 issue is #2 on the list.

The preceding link presents the list without comment or rationale. For an often-scathing critique of these choices, pop over to Under Consideration's "Speak Up" and read Dangling Listicles. If the covers fail to inspire, the comments might succeed in entertaining.

A whiffle of the periodical's pages to Jason Kottke

Technorati tag: ASME

More oxymoronic web design

Hot on the heels of the recent post about the mixed signals sent by the SBC Communications website comes this goodie:

I submit for your consideration that a website designed for the "widest possible access" would require none of the things this one says it requires. But, maybe that's just me.

The offending site? None other than U2.com Yes, I know. The Gazette will likely be dropped from what few blogrolls it appears on for the implied slam against The World's Greatest Band. But, I don't make the rules; I simply point out the transgressions thereof. At least I didn't flag the site for the Usability Hall of Shame. As band sites go, it's pretty decent along those lines. The designer just needs to pay a bit more attention to some home page details.

At least it didn't call for a "secure browser like Internet Explorer."

ASCII Art: Paint by the Letters

Recognize this handsome mug?

If it bears a striking resemblance to the favicon for this site, it should. Anyway, you, too, can convert your own self to a retro-chic ASCII version via ASCII Art Made Easy. Any image (up to 640x480 px) can be converted to ASCII format. The only catch is that it must be uploaded to a website; the input form requires an URL for the source image. You can even add some color. But that's a bit gauche, don't you think?

One tip: For best results, use simple photos with relatively high contrast.

Technorati tags: ASCII Art

Top 10 Web Design Mistakes

Jakob Nielsen has released his annual Top Ten Web Design Mistakes. They are:

1. Legibility problems
2. Non-standard links
3. Flash
4. Content that's not written for the web
5. Bad search
6. Browser incompatibility
7. Cumbersome forms
8. No contact or other company information
9. Frozen layouts with fixed page widths
10. Inadequate photo enlargement

Most of these are familiar problems...a few might require clarification. The discussion of each item on Nielsen's webpage will provide enlightenment if you're interested.

Just for the record, this blog "suffers" from five of the complaints listed by Nielsen, but none of the remorse that list is intended to engender.

Technorati tag: Website Usability

Note to IE Users: Your whining has been noted

I've caught a bit of flack over the flaky behavior of the Gazette's blogroll when viewed in Microsoft's Inept Explorer™, so I've made it my burning quest to track down and delete every copy of IE on the planet. No, actually, I don't have that kind of time. What I've really done is tried a couple of experimental tweaks in the Gazette's style sheet and the results are somewhat promising.

If you're using IE (especially in Windows...as if there are any Mac users still in thrall to IE), take a gander at the blogroll and let me know if the psychedelic effect is still noticeable. It's gone on my little IBM running IE 6, but I'll feel better if I get some independent confirmation.

What did I do? I took out the negative bottom margin on the block-level link markup. I was using the negative margin to try to bring the links closer together, albeit without much success. Whatever coding Blogrolling.com serves up with the blogroll links, it doesn't respond well to CSS. There's probably something in the Blogrolling preferences that provides a better fix, but I haven't stumbled across it yet. Anyway, it appears that IE chokes on the negative margins, while most real browsers handle them without a hitch.

So, how about it (Shannon)? Any improvement?

A List Apart, v. 4.0

If you build websites, you know about A List Apart because, after all, it's for people who make websites. It's also newly redesigned and newly updated, after a three-month hiatus. Slick? Certainly. Informative? Indubitably. New URL? Uh, yeah. What's up with that?

Even if you don't make websites, this article about making PDFs accessible might still be worth your time.

Tip o'the hat to Joshua Porter at Bokardo, who beat me to the link (I just checked last night). [Joshua, the "interesting effect" on wrapped titles also occurs in Firefox.]

Usability Hall of Shame #2: SBC (Again!)

What is it about the world of telecommunications that seems to attract corporations who are, frankly, lousy at communicating? When last we visited the Gazette's Usability Hall of Shame, the initial inductees were CellularOne and SBC Communications, the former gaining recognition for its website blunders and the latter for obfuscatory achievement in allowing people to opt out of its policy of sharing its customers' account information.

In this latest round, we find that we're irresistably drawn to SBC, this time for the way its online account management website seems to be at war with itself.

I've tried several times to use SBC's website to add caller ID to my second phone line, a line that shows up every month on our bill. However, I keep running into a couple of barriers to success.

First is the annoying-but-tolerable situation that occurs when, after logging into my account, I click on the link that reads "Shop for Services." Right off the bat, even though I'm already logged in, the website asks for my area code. Well, that seems unnecessary, since I'm already logged in...but, what the heck? I enter my area code (432) and click the go button. And here's the response:

Never mind that the 432 area code is even part of my account number (the account to which I'm currently logged on). Never mind that 432 has been the area code for this part of the country for more than a year. SBC's database refuses to recognize it. I finally have to resort to using the old area code (915) in order to access options for my account (which, again, begins with 432).

This is where things get really interesting. Now I'm in the shopping section, and it helpfully tells me that I'm shopping for my primary number, which we'll call 432-699-aaaa. There's a link that reads "Shop for another number" so I click it, in order to shop for new services for our second line, which we'll call 432-699-bbbb. Here's the message the SBC website provides:

Oh-kaaay...I wonder why I'm billed each month for that number if it's not associated with my account?

The end result is that I cannot find a way, via the website, to order the additional service for the second number.

Eventually, I'll guess I'll have to resort to speaking with an actual person to get this transaction completed. I doubt that I'll ever get an answer to why the website works (or doesn't work) the way it does. So, for now, I'll have to be content with knowing that SBC Communications is the first multiple inductee into the Usability Hall of Shame.

Technorati tags: Website Usability | Website Design

One thing leads to another

Update (8/15/05): I've removed the mysterious design element alluded to below. It clashed with the new template, and was tackier than absolutely necessary.

First, let me confess how nice it is to sit and just follow links without glancing at the clock to see if it's time to post something whether I'm ready or not. Ahhh...

Patti has reskinned White Pebble (she should work for the IRS badda-boom) and she's now so minimalist that she's in danger of not being there. Which, I presume, is the whole point. Anyway, I was this close to using that exact same layout, so I guess I'm back to the drawing board. I'm not above stealing someone else's design, but I prefer to wait a few days before doing it.

Actually, the template she's using comes from Fernando of Fernando_Graphicos, whom you know is cooler than you and me combined because of the little underscore thingie connecting the words. FG employs the rarely seen design strategy of suggesting that you download and install a free font from its site so you can view it in the manner to which it's become accustomed to being seen. I've done this, but I don't want to close the twelve tabs I have open in Firefox in order to restart it so that I can use the new font. Maybe later.

Anyway, one of the links on Fernando_Graphicos led me to another site which provided me with the tools to make a simple design change to this page. Have you noticed it? It only works if you're on the Gazette home page, by the way. I'm not that committed to it.

Now, I don't usually go out of my way to belittle the software choices that other people make, but when I make an exception it's always for Internet Explorer. Still, I understand that some of you don't have a choice, for whatever reason, and thus I'm not dogmatic about it.

However, if you have a blog and you do enjoy belittling IE on a continuing basis, pop over to this page and grab your choice of banner. Heck, they even provide the CSS and HTML to fire it up. And here's the guy who started it all.

Technorati tag: "IE is bad...veddy, veddy bad"

And speaking of the Starbucks logo

Can you draw it from memory? OK...close your eyes and draw it. Wait; that's probably not the best technique. What I mean is, don't look around, in case the logo is in sight, and see if you can sketch it.

It's among the most ubiquitous logos in the Western world -- I suspect that Nike, Coca-Cola and McDonald's are still more prevalent worldwide -- but unlike those others, the Starbucks design is identified but not assimilated. It violates at least a couple of the generally accepted tenets of logo design, being overly busy and complicated, and not really meaningful in terms of representing the company.

On the other hand, how many mom-and-pop (and even larger) specialty coffee shops and chains have adopted a very similar (in terms of shape and colors) logo? From a practical perspective, it succeeds.

But, I still bet you can't draw it.

Color Theory for the Color-Blind

Digital Web Magazine has a useful article for anyone who is "color-challenged," and I put myself squarely in that category. The author makes an interesting argument that, in the computer age, one does not actually have to see colors in order to use them effectively.

I happen to agree with the author, even though I can understand why the artists in the audience are lighting the torches and greasing the rails. But, we're not talking about artwork here; we're talking about how to combine the members of a very limited color palette in ways that have been time-tested and even scientifically proven to evoke certain reactions.

I have in my possession a volume entitled "Color Harmony Workbook." It consists of a series of color swatches grouped and categorized into themes: Powerful, Romantic, Welcoming, Magical and so on. Each color has a number; each number corresponds to a CMYK value, which in turn can be converted into an (approximate) RGB value for web use. It's not art, but it's useful and legitimate technology, and it works.

I wish I had an artist's eye for colors, but I don't...an unfortunate but not fatal biological fact. As the author of the Digital Web Magazine article points out very effectively, there are good tools for overcoming such challenges.

Customizing Photoshop's Web Photo Gallery

Part of the fun of working as a freelance web designer is that I'm continually challenged by clients who want me to translate their vision into reality. I long ago got comfortable giving this answer to many of their questions: "I'm not sure how to do it, but I'll try to figure it out." And in the process of "figuring it out," I invariably learn something new that will help me and my clients in the future.

I experienced this again this weekend as I was gnawing on a request by a client to come up with an easy way of creating a gallery of photographic proofs that could be reviewed online by her clients. As a professional photographer, she also wanted to be able to put a watermark on each of the images.

I hit upon Photoshop's automated Web Photo Gallery feature as the best way to proceed. It's relatively simple, allows a fair bit of flexibility as far as the image processing goes, and it also has a very competent automatic watermarking feature built in. The only problem is that the default styles are, well, ugly...and we wanted something that would match the cosmetics for the rest of the site.

One option would be to edit the Gallery HTML files once they were generated, but that seemed like a lot of work. With up to 300 photos per proof gallery, even a global edit would be time-consuming.

Fortunately, there's a much better solution, one that I never knew existed: creating a new Web Photo Gallery template for Photoshop to use.

If you've used this feature of Photoshop, you know that it provides you with a choice of half a dozen or so templates. Each of these templates is stored in a directory within the Photoshop application directory; for Photoshop 7 (Mac), the templates are located in the Presets directory, inside a directory with the non-intuitive name of WebContactSheet. (In the latest version, CS, this directory name has the more appropriate title of "Web Photo Gallery.")

Creating a custom template is as simple as duplicating one of the existing template directories whose basic layout you like, renaming it to match your project, then editing the various HTML files within it to put them inside the cosmetic "wrapper" that applies the look and navigation of the site within which the gallery will reside.

Photoshop uses a series of variables to identify things like next photo, previous photo, photo index, image title, image date, and so on. In fact, these variables are very similar to those used by most blogging programs, and if you've worked with blog templates, you'll feel right at home modifying Photoshop's templates. The variables use percentage signs as opening and closing "tags," so they're easy to identify.

Once you've created your new web gallery style, it will show up in Photoshop's dropdown Styles menu the next time you use the Web Photo Gallery feature.

For more detailed explanations of the function of the various HTML files used by Photoshop, and the associated variables, take a look at this tutorial provided by Private Web Designer. With a little experimentation, you'll be able to easily create photo galleries that blend seamlessly with your website.

Technorati tags: Photoshop | Web Photo Gallery

Too cool to click?

Dontclick.it gets major props for imaginative use of a domain name (almost as good as del.icio.us), but it leaves me scratching my head as I wonder "why?"

I mean, it's not like clicking a mouse button is so much harder than moving a mouse in a certain pattern in order to navigate a website. In fact, for me anyway, I found that clickless navigation (via the Mouse Gestures extension, here for Firefox and here for Mozilla) was a real pain. I was constantly jumping somewhere else unintentionally as the extension misinterpreted my mouse movements as navigation commands. After about a week, I disabled the extension.

Dontclick.it is, however, an interesting experiment in how we interact with our computers, and how our intuition may or may not be sufficient for optimizing that interaction. Most of the navigation on this Flash-based site requires only hovering over a link (if you can find the link), but there are some experimental areas where the equivalent of mouse gestures is employed.

In the end, however, it's yet another solution in search of a problem. YMMV.

Tip o'the beanie to Morfablog, which continues to be the most interesting blog that I can't read.

Technorati tag: Mouse Gestures | User Interface Design

Usability Hall of Shame

One of the effects of my foray into website design is that I've gained a heightened sensitivity to design elements in all areas, from the perspectives of both aesthetics and usability. And what I've realized is that we encounter a lot of bad designs in our daily lives. These designs are often perceived only peripherally, impinging on our senses like a dull headache that's been around for so long that we no longer notice it directly.

Well, I'm tired of suffering silently as a result of dumb decisions on the part of people who should know better. Henceforth, I plan to document the offending products, processes or even people (in a generic way, of course) which add to the collective angst and stress of living in a modern world. Do I expect anything will change as a result of these mini-rants? No...but I'll feel better, in some small but important way. So, I present to you the Gazette's Usability Hall of Shame.

The initial inductees both come to us from the wacky world of telecommunications, from SBC and CellularOne, to be exact.

CellularOne is a multi-billion dollar corporation, and yet it has managed to create and maintain an online account management system that would be cutting edge if we were still living in, say, 1998. The website won't let you save your login information and you can pay bills online only via credit or debit card (as long as you have a Mastercard, Visa or Amex; no Discover, please. When it comes time to enter your payment information, the input field for the credit/debit card number has been designated as a password field, meaning that instead of being able to see the 16 numbers you're typing, you see a string of black dots. If you make a typo, you won't know it until the transaction is rejected. Note to CellularOne web designers: password fields are for passwords.

Let's move on to SBC, another multi-billion dollar corporation who cares about protecting customer privacy so much that they just sent out a letter letting us know that they really, really care. However, they're still going to share our "customer proprietary network information" with related companies unless we call a certain phone number by a certain date and follow the instructions given to us by the computerized voice on the other end of the line.

I decided to opt out of SBC's "policy of caring" and so I called the number, where I was instructed to enter my phone number, area code first, followed by the seven digit number...followed by the three numbers that follow my phone number as it appears on my bill. What?! Why did they think it was unimportant to mention that in the letter? Of course, I had to hang up and go find a bill, and start the process over (which, by the way, i