What’s the lesson for this week? Describe the purpose of your website in one fell swoop and you’ll go a long way. Of course, it helps to have a great design as well.

Designs of the Week

Definition: the use of a word in the opposite sense of its proper meaning.

Two things I really like here. First, the colors. Seafoam green to light yellow is the last color combination one would come up with, but it works well. Second, the black and white illustration as top header background. See, top header backgrounds (let’s trademark that, shall we?) are a trend these days, but, again, would you have thought of using such starkness on a soothing gradient? I enjoyed this discovery not because it’s worlds away from the designs we see today, but because the choices used were so unexpected.

hello,
i’m a new york-based web designer with
a penchant for music and strong opinions.
have a look around, and give me a shout.

The use of SIFR can go a long way. Throw in proper contrast, some texture, and the right amount of whitespace and you’re all set. The inside pages show that the link colors are so startling a deviation from the dominant, monochromatic brown hues that I can’t decide whether I like it or not. But being different is a good thing. Startling the viewer is also a good thing.

The ad network
of creative, web and
design culture

So minimal and yet so bold at the same time. It’s clear who designed this website—Coudal Partners. It’s amazing what you can do when you’re armed only with thin, gray lines. As this is an ad network, participating advertisers are featured first and foremost, an immediate demonstration of how The Deck works. This is how ads should be.

Social Media Weekly

Design - Create a Spectacular Grass Text Effect in Photoshop
Spectacular, indeed, is the right word. The grassy typographic effect is not too easy but not too hard, and you’ll walk away feeling very pleased with yourself after completing this tutorial.

Design - Yahoo! Design Stencil Kit
For all your interface design and wireframing needs. File support for OmniGraffle, Adobe Illustrator (PDF, SVG), Adobe Photoshop (PNG), Visio (XML).

Design - 25 resources for ornaments, fleurons, and “frilly bits”
Cameron Moll provides a very handy list of links where you can download pretty ornaments, which he is quite fond of in his designs. Resources are both free and for a fee.

Programming - CSS Cacheer
Shaun Inman releases CSS Cacheer, an improvement to CSS-SSSP. With it, CSS has evolved to a whole new level, with support for variables, constants, nested selectors, bases, and plugins. Requires PHP.

Programming - CSS Decorative Gallery
Web Designer Wall shows how you can add pretty decorations and frames to a group of images using a <span> overlay and CSS wizardry. Great for all your photo galleries and portfolios.

Programming - Featured video: quick and easy forms
Video demo showing how you can easily create forms using Google Spreadsheets. It’s definitely a great idea if you want an easy way to gather data, as in surveys and contact forms. Although not completely customizable, the best part is the information submitted is saved in an organized manner inside Google Docs.

Spam is the bane of blogs, ugly links trying to nest its way into your blog comments section to trick your readers to buy their products, download spyware, or just build links. We don’t want it, none of us do, and luckily there are ways to stop it.

Solutions in the Blog Platform

You can do it manually, which will work perfectly fine to start with. Just moderate every comment, no problem right? Wrong. That will take time, and the more readers and Google juice your blog gets, the more spam will hit you. It is just not humanly possible to manage spam on a larger blog, it will get out of hand really quick.

Enter the anti-spam measures taken by the blogging platforms. In WordPress you can set up a blacklist and stop all comments with more than two links, for instance, which will help out a bit. Similar solutions are available for Movable Type. Problem is, spammers are sometimes very bright, which means that they alter their spam comments to trick you, so you’ll end up with a bunch of spam comments getting by your line of defence.

Enter the Spam Fighting Plugins

The real way to tackle blog spam is using plugins.

Akismet is something of an industry leader, developed by Automattic and shipped with WordPress. The plugin is free for personal use, but there are problogger licenses. Akismet started as a WordPress plugin, but nowadays it is available for other platforms as well, including Movable Type, various forum software, and more.

Defensio is a fairly new anti-spam solution similar to Akismet. It is available for both WordPress and Movable Type, as well as other platforms, which is a good thing. The plugin is free for personal use, but commercial adopters will have to pay.

TypePad AntiSpam is Six Apart’s brand new anti-spam plugin built on the TypePad platform’s spam protection. It’s in beta and totally free at the moment, and available for both Movable Type and WordPress, with more platforms coming soon. The plugin got a very good testimonial from TechCrunch’s Michael Arrington, who puts it in the same level of effectiveness as Akismet, which is a great start. TypePad AntiSpam is a plugin that learns from what you mark as spam, which means that you need to work a bit to get the plugin to be really effective. It will be very interesting to follow this one.

