It was quite a challenge not to overdo it, especially when the existing design is so familiar, and both — the client and us — were so eager about the process. However, the goal was not to make something prettier or different or wild (which would result in a short-term hype), but instead to focus on tiny little details. After the last relaunch, significant number of pages were published ad hoc and that parts needed our attention the most.

The feedback from Seekandhit clients and visitors was of a great help. Not the “I wish you had…” kind of complaints, but rather relevant comments, for instance “I didn’t understand how X service works or how service Y can help me.”. Mario Frančešević, the Seekandhit CEO also delivered very useful brief based — among other things — on visitors behavior tracked by Google Analytics.

The cornerstone for this iteration were detailed screenshots of actual adverts and illustrations for the most prominent advertising features. That was especially important on Services Overview page, where some visitors had difficulties understanding the differences between various advertising platforms.

Another roadblock for visitors was Project Questionnaire, which had too many (specific) questions than is normally required for the initial contact. SeekandHit tries to custom-tailor campaigns for each client, so the obvious shift was to simplify the web form and provide the prospects with a brief overview of the process in a form of numbered steps.

Now let’s see the results with real-life users. Fingers crossed.

Download v.0.17 and as always send your feedback!

Obviously, this article is not for Terminal savvy programmers, but rather for the rest of us who are using drag and drop web server packages such as MAMP.

I guess you already have MAMP installed on your local computer, most likely in /Applications/MAMP. If not, install it before you move on to the next step.

First, download ImageMagick for Mac OS X and unarchive it to /Applications/MAMP/bin/ImageMagick.

Next, open up Terminal.app (don’t be afraid, it won’t bite you), and enter line by line:

$yourmacname> export MAGICK_HOME="/Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1"
$yourmacname> export PATH="$MAGICK_HOME/bin:$PATH"
$yourmacname> export DYLD_LIBRARY_PATH="$MAGICK_HOME/lib"

Test if everything works up to this point:

$yourmacname> cd /Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1
$yourmacname> convert logo: logo.gif
$yourmacname> identify logo.gif
$yourmacname> display logo.gif

Last: browse to /Applications/MAMP/Library/bin and open envvars file with your text editor. Change the two uncommented lines, i.e. DYLD_LIBRARY_PATH="... and export... to following:

DYLD_LIBRARY_PATH="/Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1/lib:/Applications/MAMP/Library/lib:$DYLD_LIBRARY_PATH"
export DYLD_LIBRARY_PATH

If you are using ImageMagick in your server-side application, be sure to set the correct path, for instance in PHP:

define('MAGICK_PATH', '/Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1/bin/convert');

Restart Apache in MAMP and you’re done.

Drop this inside the loop in single.php template, I suggest right behind the the_content() call. See it in action on the live site.

Use it as a base for more advanced features, or simply c/p. It’ll work :)

<?php

    $max_articles = 7;  // How many articles to display

    echo '<div id="related-articles" class="sidebox"><h3>Related articles</h3><ul>';

    $cnt = 0;

    $article_tags = get_the_tags();
    $tags_string = '';
    if ($article_tags) {
        foreach ($article_tags as $article_tag) {
            $tags_string .= $article_tag->slug . ',';
        }
    }

    $tag_related_posts = get_posts('exclude=' . $post->ID . '&numberposts=' . $max_articles . '&tag=' . $tags_string);

    if ($tag_related_posts) {
        foreach ($tag_related_posts as $related_post) {
            $cnt++;
            echo '<li class="child-' . $cnt . '">';
            echo '<a href="' . get_permalink($related_post->ID) . '">';
            echo $related_post->post_title . '</a></li>';
        }
    }

    // Only if there's not enough tag related articles,
    // we add some from the same category

    if ($cnt < $max_articles) {

        $article_categories = get_the_category($post->ID);
        $category_string = '';
        foreach($article_categories as $category) {
            $category_string .= $category->cat_ID . ',';
        }

        $cat_related_posts = get_posts('exclude=' . $post->ID . '&numberposts=' . $max_articles . '&category=' . $category_string);

        if ($cat_related_posts) {
            foreach ($cat_related_posts as $related_post) {
                $cnt++;
                if ($cnt > $max_articles) break;
                echo '<li class="child-' . $cnt . '">';
                echo '<a href="' . get_permalink($related_post->ID) . '">';
                echo $related_post->post_title . '</a></li>';
            }
        }
    }

    echo '</ul></div>';

