Designs of the Week

The left-aligned layout works well here. I love that in the inner pages, the background changes, but remains “chaotic”.

I’m not sure what this design style is called, but it always catches my eye. Another left-aligned design with a touch of opacity and great use of repetitive graphical elements.

I love the header. And the custom illustrations for for each featured artist. And the bright color scheme—light blue, pink, and yellow for a hip-hop magazine? With a perfect-cursive font for the headers? Now that’s what you call adventurous!

Here’s a one-page portfolio designed like it was a storybook. I particularly like the use of textures on the illustrations.

Now this site takes a similar approach, with the airborne objects found all over the place. It’s not quite as grand and playful as I would have liked, but a great look for a serious institution.

I love the crazy lines and color combination. It’s not a complicated layout, when you look at it closely, but it certainly looks extraordinary.

I’m not sure if this design is a result of cramming everything above the fold, but it works! It showcases the artist’s versatility and his portfolio’s diversity at one glance. And given that all the illustrations look whimsical and fantastical, it gives a very interesting personality to the website. What I’m not sure about is the big default image in the center, and whether it’s competing fiercely with the already strong background.

Another foreground-background competition here. I’m not sure if this design will sit well with everyone, especially since it’s already dark, but the background looks pretty interesting and it’s a quick way to add interest to your site.

Social Media Weekly

Programming - Maintainability Guide (Beta)
An interesting guide on how to write maintanable code.

Usability - Keep Users Updated During Long Load Times
Tips so they won’t just go away.

CSS - CSS cascade - a simple step-by-step presentation
A great tutorial on mastering the CSS cascade.

First up is Cursif, which I’ve described as pretty- because it is. It’s a darling of a font, all curves and swirls. Great for girly or homemaking-related designs.

Rough Draft is a free font that I’ve only just discovered, and now I can’t imagine not having in my font arsenal. Its all caps, and certainly makes a statement.

Lilly is another delightful free font. It does make me smile, and would be lovely in designs for children- much much better than Comic Sans. Then again, almost anything is better than Comic Sans.

I don’t go much for handwritten fonts, but The Quiet Scream is among my favorites. It reminds me of the graffiti we used to put on our binders in high school. Trapper Keeper, anyone?

And finally, I’ve kept the best for last. Goudy Bookletter 1911 has joined the ranks of my all-time favorite fonts. A variation on the classic Kennerly Old Style, this is a font that looks just as home as a website header as it would on a classic book cover.

But there are alternatives. And today, I want to show you three of them.

Habari. This, in comparison to WP, is one of the latest blogging systems, and you can tell right off the bat: it feels more modern somehow. Indeed, their FAQ explains just how modern it is:

Habari is being written specifically for modern web hosting environments, and uses modern object-oriented programming techniques. Using these recent but well-established additions to the PHP language allows Habari to make use of PDO, enabling prepared statements for all interactions with the database. This greatly reduces the system’s vulnerability to SQL injection attacks. This is just one of many benefits of modern object-oriented techniques.

LifeType is worth a look especially if you’re tasked to build a blog for a non-techie client to use- its really simple to use, and offers multiple blogs and themes built on Smarty. I haven’t had much experience with LifeType, but its loyal users sing praises about its clean code and lightness.

And finally, Movable Type. Okay, so I’ll always have a soft spot for MT- but you know what? It’s a great system, maybe the only one on this list that can truly go head to head with Wordpress in terms of features. It features multiple blogs (something I would love regular WP to have), supports both static and dynamic page generation, and has some of the most beautiful blog themes ever to grace the Internet. Movable Type is powered by Perl and not PHP, so if you’re more comfortable with the former, this is probably a better choice for you.

Do you have any Wordpress alternatives to suggest? Let us know.

Designs of the Week

Information visualization

Showing clients/web resources/cities on a world map as a background is brilliant. I don’t think it’s been done this way before. If the movement gets too annoying, you can stop it with a click. The “worldwide” concept carries over to the Time Zones section, which shows both the current time in your area and theirs, as well as how long before their office closes—what a sensitive little idea!

Lots of Twitter-related sites that pull tweets on a certain topic are mostly text-based and don’t usually create a wall of avatars with random popup tweets in the background. When new tweets arrive, the avatars shift right as new ones appear. And as for the foreground? Good typography, contrast, colors, and use of icon. Another well-done one-page site.