Other options are of course available, mostly for WordPress. Spam Karma 2 used to be a lifesaver for me, until Akismet got really effective, and I’ve had clients being happy with Bad Behaviour. I’d also like to flag for Mollom, an anti-spam plugin for Drupal that is available for WordPress and apparently is looking go the same way as Akismet and TypePad AntiSpam, with wider platform support.

My Weapons of Choice in the Spam War

I used to have a combination of Akismet and Spam Karma 2 on my WordPress blogs, which means most of my sites, and it’s been working really well. However, the last 6 months or so I’ve settled for Akismet, and actually haven’t had the need to utilize any other anti-spam plugin. Defensio is yet to impress me, although I wouldn’t rule it out. I am waiting for more users to report on how it is working for them, should it get a lot of positive press I’ll probably give it a serious go on one of the larger public sites.

Six Apart’s TypePad AntiSpam plugin is the most interesting one, however, and I’ll be using it on an upcoming project to see how it turns out.

How do you battle comment spam on your blog, and how is the war coming along? Share your experiences in the comments.

It’s been a bit quiet on the Devlounge redesign front for some time now. Juggling a lot of project can do that to a man. However, things are rolling again, so expect a relaunch soon enough. No, I won’t make an estimate yet, those always break anyway, right? Maybe I shouldn’t have said that…

I will, however, give a sneak peak as to what you can expect from Devlounge once the redesign is rolled out. I’m talking about the new categorization of our content.

Brand New Categories

Today’s categories doesn’t really work well with how Devlounge have evolved. I’m sure the plan behind the current layout is both cunning and brilliant, but things change over time, no matter how well you plan them. A good and logical categorization of content for such an editorial site as Devlounge is crucial. I repeat: it’s crucial!

That’s why these will be our new main categories, replacing the old ones.

• Code focusing on PHP, CSS, XHTML and similar, tutorials and snippets
• Design on trends, web 2.0, inspiration, critique and praise
• Opinion being commentary on the web from the staff, will probably delay this one for focusing reasons
• Publishing blog platforms, forum systems, open source applications as well as paid ones, things you need to publish a website, basically
• Strategy for launch and relaunch, monetization and SEO, things to help you succeed
• Webapps is about online tools, necessities, desktop replacements, cool apps, things like that

There might or there might not be room for sub-categories. With tags, I personally think that pinpointing a post’s topic is better left to the tags, the fewer categories you can get away with, the better.

I’d say that the categories Code and Design are the most important ones, the primaries, with Publishing being secondary, and the rest being less frequent on the site. How does that sound to you? Let me know in the comments.

Can’t say there’s a completely obvious unifying factor to each of the design picks this week, but they all have beautiful, detailed illustrations in them. They’re all cheerful too.

Designs of the Week

The effects on these icons are pretty cliche in some people’s books, what with the saturated hues and glassy reflections, but they’re still nice to look at.

Header image aside, this site is really minimal but does a nice job with the text. The location map at the footer is also a nifty little touch.

A splash of color and life at the top, only slightly trickling down as you scroll further. Then it becomes monochromatic grayish brown for the main content. I like all the lines and gradients and other details.

This is a purely Flash site, and you will adore the organic transitions as you click on every item in the menu. I especially enjoyed how the map (under “Location/Hours”) is formed.

Social Media Weekly

Design - The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques
If you’ve been looking for a definitive guide to Photoshop, this is it. Download the entire ebook completely free, but it’s only available until June 13 so hurry!

Design - Font Burner
Font Burner lets you pick from a thousand fonts and use them on your own website. How? Just follow the steps listed there. Yes, it’s also free.

Programming - Starry Night: Incredible 3D Background Effect with Parallax
Every since the teaser page for Silverback was launched, and the web design geeks discovered it was using the Parallax Effect, they stopped being in awe for a bit to recreate their own optical illusions using CSS. This one’s one of them. And if you don’t like stars, how about riding horses?

Most websites like to use rotating banners to add an extra appeal in their header. To make this work, all we need to do is get all the images from the specified directory, choose a random image, and present it to the browser. First, we need to create some sort of configuration for this:

<?php

$directory = './images/';

$accept = array('gif', 'png', 'jpg');