?>

In getting ready for HTML5 instead of element header:

<header>Site Name</header>

you’d write

<div class="header">Site Name</div>

For the inclined readers, here’s the HTML5 working draft. Quick overview of the element list will help you catch the train.

Definition lists, rediscovered

Definition list is a personal favorite HTML pattern for marking-up 2 or more related content elements. I found it especially useful when nested in list-items on search results pages and various tag/category listings. This raised a lots of controversy in the past and is still raising today, but I won’t go down that route now. Here’s just a quick example, just in case you don’t have a clue what I’m talking about:

<ul>
    <li><dl>
        <dt>Title</dt>
        <dd class="thumbnail"><img src="image.jpg" alt="" /></dd>
        <dd class="abstract">Lorem ipsum dolor sit amet...</dd>
    </dl></li>
</ul>

The all new rediscovered use of definition lists is with comments or dialogs, for instance Twitter conversation. It has always been it’s intended for this, but now with the dawn of HTML5 (or launch-break for many) it regains the popularity.

HTML4 specs say:

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

And here it is:

<dl class="dialog">
    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>Oh, it looks beautiful with shortcuts.</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>What? But we have full sentences over there!</dd>  

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>Huh?... but it breaks my grid?!
        F*ckin user generated content.</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>Another solution is: we don’t let users post anything.</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>No, we can’t do that neither.
        How about we ask
            <a href="http://twitter.com/programmer">@programmer</a>
            to shorten strings?</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>Clever idea! Go ask him!</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>I came with the idea, <em>you</em> ask him!</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>On second thought, I’ll tell
        <a href="http://twitter.com/cssdeveloper">@cssdeveloper</a>
        to think of something.</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>See? Problem solved!</dd>
</dl>

Is this making any sense? Or should we just stick with ordered/unordered lists and cite + blockquote pairs?

The trouble is — designers and developers don’t settle for current minimum, we are always into something new. So, by the time a giant vendor locks the feature list, a more flexible and agile competition goes miles away.

In the era of rounded corners/borders and transparency made possible purely with CSS, IE team missed to implement both, or at least in the form that wouldn’t require separate style-sheets files to conform to W3C guidelines.

I checked a few dozens of CSS-based web sites, and I’m not even sure anymore if everything works because developers payed special attention to IE 6 and IE 7, or is it because IE 8 is mature enough to render CSS layouts properly.

What works, what isn’t working

PNGs work without hacking. Rounded corners with CSS not. Text shadow — no. Alpha transparency is still possible only with proprietary filter property, for instance filter: alpha(opacity=10);.

Naturally, if you want your CSS to validate — this rule has to be extracted in separate file, preferably with conditional comments.

The old typeface order bug is still present, and easy font embedding with @font-face doesn’t work either, so if you prefer this method, read how to do it in IE.

Media Temple and some other hosting providers are using internal naming conventions for their database hosts (i.e. other than ‘localhost’). This upgrade enables backing up databases on such hosting setups.

Any feedback is appreciated!

This is the fourth part of the series, “Environmental friendly CSS”

In the previous episodes we’ve created a creative/technical brief, mocked-up design in Photoshop and decided on proper markup for the category cloud. Finally, we turn our design into web page element with some nifty CSS.

For those of you who better understand from live examples, here’s a little treat for you. If you’re beginner in CSS, read on.

From the outside to the inside

It is common sense to most of us, but nevertheless here’s an advice — don’t get into details too early, because you will have to go forth and back in the code too often.

Let’s pull the markup on stage:

<div id="categories">
	<h4>Most popular joke types and categories</h4>
	<ul>
		<li><a href="#">Political jokes</a></li>
		<li><a href="#">Professional humor</a></li>
		<li><a href="#">Mathematical jokes</a></li>
		<li><a href="#">Ethnic jokes</a></li>
		<li><a href="#">British tell jokes</a></li>
		<li><a href="#">Self-deprecating humor</a></li>
		<li><a href="#">Blonde jokes</a></li>
		<li><a href="#">Redneck jokes</a></li>
	</ul>