Parallax effect

Flash-based, but definitely well done.

Bright, fun illustration-based design. Fluid width too.

I like that the parallax effect works whenever your mouse moves. The background is light and subtle enough to not be distracting.

Navigation

The foreground and background fuse on the homepage, but when since the inner sections are loaded in a lightbox, you can still click on what is now the background. Anyway, very cute design elements, including the tilt-shift effect for the photographic background. And don’t you love the paper boat on the river? The greatness is in the details!

I love what the copy says, which at the same time serves as the navigation to the inner sections of the site. And the background is literally made up of the designer’s portfolio. And it looks good!

This effect might give some people a headache. But I like that the objects in the background can be any size or type—image, video, Flash animation, screenshot, poster, etc.

This one’s got more design elements for a polaroid photo collection metaphor, shadows and all. Not pictured: the designer’s latest tweet and an anti-IE6 disclaimer. One more thing about this effect: it works regardless of browser width.

Social Media Weekly

Applications, Workflow - One Day in the Life of a Web Designer
Great twofold guide for discovering helpful apps and formulating an effective routine for professional designers.

Design - 27 Must-Have Starter Kits For Web Designers
You don’t always have to start from scratch; you don’t have to reinvent the wheel.

Programming - How to properly “speak” HTM language
A nice little tutorial on HTML semantics.

Wordpress Contact Form Plug-ins
I’d say about 95% of the sites I’ve created lately have been powered by Wordpress, so I usually reach for a plug-in for the contact form. The one that hasn’t let me down yet is cforms. It’s easy to use, and very, very powerful. In fact, it might be too powerful for some- and when it is, I recommend checking out Tiny Contact Form, which is simple, gets the job done, and is indeed tiny. Another one to look at is the reCAPTCHA Form, which enables you to have a contact form using the reCAPTCHA challenge system.

Kontactr
This one’s a hosted solution, which means that they host your contact forms for you, giving you some code to embed in your website or blog. Kontactr is by no means the only service that does this (see another one I like below)- but the reason I like it so much is that it includes CAPTCHA protection. Less spam is always a yay.

Wufoo
Like Kontactr, Wufoo is a hosted form solution, so it makes setting up forms extremely easy and quick. But what I really like about Wufoo is its snazzy styles- they’ve got some seriously good looking form styles here. Their free version includes 3 forms with only 10 fields a form, so for more popular sites you’ll want to upgrade to a paid version.

Contact Form Scripts
If you want complete control over your forms, you’ll probably want to look at installing and using a script. For something commercial, I recommend checking out MachForm, which is powerful and packed with features. An excellent free PHP solution, and one that I’ve used many times for very busy websites is Form Tools. Finally, I can’t talk about contact form scripts without mentioning Dada Mail, a CGI script that I used to use a lot- back in the days before I even knew what PHP was.

How do you power your contact forms?

Give information. The footer is a great place to give more details about yourself or your company. Add a short descriptive blurb, with a link to the all-important about page- and maybe a small photo or logo.

Give options. This is where having a functional footer can be a powerful tool. You might put a list of your most popular posts here, or links to your other websites. A search form is always useful, just in case your visitor hasn’t yet found what he was looking for. Which brings us to something else you should add to your footer…

More navigation. Can you ever have too many navigation options? What you want, maybe more than anything else, is to make sure your visitors find what they’re looking for on your site. Tag clouds are fun, and they can be made more useful as well. Dropdown menus listing categories or archives by date are good here too.

Interact. People love to interact online- it’s why so many of us prefer browsing the web to watching television. Your footer is a great place to get feedback from your visitors- when they’ve gone through your page, they’re usually ready to say something. Place a visitor poll, include links to important email addresses or telephone numbers, link to a feedback form- or take a tip from Brad Candullo and place a small contact form right on your footer.

Be inspired. Finally, be sure to check out some of my favorite website footers: Matt Brett, CSS Princess, and the simple but succinct Derek Powazek.

Designs of the Week

Perhaps what I love most about this site, aside from the kickass image mouse-tank to the left, is how the fuchsia blends into yellow with all the subtle lines and textures, including that cloud slash smoke slash fog. The forms are neatly done too.