$deny = array('file1.jpg', 'file2.gif');

?>

Next, in order to scan through the directory, we would need to use scandir(). Using the filters above, we can also restrict the files that are in the directory using array_filter() since the output of scandir() is of type array. The built-in PHP function array_filter() requires an input array, and an optional callback function. A callback function is a function that PHP calls after a certain event. In this case, the event would trigger with every value in the array. We will use the callback option which requires one parameter that will contain the value of the key.

<?php

$files = scandir($directory);

$files = array_filter($files, 'filter_images');

function filter_images($image)

{

    global $accept, $deny;

    if (in_array($image, array_merge($deny, array('.', '..', '.htaccess', 'index.html'))))

    {

        // Remove, because we don't accept those files

        return false;

    }

    $ext = substr(strrchr($image, '.'), 1);

    if (!in_array($ext, $accept))

    {

        // Remove, because its not an accepted extension

        return false;

    }

    // This image passed the tests

    return true;

}

?>

Now we have an array of all of the images we can use for the banner rotator. Because we removed some of the values from the file list, we need to resort the array so that the keys are consecutively ordered from 0 using the function sort(). After this, we will need to generate a random number from the range of the keys using mt_rand(). The reason we are not going to use rand() because mt_rand() produces a “better” random number and is four times faster, according to php.net.

<?php

$files = array_values($files);

$rand = mt_rand(0, count($files)); // mt_rand(min, max);

$image = $directory . $files[$rand];

?>

We have selected our image and all that we have left is to output the image to the browser. We need to set the proper content type header and output the contents of the image using header() and readfile().

<?php

$finfo = finfo_open(FILEINFO_MIME);

$mime = finfo_file($finfo, $image);

finfo_close($finfo);

header('Content-type: ' . $mime);

readfile($image);

?>

At this point, a random image is displayed when viewing this file. All you have to do next is display it on your page using the HTML <img>tag or using CSS. I will go over both methods.

First, using the image tag, you can do the following:

 <img src="banner.php" alt="Banner" />

Next, with CSS, you can do this:

<style type="text\css">

#banner {

    background-image: url(banner.php);

}

</style>

 <div id="banner"></div>

If you want to get more advanced, you can always enhance the filters with REGEX using preg_match(). And, as I said before, for their header to add an extra appeal and other uses. You can wrap a link around the <img> so that whenever someone clicks your header, it redirects them to the homepage. This is a tool most websites use, depending on how it is constructed and looks. I hope you guys have fun with this script!

Download File

If you’re a good Web 2.0 person, you’ve probably been relentlessly tagging all your entries. You might even have a tag cloud so big it threatens to rain folksonomies. But shouldn’t there be something more useful you can do with your tags? How about linking to related entries? Here’s how we can do it in Movable Type, and without installing any extra plugins.

First, create a new Template Module named “Related” and type this code into the box:

<mt:entryiftagged>
<mt:setvarblock name=”curentry”><mt:entryid /></mt:setvarblock>
<mt:setvarblock name=”sgtags”><mt:entrytags glue=” OR “><mt:tagname></mt:entrytags></mt:setvarblock>
<mt:setvarblock name=”listitems”><mt:entries tags=”$sgtags”><mt:setvarblock name=”listentry”><mt:entryid /></mt:setvarblock><mt:unless name=”listentry” eq=”$curentry”><li><a href=”<mt:entrypermalink />”><mt:entrytitle /></a></li></mt:unless></mt:entries></mt:setvarblock>
<mt:if name=”listitems”>
<h3>Related Entries</h3>
<ul>
<mt:var name=”listitems”>
</ul>
</mt:if>
</mt:entryiftagged>

It’s very important that when you type this in there are no line breaks within any of the <mt:setvarblock></mt:setvarblock> containers. In theory, you should be able to use the strip_linefeeds attribute and not worry about line breaks, but I’ve not had any luck with that. In fact, it’s revealed a very strange bug. Rather than deal with bugs, we’ll just remove the line breaks ourselves.

Now save it and go to your Entry Archive template. Somewhere in there (if you’re using the default templates, right after <$MTInclude module="Entry Detail"$> would be a good choice) add this line:

<$MTInclude module="Related"$>

Republish your blog and you should see a list of related entries on each individual entry page. Let’s take a closer look at our code and see what’s happening.

<mt:entryiftagged>


We don’t want to do any of this if the entry doesn’t have tags.