</div>

First set-up the main frame: set the dimensions and positioning of the <div id="categories">. The width is fixed, but we let the height stay flexible, so if more content gets in there in the future, the box won’t break.

If you haven’t done so yet, Download .PSD file and open it with Photoshop.

The rounded box has a width of 300px, so here the CSS goes:

#categories { width: 300px; }

The area below links to the bottom of the lowest character shadow is approximatelly 275px high. We add bottom padding, so there is always plenty of room for the comic dialog, no matter how many links is displayed:

#categories {
    width: 300px;
    padding-bottom: 275px;
}

Next, slice the top part of the box, name it box-top.gif and Save it in the same folder where the CSS file resides. It should look something like this:

Now add background to the box:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
}

Detail 1: the heading

We are not going to use the copy in the markup. Instead, there is a dialog bubble which is supposed to do the communication.

You’ve noticed that the bubble (i.e. h4) is off-set to the right. We have also set fixed width to <div id="categories">. With position: absolute we’re going to shift the bubble outside the box. It will not break layout because absolute positioned elements are out of the document flow, which means they don’t affect their surrounding elements.

We already made some room for the dialog with bottom padding. Now we only have to add one more rule to <div id="categories"> so we can position h4 relatively to the container:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

Remember, we left 275 pixels in height, so we use it to dimension the h4. Width is set to 100% by default, since h4 is a block level element, but we need to push it outside the box, so we also need to increase its default with from 300 pixels (100%) to 350 pixels.

Finally, we use bottom and left CSS properties to set coordinates.

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
}

Now, go back to Photoshop and slice the bottom of the box and the dialog. You should get 350 x 275 pixels .GIF. Name it — you guessed it — box-bottom.gif and Save it in the same folder where the CSS file resides:

Add background to CSS:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
}

And shift the remaining text to the left, by text-indent:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
    text-indent: -9999px;
    overflow: hidden; /* with this rule
        the container doesn't stretch to the left */
}

So far, so good: only the category links have been left to be done.

Detail 2: list of categories

At the beginning of the list styling, remove bullets and the default display behavior:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
    text-indent: -9999px;
    overflow: hidden; /* with this rule
        the container doesn't stretch to the left */
}

#categories li {
    list-style: none;
    display: inline;
}

Then we tell text to go into center, add some padding to ul element and remove possibly inherited margins:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
    text-indent: -9999px;
    overflow: hidden; /* with this rule
        the container doesn't stretch to the left */
}

#categories ul {
    text-align: center;
    padding: 1em 1.5em;
    margin: 0;
}

#categories li {
    list-style: none;
    display: inline;
}

And FINALLY add Comic Sans font to links:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
    text-indent: -9999px;
    overflow: hidden; /* with this rule
        the container doesn't stretch to the left */
}

#categories ul {
    text-align: center;
    padding: 1em 1.5em;
    margin: 0;
}

#categories li {
    list-style: none;
    display: inline;
}

#categories li a {
    font-family: 'Comic Sans MS', sans-serif;
    text-decoration: none;
    color: #fff;
}

Links are now perhaps too crowded, so we tweak them with some right and left padding. Also don’t forget :hover and :focus states:

#categories {
    width: 300px;
    padding-bottom: 275px;
    background: #000 url(box-top.gif) no-repeat 0 0;
    position: relative;
}

#categories h4 {
    position: absolute;
    height: 275px;
    width: 350px;
    left: 0;
    bottom: 0;
    background: url(box-bottom.gif);
    text-indent: -9999px;
    overflow: hidden; /* with this rule
        the container doesn't stretch to the left */
}

#categories ul {
    text-align: center;
    padding: 1em 1.5em;
    margin: 0;
}

#categories li {
    list-style: none;
    display: inline;
}

#categories li a {
    font-family: 'Comic Sans MS', sans-serif;
    text-decoration: none;
    color: #fff;
    padding: 0 .2em;
        /* equals to 2px if calculated font-size is 10px */
}

#categories li a:hover,
#categories li a:focus {
    text-decoration: underline;
}