I don’t know about you but when I saw this design, I was absolutely delighted by how the stairs were iconized. Icons of stairs! Inside you’ll find real pictures of them, but the style and detail of the icons on the front page is a brilliant idea. It keeps things elegant and uniform while focusing on the actual product—because unlike shoes or mobile phones, you can’t photograph unattached staircases on a white background!

Here’s another spin on the same-icon-types-on-the-frontpage pattern. Although I would say this is a little less effective than the previous site because for starters, you’re depending on the color of the mlik bottle top to differentiate their services. Not a very good idea for accessibility reasons; it might have been better if the bottles had different shapes or adornments. Still, I like how clean this site looks and the general “milk” branding and metaphor.

Two awesome things here: first, the icons actually have animations when you hover over them. Second, the animals and substances are all in laboratory containers (beakers, gradiated cynlinders, etc.)—this was the unity-in-diversity thing I was talking about. These, plus the dramatic dark background as well as the “labs” branding, make you absolutely curious about what the codenames and experiments all mean.

Social Media Weekly

CSS - A Detailed Look at the Z-Index CSS Property
Behold the bane of most front end developers!

Design - 10 Web Design Rules That You Can Break
Rule #10 is the best.

Usability - Stop Counting Clicks
Here’s another myth busted.

Now, of course, most forms are laid out using CSS, and I’m sure you’ll agree that there are some beautiful forms out there. Here are some tips on improving your forms:

Align elements with CSS. A no-brainer, right? And yet I still see so many forms out there that aren’t aligned. Aligning your form elements not only makes things cleaner looking, they make your forms look more professional. Use floats, margins and padding to get your input boxes lined up nicely- and try to use ems and not pxs so that your users can resize text without everything getting out of proportion.

Go easy on the styles. Keep in mind that different browsers sometimes show different things when it comes to form styles. If you’ve got your heart set on coloring all your dropdown menus bright red, go ahead- but remember that before anything else you want your form to be functional.

Style all your forms the same way. Decide on a “look” for your forms, and stick with it throughout your site. Do this by defining styles in your stylesheets for all forms (form, label, input, etc.) rather than applying certain classes to certain forms.

Make your button look like a button. Sure, many people will just hit Enter or Return after filling out a form, but many others- me included- like pushing buttons, and will look for a Submit button at the bottom of your form. This can say “Go”, or “Subscribe”- or even just “Submit”- the point is that when you prettify your buttons, make sure they still look like buttons.

Finally, if you’re looking for more info and examples on styling the elements of your forms themselves, I recommend checking out 456 Berea Street’s Styling Form Controls. Too lazy to write it yourself? Use this CSS Form Layout Generator.

What’s your favorite way to style your forms?

<p align="center">centered image here</p>

Look familiar? There’s also:

<center>centered image here</center>

Of course, you don’t want to do that. Both ALIGN and CENTER here are deprecated- and besides, the beauty of CSS is that it’s supposed to make our lives easier, right? Now let’s say I want all of the images in my blog posts to be centered nicely. Instead of having to select each one and applying the dreaded ALIGN or CENTER, all I’d have to do, really, is this:

.post-body img { display: block; margin-left: auto; margin-right: auto }

I want to give you a quick explanation of what we’re doing here. The truth is that although I’ve been using that bit of code for a long time, I never thought to ask exactly how it worked. So here’s what this does:

First, it makes the image into a block - thereby making it unnecessary to add any additional <div> or <p> tags around it. Then it tells the browser displaying it to set left and right margins to auto.

When you set these to “auto”, what you are actually doing is telling the browser that you want left and right margins to be equal - which is really another way of describing centering.

Wasn’t that easy? How do you align your images?

Designs of the Week

This look seems to match this company’s logo, but I would have liked that “relaxed” look to carry over to the headings and other elements of the site. Still, good imagery and hues.

This site is not quite as polished as far as the grunge look goes, but the intense painted background texture provides a lot of personality.

Now for something lighter. I love that almost every design element looks like it was drawn or painted, especially the icons on the sidebar. I don’t think I’ve seen a style like that on other hand-drawn/painterly designs!

This one’s even subtler. Unlike the featured sites above, the watercolor effect is more of an accent than the definitive look for the whole site.

Social Media Weekly

Design - Two simple ways to create text embossing effect

CSS - 15 Effective Tips and Tricks from the Masters of CSS

HTML - HTML5 Could Be the OS Killer