<mt:setvarblock name="curentry"><mt:entryid /></mt:setvarblock>

We store the ID of the current entry to use later.

<mt:setvarblock name="relatedtags"><mt:entrytags glue=" OR "><mt:tagname></mt:entrytags></mt:setvarblock>

Here, we’re using the <mt:entrytags> container to output a list of tags from the current entry. The glue attribute specifies what text should be between multiple tags. So, if our entry is tagged with cats, pet food, and dogs, we’ll get this:

cats OR pet food OR dogs

And this will be stored in a variable we’ll use on the next line.

<mt:setvarblock name="listitems"><mt:entries tags="$relatedtags"><mt:setvarblock name="listentry"><mt:entryid /></mt:setvarblock><mt:unless name="listentry" eq="$curentry"><li><a href="<mt:entrypermalink />"><mt:entrytitle /></a></li></mt:unless></mt:entries></mt:setvarblock>

We’re using a <mt:entries> container with the tags filter. This will limit the entries returned to only those that have at least one of the tags from the current entry. As we process each entry, we store its ID in a variable. We then use the <mt:unless> conditional tag to compare the ID to the one we stored earlier. This allows us to filter out the current entry from the list we’re creating. If it’s different from the current entry we create a link to that entry and store it in a variable to use in the final output (which is only output if there is anything in that variable):

<mt:if name="listitems">
<h3>Related Entries</h3>
<ul>
<mt:var name=”listitems”>
</ul>
</mt:if>
</mt:entryiftagged>

Now, this is not necessarily the best way to do related entries. There’s no “scoring” involved to determine which entries are the most related, we just assume they’re related if they have at least one tag in common. And if you’re publishing static files rather than publishing dynamically then old entries won’t have links to new entries unless you republish your entire blog. Still, it’s an easy way to link your entries, and it’s a good example of the complex things you can do with Movable Type variables.

I don’t know if I am a fan of minimalism because I picked out these websites. But I like to appreciate designs that stand out not because they’re loud and proud, but because they’re calm and clear. Silent waters run deep, they say. I like to think restraint is more powerful than the lack of it, especially in design.

Designs of the Week

The contrast used on the unlinked text may be less than ideal for the accessibility conscious, but ample emphasis is given to the keywords for visitors who are just skimming through. No images, just a monochromatic color scheme and a minimalist manipulation of type.

Some bright colors used here, but this design still leans towards the muted look. But the challenge here was to arrange all the site elements to make it look different from your typical blog layout without drawing too close to the formalities of an online newspaper or magazine.

There’s something about the lightness and spaciousness of this design that feels delightful. Though I would want a bit more content on the sidebar, I’m glad the designer went with a 2-column layout since blog designers these days are so intent on cramming so much stuff every which way (either to make money for themselves or please their clients and then make money for themselves).

Social Media Weekly

Design - One Day Poem Pavilion
A dome-shaped structure whose perforations let sunlight through to form poems which vary every hour or so. The combination of science, art, and design in this installation is one of the best things I’ve seen.

Design - “Designing is not a profession but an attitude”
37signals points us to an interesting passage from László Moholy-Nagy’s “Vision in Motion” which describes the responsibility of a designer.

Design - Deadly Sins of Web Design
Warning: this is a slightly sucky page that demonstrates all the annoying things you can do to a website. This is more for ignorant clients and friends who keep on insisting you should “spice things up” with music or some animated GIFs.

Programming - Processing.js
Processing, a visualization programming language, has been ported to JavaScript by John Resig. An amazing feat. In spite of all the criticisms thrown at JavaScript all these years, it continues to attract all these neat projects and features.

Programming - Timelapse CSS
Matthew Buchanan created a script that stripped a webpage of its CSS one property after the other until it was completely bare. He posted a video showing the process reversed, and the JavaScript is available for download.

There are lots of tutorials floating around that show you how to “set your typefaces on fire”, but this quick little tip using Adobe Photoshop is one that is really fast and effective for you to experiment with, and make your blazing impression on any text that suits your fancy. Try this quick text treatment next time you are looking for a speedy, easy way to have your website banner burst into flames…

Steps