Excellent! Here is the final working example. Go ahead, resize the text in your browser, or add more items — it won’t break. Everything is done except…

Different font sizes?

We miss one more thing — the different font sizes. But, it’s not done in CSS file, but with some inline HTML attributes. Basically, it all comes down to two approaches:

• a set of distinctive class names or
• inline styles.

Either way, you’ll have to do it server side or with JavaScript (both methods coming-up early in 2009.).

What have we learned?

With lean markup, but smart CSS, almost any design can be sliced to a high quality web interface. Not only that — we also managed to make it bullet-proof, so the various scenarios (text resize and different amounts of content) don’t break the layout.

This is the third part of the series, “Environmental friendly CSS”

In the previous episodes we’ve created a creative/technical brief and then mocked-up design in Photoshop. The next step in a process is creating solid XHTML markup. Let’s open it up with a question:

How to markup category cloud?

There are two simple approaches that usually comes to mind at first: a paragraph and an unordered list.

If we use paragraph with links, we wouldn’t probably miss it in terms of the default presentation across the range of User Agents. The thing is — if one is marking-up a ‘cloud’, it’s natural that all the links are inline, one after another.

— Let me think about it! Yea, I will just set text-alignment: center to that paragraph and I’m done. Great!

<div id="category-cloud">
	<h4>Most popular joke types and categories</h4>
	<p>
		<a href="#">Political jokes</a>
		<a href="#">Professional humor</a>
		<a href="#">Mathematical jokes</a>
		<a href="#">Ethnic jokes</a>
		<a href="#">British tell jokes</a>
		<a href="#">Self-deprecating humor</a>
		<a href="#">Blonde jokes</a>
		<a href="#">Redneck jokes</a>
	</p>
</div>

Not great! The above code is wrong. The ‘cloud’ is a visual cue, not the structural element. The category cloud is — in its essence — a list of categories, so the more suitable XHTML element would be unordered list.

It’s not a cloud, it’s a list

Cloud as typography or XHTML element doesn’t exist. Tag or category cloud is a visual representation of the list of categories. So let’s try semantically correct markup — an unordered list.

<div id="categories">
	<h4>Most popular joke types and categories</h4>
	<ul>
		<li><a href="#">Political jokes</a></li>
		<li><a href="#">Professional humor</a></li>
		<li><a href="#">Mathematical jokes</a></li>
		<li><a href="#">Ethnic jokes</a></li>
		<li><a href="#">British tell jokes</a></li>
		<li><a href="#">Self-deprecating humor</a></li>
		<li><a href="#">Blonde jokes</a></li>
		<li><a href="#">Redneck jokes</a></li>
	</ul>
</div>

Some novice CSS developers in the past argued that they were having troubles with list-items in tag clouds. In the last article (coming up next week) we will explain it throughout. But, it’s very important to learn how to shift from visual/CSS mindset to semantic/contextual XHTML mindset.

A little practice will get you there

When deciding on the XHTML structure for any given element, try to ignore the design at first. You will easily modify markup later if you find no other way to accomplish layout only with CSS.

Instead, dive-in under the surface and check the bare-naked content and context to decide what markup should do the job.

If creating XHTML snippets is a second nature to you, please share how do you fight your thoughts about how it’s going to look when choosing appropriate markup?

This is the second part of the series, “Environmental friendly CSS”

In the previous episode we’ve created a creative/technical brief. In this article we are going to use that document to design the category cloud area. For all busy readers, here is the final result:

The process

Most of the time, you’d want to first scribble some sketches, the old school way — pencil and paper. Yes, another Moleskine sucker.

As you can see, it all comes down to some quick ideas and metaphors in order to get rid of the noise. This way you can rapidly test proximity, contrast and alignment and set the overall look-and-feel.

Before I fired-up Photoshop, I knew I was going to have a dialogue between two characters on a window, carelessly enjoying the force of the nature. As a contrast, I planed another character who’s experience wouldn’t be so pleasant and optimistic.

See some different/transitional design versions:

Photoshop steps

The approximate Photoshop process goes like this:

• Rectangular marquee tool: for the dimensions (300px in width, random in height), set Guides
• Rounded rectangle tool (Shape layers toggled): draw main box (the window), set stroke
• Elliptical marquee tool: create random circles and ellipses by holding Shift to form the big cloud, fill selection with color.
• Pen tool (Shape layers toggled): draw lightning
• Type tool: write copy (tags and the label)
• Custom shape tool (Shape layers toggled): choose Talk 4 shape, draw dialog cloud, set stroke
• Elliptical marquee and Polygonal lasso tools: draw the character prototype using selections and then filling it with black.
• Duplicate the character and test downscaling, rotation and perspective (Edit → Transform).
• Set the characters in place, modify the one that is going to be hit by the lightning (I used a combination of elliptical selections and brushes for the face).
• Draw radiator with Pen tool (Paths toggled), then Make selection, and then Fill. If you draw the perspective freehand, it could take a couple of attempts to get it right.
• Pen tool (Paths toggled): draw a cable curve, then Stroke path with Brush (toggle simulate pressure checkbox).
• Draw grills, color them red, make it all looks hot (as in hot temperature) with Outer Glow.
• Select one of the inside character layer, then Select → Modify → Contract for about 2px, then create new Layer via Copy (Cmd/Ctrl + J), keep the selection toggled.
• Brush tool: set Opacity to very low, color: red, and gently draw the reflection on the character; repeat for the second one.
• Custom shape tool (Shape layers toggled): choose Heart card shape, draw a couple of hearts, variate size and opacity.
• Elliptical marquee tool: select some ellipses, fill with black, free-transform and lower the opacity.
• Make final tweaks.

Deliverables

To get a better picture about how it looks like in layers, download open source PSD file environmental-friendly-css.psd.zip (68 KB).

Movie anyone?

I’m aware that the written steps and a PSD don’t get you as close as you might want to, so at the end of the series we’re going to deliver a screen-cast of the whole process.

In a mean-time, please share your thoughts: Would you do it in the similar fashion? Or would you take totally different approach?

This is the first part of the series, “Environmental friendly CSS”

We want to keep this simple. The example scenery is a fictitious blog with jokes and funny videos. Furthermore, the build part of the series will be based on the WordPress theme template, so you’d feel more comfortable following the code.

Setup the context

In this series, we are about to design and style the tag cloud for a sidebar.
You’ve already seen those. If not, see the live example (bottom right).

Additionally, we are going to reuse some common HTML snippets to add a little spice to interface design. More on that in the next episodes.

The Content

For the main content area, let’s use a random internet joke and a random video from Youtube. We’ll also use some common blog navigation items and a search box.

For the tag cloud we have types of jokes: Political jokes, Professional humor, Mathematical jokes, Ethnic jokes, British tell jokes, Self-deprecating humor, Blonde jokes, Redneck jokes etc.

User experience requirements

Visitors of such a site would want to have a good laugh. The interface is supposed to support that, so we should invent some less formal labels and meta-titles to facilitate overall experience.

Instead of “tag cloud” we’re going with “OMG, look at the storm!”.

Non-graphic User Agent requirements

The web site should be accessible via mobile phones, so visitors can enjoy jokes while commuting or attending a boring meeting.

Regarding the later, the site should be easy to use with just one hand under the conference table — while you are pretending that you are participating in a meeting. Make it dead simple: linear with appropriate skip-to links.

The sentence “OMG, look at the storm” that we are using in full blown desktop browser is inadequate here. If we remove graphics, it’s silly to call a visitor to look at something that isn’t there. So we are going to name it something more clear and inline with the device. Read on.

Search engines requirements

Proper wording (keywords, phrases and labels) facilitate searching and getting the right search results. Users probably wouldn’t enter “joke tags” into Google search box, but they might search for “joke categories”, “joke types” or “popular joke types”.

Obviously, what is technically correct isn’t necessary user-friendly. Try to think about the phrases a random seeker would use to get to the content you are offering.

Said the above, let’s settle down with “Most popular joke types and categories”.

Summary

It’s always nice to create a short document which will outline your research in a form of Interface brief for the designer and/or front-end developer.

Don’t make it too fancy, stay focused, give a little background and then describe elements. See sample Interface brief (17KB PDF).

