At that time I was much more involved with ASP 2.0 and only heard about PHP. But since then — my focus shifted far, far away from ASP, and we decided not to fix the ancient codebase, but to move the backend to WordPress.

With the migration, we had to take care about the new URL scheme. The language part of previous scheme was full-length language name and therefor clumsy. The transition had to be seamless, so we don’t cut-off visitors landing from Google.

The solution is quite simple. All pages are organized as a child pages of two parents: /hr/ and /en/. We created two additional first-level pages — /hrvatska/ and /english/ — and set both pages’ templates to “Page Redirect”. This is how it’s done step by step:

Step 1: Create page template

In your WordPress theme folder create new blank file: page-redirect.php, paste the code below and save it. Keep in mind that there’s no space left before <?php or after ?> or it might throw you an error.

<?php
/*
Template Name: Page Redirect
*/
    header('HTTP/1.1 301 Moved Permanently'); 

    $redirect_url = get_post_meta($post->ID, 'redirect_url', true); 

    if (!empty($redirect_url)) {
        header('Location: ' . $redirect_url);
    } else {
        header('Location: /');
    }
?>

Step 2: Add New Page

Create new page in WordPress (Pages » Add New), and paste the old URL into Permalink field — right below the title field.

Step 3: Add custom field

In Custom Fields box, enter new custom field, named redirect_url and set the value to new URL.

Step 4: Choose page template

In attribute box (usually on the right hand side), there is Templates drop-down. Select “Page Redirect” and hit Publish.

Type the old URL into browser’s address bar, and it should be instantly redirected to your new URL. WordPress will also automagically redirect all child pages, so in my example /english/marble/ redirects to /en/marble/.

Once you have the top, subscriber-only category, you will most likely not change it, and therefor you can use its category ID as an argument to construct your query, for instance query_posts(cat=-3).

This should exclude all the post from the category with ID 3 from the listing. However, this doesn’t exclude posts in child categories, and if we knew all the IDs, we’d expand the call to function like so query_posts(cat=-3,-4,-5).

In a real life, there are two possible issues. First, it’s a bad practice to rely on IDs for child categories, and the second one is that the default argument syntax cat=-3 won’t always work, due to plugins incompatibilities.

How to get the child categories IDs?