Open up a new document in Photoshop. I made mine 8 inches wide by 6 inches high, 72 ppi, Grayscale, and the Background should be White. Make sure your default colors are Black foreground color, white background color (press D on your keyboard to reset this default color scheme). Fill the transparent document you just opened by clicking ALT>Backspace (PC). Next, click on the Text tool in your toolbar, and set the default colors to the opposite scheme, white over black, by pressing the X key on your keyboard. You are going to type something in white now on your black background. Choose a nice, bold, blocky typeface, and set the size to about 100 point. See the example shown:

The next step is to rasterize the type by clicking Layer>Rasterize>Type. After that, rotate the canvas counter clockwise using: Image>Rotate Canvas>90 degrees counter clockwise, then apply the first effect filter for this lesson which is as follows: Filter>Stylize>Wind>Blast from Left. Repeat this step one more time to lengthen the blast a little. See example:

Now you will need to rotate the image 180 degrees: Image>Rotate>180 degrees, so you can blow the wind effect on the other side as well by using: Filter>Stylize>Wind>Blast from Left. When finished, rotate the canvas back to normal by: Image>Rotate>90 degrees counter clockwise. It is time to add some more effects to your type. First, use this: Filter>Stylize>Diffuse>Normal. See example:

Then, apply the next effect as follows: Filter>Blur>Gaussian>Adjust slider to 3. Example:

One more effect and we are nearly finished: Filter>Distort>Ripple>100 percent>Medium. See example:

Now that we are done with the effects, let us type the word over again in black (switch default colors back to black). Position this type layer over the original one that is now distorted and rasterize the type: Layer>Rasterize>Type. After you rasterize this layer, it’s time to click Layer>Flatten Image.

So, you are probably thinking “what happened to flaming type?” Well, here are the final steps to a really hot effect: Click Image>Mode>Indexed Color. Nothing much will happen in that step, however, the next one: Image>Mode>Color Table, and choose Black Body from the drop down menu. Now you should see the colors of fire all around your type, concentrated at the top and bottom. See example:

For your final step in this process, you probably should crop this and convert this file to RGB ready for web use. Again, click Image>Mode>RGB, and save your file, and you’ll have a super fun little text effect to heat up your site! Here’s the cropped final:

Wrapping Up

Obviously there are many techniques for making this type of flaming text treatment; I just thought this was a good “quick and dirty” version for you to try out in a jiffy. You can also do a lot more experimenting with this, such as make the text a different color all together, such as blue or yellow, and add some effects to that like a drop shadow or outer/inner glow. You can experiment with many, many different base fonts as well; I just used a very plain, bold font here called Impact (you should have it). There are many other choices. Photoshop is very flexible, so you have a lot of options open to you!

There’s been a lot of excitement the last few weeks over FriendFeed, the new lifestreaming service that lets you pull together all the different services you publish to into a single feed.

I’ve tried FriendFeed and it works great, but why ask someone else to do something you could do yourself? The combination of Movable Type and the Action Streams plugin make rolling your own lifestream easy.

More →

Two very different designs but with one common thread. What’s the moral of this week’s Friday Focus?

Designs of the Week

I like that icons were used to represent the posts. More importantly, that the use of icons wasn’t just an afterthought. They comprise more than half of the “look” of the front page, which means it’s the content of the website that dictates the design. (By the way, they released an icon set for the iPhone with the same black-and-white style!)

I just love how the top navigation links, the welcome blurb, and the feed/bookmark chicklets are being thrashed by the green monster. As you scroll further below it gets less exciting, but what the heck. First impressions last, right? Maybe, but the abundance of artworks is key here. Don’t stop with the blog posts. Give the audience as much as you can. A good design is nothing without great content, so let them consume it!

Social Media Weekly

Programming - CSS Homer Animated
This is the animated demo of how Roman Cortes drew Homer Simpson with CSS. This has been around for a couple of weeks now, so you might have seen it already. If not, make sure you do or you’ll miss one of the best CSS projects ever made.

Progamming - CSS Qualified Selectors
Very, very, useful. I’ve been wishing for this type of CSS selector exactly because of the first example Shaun Inman wrote in this post. He’s asking for feedback, too, so be sure to share your thoughts while you’re there.

Design - Face to Face: An Interview With Nadine Chahine
I rather like this article because it’s rare to find a discussion about foreign type. The challenges of creating beautiful, legible type in a completely different set of characters from the Roman alphabet is just fascinating.

Design - The Untold History of Web 2.0 Fonts Pt. 1
Because we all like to find out what typeface is being used when we come across a famous logo. This list goes a step further and recommends free font alternatives.