In the next episode, we are going to deliver interface design mockup, based on the requirements outlined in this article.

Any Comments? Too basic, too advanced? Fire at will!

Important: This article is outdated. Backup2Mail is moved to its own web site — www.backup2mail.com.

Quick intro for the first-timers: Backup2Mail automagically creates backup of your database and sends it to your mailbox with a little help of Cron.

The script can now be tested without the Cron, prior to moving it to its permanent location.

First, download the .ZIP visit Backup2Mail homepage, download the latest build, unpack it, and change configuration settings.

Upload folder in your public web folder to test it. Open the file in your browser.

If you see the black page with green letters and there’s no errors, you are good to go. Move it to protected area (that means delete from public folder).

Have a nice backup.

They are showing off their grid and maratz.com joins the party.

For the geek in you, turn off JavaScript and reload the Ezadar cover.

There are times when those so-called “ugly fonts” work extremely well.

And if the target group loves Comic Sans, they are going to get the Comic Sans. Using particular font or avoiding it — based on a personal preference is utterly ridiculous. That is not designing, that is creating an artwork.

Use what your users love. Use what communicates best.
Even if that’s Comic Sans. And try to live with it.

TODO (me):

• contact page
• about page
• favicon done.

TODO (you)

• enjoy!

What? Where did you get that?

The Accessibility Superhero Detective Joe Clark was hired to discover the truth about the subject. We all hoped the situation is not so dramatic, but boy — were we wrong!?

Yea, but why exactly captioning sucks?

• Not enough of it
• They don’t listen
• It’s hard to read
• Deaf people settle for crumbs
• The wrong kind
• The fox is watching the henhouse
• There are no standards

Occasionally, people ask me to create XHTML/CSS template based on provided .PSDs. Most of the time, such projects are pretty straight-forward — I tell the hourly rate and the estimated hours. The prospective client then accepts the offer or not.

It could be zillion reasons why clients reject offers and I’m used to some neutral (read: polite) arguments, like “It exceeds our budget” or something like that. However, today I received an interesting response:

“You are a little-bit too expensive, XXX is an hourly rate for a programmer.”

Funny, huh? Or sad?

Why on Earth would anyone compare client-side coding with programming. What is it that people (or just this particular client) think some cog of the same engine should be valued more than others?

Is it because the work of accessibility consultant, CSS coder, SEO engineer or usability expert is not something you can point your finger at? Or is it ‘cause people tend to care for web standards in a way of questionably increased initial exposure on endless, but completely irrelevant CSS showcase lists?…

1. users are tagging recipes
2. advertiser reserves a desired set of tags
3. in this case, the company brand “Eva sardine” reserved the following tags: fish, shrimps, main course, sea food, sea, … eva (the name of the company brand)
4. if the recipe is tagged with some of those preselected tags, there is a relevant ad displayed.

Clever, huh? But the most interesting part is the following edge case.

Update: “Eva sardine” is actually a brand, not a company. Spotted and pointed to by lekke.

Advanced features only make sense if they increase the accuracy and reduce time spent on a task. Advanced options made up-front, without real demand from the user-base are often only something glossy and shiny. Inviting users to learn a feature which main purpose is to be a cool widget that differentiate the application from the others — will fail for one very simple reason.

The kind of users who would appreciate such a feature are often anxiously seeking for the next gadget once the master the current one. In most cases, those visitors are not here for the content, but for the context, most notably the coolness factor. Unless the coolness itself is your product, you are probably not targeting those users.

Add advanced feature when you are absolutely sure you need it and after you have real user’s feedback.

Advanced feature should be gently introduced once the user is familiar with the basic functionality. In desktop applications such advanced options are often hidden in the ‘settings’ or ‘preferences’ panel. In web application those could be placed somewhere in ‘my profile’ area. However you decide to do it technically, don’t create the interface noise by polluting the content.

With well known web services, like Amazon, the extensive loyal user base is a good excuse to place an advanced feature right up-front. With a new project which need yet to prove its’ credibility, one has to be careful not to reject valuable first comers by unnecessary complicated interface.

Related reading

• Alertbox: Feature Richness
• Good Experience Best-of