We use get_categories to get the sub categories. In the following example I first created a string, which you’d use with query_posts(cat=' . $subcat_string), but aforementioned issues with plugins could require a different argument construction.

<?php 

    // In this example, the parent category ID is 3
    $subcategories = get_categories('child_of=3');

    $subcat_string = '';
    foreach ($subcategories as $subcat) {
        $subcat_string .= '-' . $subcat->cat_ID . ',';
    }

    // we also include parent category ID in the list
    $subcat_string .= '-3';

    // and then call query_posts
    query_posts(cat=' . $subcat_string);

?>

A slightly more advanced (for designers at least) query_posts() call is to use an array for arguments. Quite often where cat=-n doesn’t work this should fix the problem. I believe this is due to plugins incompatibility, but it could be also due to WordPress itself. Whatever the problem is, this is one way to handle it:

<?php 

    // Subcategories IDs as an array

    // In this example, the parent category ID is 3
    $subcategories = get_categories('child_of=3');

    $subcat_array = array();
    foreach ($subcategories as $subcat) {
        $subcat_array[] = '-' . $subcat->cat_ID;
    }

    // we also include parent category ID in the list
    $subcat_array[] = '-3';

    // and then call query_posts
    query_posts(array('category__not_in' => $subcat_array));

?>

Hide posts from the members-only categories

To check if a visitor is logged-in or not, you’d test $user_ID variable. If the visitor is not a member, we display latest articles sans members-only category. For signed-in users we display the default query results, i.e. all articles from all categories.

<?php

if (!$user_ID) {

     // we created an array of categories to exclude:
     $subcategories = get_categories('child_of=3');
     $subcat_array = array();
     foreach ($subcategories as $subcat) {
         $subcat_array[] = '-' . $subcat->cat_ID;
     }
     $subcat_array[] = '-3';

     // Here, we set $limit for showposts (so it can be redefined via admin if needed)
     $limit = get_option('posts_per_page');

     // ... and $paged (to tell WP which page in the Loop is current)
     $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 

     // then populate arguments
     $args = array(
         'category__not_in' => $subcat_array,
         'paged' => $paged,
         'showposts' => $limit
     );

     // and call the function
     query_posts($args);

     // the general loop code goes here

}

?>

Got something to add? Speak up!

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?

How we decided about holding web design workshops?

We found that there is a huge gap between top guns in the industry in this part of Europe and beginner-level CSS coders. At the moment it’s quite difficult to find at least an intermediate level client-side recruit. It’s even harder to hire a CSS rock star.

Various courses don’t provide web standards training at all, and only a few colleges in Croatia — by the share enthusiasm of the individual professors — barely introduced web standards through brief presentations and seminars.

Quite obviously, what’s current on the Internet now, will be outdated by the time it gets approved by the ministries responsible for the scholarship programs. And the materials will be even more obsolete when those students leave their schools and colleges in search for a job.

Why focusing on a single segment?

We decided to go with single topics, because we feel this is the best value for the money. We have been visiting conferences in the past, with broader range of presentations: from strategy, to branding, to user experience, to design, to CSS, to JavaScript, to server-side programing, to server management — all in one.

Not everyone is interested in everything. It’s rare that a web professional is intimate with all of the planes, so we are focusing on a single topic one workshop at the time.

Are you on your own?

Luckily not. We still have client work to do, so for the sanity, we formed some awesome partnerships:

• Plus hosting covered operational costs and as a result provided lower registration fees.
• Ivan Brezak Brkan is handling all the administrative/promotional tasks.

Misc F.A.Q.

• Q: Do you plan to hold workshops other than about Web Standards, HTML and CSS?

  A: Yes, we do — some of the next workshops will introduce you to Design for Web, User Experience, Usability and Accessibility, Typography for Web, DOM and jQuery, WordPress Themes, Content Strategy and Production, Small Business Management, Client Relationship Management etc.

• Q: Do you plan to visit other cities than Zagreb?

  A: Yes, we do — please DM @webradionice and we’ll consider bringing the show somewhere near you.

• Q: Are you giving a certificate?

  A: No we don’t — we don’t test participants at the end of the workshop, hence there’s no certificate. We are never meant to be the judges or appraisers, we are aiming to educate people in a way we’d like to be educated — telling a real stories from the trenches.

• Q: Alright, but what do I get then?

  A: You get the experience, tips and best practice advice from the experienced professionals.

Mini Seedcamp Ljubljana aims to connect the startup communities in Albania, Bosnia & Herzegovina, Bulgaria, Croatia, Greece, Macedonia, Montenegro, Serbia, Slovenia and beyond!

Overheard: Seedcamp is a competition for prospective IT and web entrepreneurs. Each of first five teams gets an investment of 50K Euro — plus: three months of training and business development lectures in London, UK — held by expert consultants from Google, Microsoft, Mozilla and Facebook.

Official site: Seedcamp Ljubljana 2009.

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.

BarCamp is a free event, there is no entry fee, but the attendees are encouraged to participate with questions and open discussion. Take a look at the schedule, consider submitting with your own presentation/panel and don’t forget to grab your seat!

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!

Buckle up, ‘cause we are introducing Environmental friendly CSS, a four article series, that aims to shift any novice and CSS expert alike — into ecologically aware client-side developer. The series is based on a real-world web site, developed as we speak.

The first article is expected this Thursday morning CET, and the others over the next three weeks. Here is the series overview:

1. Prepare your content and interface copy

   Think about the context, the content, the real users, accessibility and search engines.

2. Visually design information elements and user interface

   Go wild in your graphic editor to lead the eyes around the layout.

3. Mark it up!

   Create sound and solid markup, with accessibility in mind — without looking into the visual mockup.

4. Create bullet-proof, eco-friendly CSS

   Use CSS skills to recycle accessibility-related markup into visually attractive hints.

For all the fans out there: we are going to disclosure Director’s Special at the end of the series.

Clients are usually not familiar with the complexity of certain features. Something that occupies small area on the interface — for instance, a newsletter subscription form or “send to a friend” — might be more complex than the rest of the site.

RFP full of features

When glancing over the request for a proposal that is full of tiny little add-ons, you already know — it will boost the quote up to the sky. Most of the functionalities are in their original form simple and straight-forward, but each project has it’s own twists. Ideally, each detail have to be tailored to perfectly fit the rest of the site.

When the prospect is able to bare her requirements down to absolutely essential parts, the “core”, you are half way there.

This is not a single player match. We as an experienced professionals should help and educate clients — and finally: make them confident in our abilities.

Depending on the nature of the relationship with the client, ask simple questions:

— “If you’d ask someone to create a web site as a favor, what would be the absolutely necessary parts?”.

Break it by milestones

It is a win-win situation. Quoting a Must-have list is so much easier! When you’re both settled with the features/price, call it a milestone, a phase in a process.

During the first phase, you’re about to show the client that you are worth her money. Release this first “essential” version. If she’s satisfied with the results, price and timeline, you gained the trust.

From that point on, discussing the Nice-to-have features is a breeze.

Why now?

Tin is now 4 months old and has been diagnosed dystonia. It’s nothing as fatal as it sounds, but we still need to stay focused and keep up with the physical therapy. If we do, everything should be fine by his first birthday.

Apart from being a web enthusiast, I’m also a kinesiologist. While Mrs is a genuine super-mom who handles both of our boys well, I need to help as much as I can to develop Tin’s motor abilities. And who fits better than his own father?

Going freelance will hopefully provide more schedule flexibility, in opposite to company lifestyle, where you’re expected to be available nine to five.

What’s next?

I’m not leaving Adria Media Zagreb completely, though. We managed to find a win-win relationship. I will still collaborate on a new projects to join the company blockbusters Croportal, Roditelji and Story.

If you are from Croatia and find the above sites exciting, check out the 2 new job openings.

I also have an extensive list of faithful clients from all around the globe, which should keep the cash flow steady. If you can see me helping your project, shoot me a message.

Last, but not least, I’d love to finally bring to life some of the ideas that have been laying around for a while. A couple of pro-bono PSDs are also waiting for a chop.

— Bring it on!

We weren’t aiming to teach them CSS or any coding techniques for that matter. We were after explaining technical limitations on the web. It was all about a few important points, live explained with Typetester and presented in a form of a checklist (PDF, 24KB).

The group was already familiar with the design theory. I was quite astonished how well they handle typographic vocabulary. They were, on the other hand, disappointed by the fact that there’s only quite a few fonts they can use for body copy in order to cover the majority of visitors.

The students were interested in learning about progressive enhancement of a web page with image/Flash replacement methods. Once I explained structural layers and how site mechanics work in general, they asked a couple of smart questions, which lead to an interesting discussion. Mission accomplished.

Jon Tan’s article Flipped Types was a great help to explain the major difference in approach when designing for print vs. web.

The summary of the morning is best explained by one of the students’ genuine eureka conclusion:

“Oh, God! So it basically means, we have to think about many different scenarios when designing for web?”

When I land to a site, I’m interested to first read About us section, so I can visualize author while browsing her showcase. It helps me better remember people, and more easily get back when I need to. Authentic copy helps. Photo, too. Don’t make it generic.

Don’t copy and paste sentences and phrases you found on other sites. Don’t claim you’re something, you’re not, hoping that such facts would bring you more work. Rather than that — show us what would you like to be sometimes in the future, and someone might give you a chance.

It’s okay if you don’t have experience, it stinks if you provide false or generic information.

The quantity of experience is not the essential part of your resume. It’s the progress, and the current state of you. If you have tendency to develop new professional interests and enhance personal grow over time, then you have an advantage over a person who sticks at the same level over years, just switching companies.

If you are your own copywriter, let friends and colleagues randomly describe you. You’ll have enough raw material to chop off the interesting chunks of text and spice it up with your own writing style.

1. Will we be able to make money? We’re a business. We have mortgages and tuitions to pay. Plus, if we don’t make some cash once in a while, how will we feed our habit of continually screwing around?

2. When we’re done, will we be proud of the work we’ve done? Slaving for months on a project only to not want to show it to anyone when you’re finished just plain sucks. No amount of money can make that feel better.

3. Can we learn a little something new along the way? Executing the project has to make us smarter and help satisfy our curiosity, which we think is our greatest asset.

I want to run faster.
Get brief. Set goals. Score. Get out.
Wet dreams.

Experts are cursed. In my experience — the more a person knows, the more she is unsure when asked for an approximation in terms of time for the task at hand.

This can be quite challenging situation, since the majority of clients/investors are not able to deliver fully developed specs. Most of the time, they just tell you what they envision in general, and you’ll have to figure it all out by yourself. If you are not reacting promptly, in many cases you loose a prospect.

In fact, prospects are right. They hire you to create magic from their random thoughts. The only problem is — you can’t charge your know-how separately. But I digress.

All professions on the web are infected by the correct estimate syndrome. Perhaps because I’m at the front-end side of things, I perceive back-end people are more into this epidemic than designers or front-end developers. I rarely ask front-end people, since I already know what can be done at what cost and in what time. So take my claims with a grain of salt.

Designers as a more irrational people are giving the estimate by their gut feeling or quite often already have established prices for various deliverables.

Programmers are rational and concrete, so they are always trying to give the exact estimate. I dare to send a message: we need such a precision only and exclusively in your work. The time programmer spends on discovering how things work, should be calculated in the estimate. I strongly believe that anything can be disassembled in matter of days, if not hours.

Features that clients request are almost always invented before. Clients are occasionally surprisingly informed and educated, but very rarely with a true authentic concept. My logic tells me — we are re-factoring what have already being adopted on the web. We should be familiar with 95% of the requested features or tasks.

Unless it’s something completely new. People are telling me The new things are fun to work with. I hear that all the time. So I have a second-guess that the estimate in terms of billable hours is not applicable here.

As I see it — you work repetitive tasks for money, while you innovate for fun and personal growth (and so you can make more money later, when the feature becomes popular request or part of a standard package).

For any task, there is the worst case estimate, the super-optimistic case estimate and the estimate by experience. Experienced expert should know:

• what can go wrong
• how fast she can do it, if she is in the right mood
• how much time and effort some similar task(s) took her in the past

This is, of course, my point of view. What’s your approach on this?

Addenum

Snook lists the most common tasks a true web developer has to go through in A Web Developer’s Personal Projects.