Feature
Post

Category
Publishing

Three WordPress alternatives for your blog

I wasn’t what you would call an “early adopter” of WordPress. In fact, I sometimes feel like I was one of the last to make the switch from Movable Type, which I loved and recommended to anyone who asked me what a blog was (yes, those were the days). Today, of course, over 90% of the work I do is on WordPress- and I’ve fully embraced this powerful publishing system.

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.

Feature
Post

Category
Design Focus

Friday Focus 06/26/09: Interactive Backgrounds

Backgrounds are so called for a reason. They’re meant to support and complement instead of attract and distract. This week’s featured sites, however, provide a whole other level of interactivity and usefulness to backgrounds. You decide if they’re a good idea or not. Either way, they’re interesting concepts that can only be executed on the Web, so, enjoy!

Designs of the Week

Information visualization

World of Merix Studio

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!

Fix Outlook

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

Milk

Flash-based, but definitely well done.

CSSSquirrel

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

Maloca Estudio

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

Navigation

Alexey Abramov

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!

Lucas Hirata

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!

Stephen Band

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.

Siebennull

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, WorkflowOne Day in the Life of a Web Designer
Great twofold guide for discovering helpful apps and formulating an effective routine for professional designers.

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

ProgrammingHow to properly “speak” HTM language
A nice little tutorial on HTML semantics.

Feature
Post

Category
Design

Top Contact Form Solutions

My recent post on improving your forms got me thinking about the most common ways to add contact forms to websites and blogs. Given how important it is to offer your visitors a quick and easy way to get in touch with you, having a great contact form is key to a successful site. Here are some solutions I recommend:

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?

Feature
Post

Category
Design

Five Ways to Fancy up your Footer

I’m a big fan of great website footers. No longer just a place for links to the sitemap or copyright information, more and more websites and blogs are putting their – ahem- best footers forward, and providing us with beautifully designed, functional footers. Here, some tips on improving your footer:

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.

Feature
Post

Category
Design Focus

Friday Focus 06/19/09: Iconic Design

This week on Friday Focus, we celebrate great icon design which carries the overall look of our featured websites.

Designs of the Week

Guerra Creativa

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.

Stairs Ukraine

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!

Full Cream Milk

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.

Dragon Labs

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

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

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

UsabilityStop Counting Clicks
Here’s another myth busted.

Feature
Post

Category
Design

Better forms

I remember when nearly all contact forms were made with tables- it was the easiest way to get everything aligned properly (remember valign? valign and I were “like this”).

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?

Feature
Post

Category
Code

Centering images with CSS

We’ve covered aligning images to the left and right before, and today I want to talk about centering your images with CSS. If you remember the old way (without the magic of CSS), it was something like this:

<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?

Feature
Post

Category
Design Focus

Friday Focus 06/12/09: Web as Canvas

This week on Friday Focus: websites that look like they made of paint, not pixels.

Designs of the Week

Agami Creative

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.

Spout Creative

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.

Istok Pavlovic

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!

Toggle

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

DesignTwo simple ways to create text embossing effect

CSS15 Effective Tips and Tricks from the Masters of CSS

HTMLHTML5 Could Be the OS Killer

Feature
Post

Category
Webapps

Do more with Twitter

So you’ve embraced Twitter. You’ve synced it to your mobile phone, maybe installed a desktop client, and are happily tweeting your days as the number of your followers grows. What next? Here are some things you might not already be doing with Twitter:

Post photos and videos.
Because most mobile phones have cameras these days, sharing photos of what you’re tweeting about is easy. A photo does speak a thousand words- which is much, much more than 140 characters. The most popular service of all is Twitpic, although I’ve recently discovered the lovely Twitcli. If you’d like to share video, try out Twitvidio, which lets you record directly from your webcam and post to twitter- or 12seconds, where your video is limited to- yes, 12 seconds.

Share music.
It’s always fun to share music with your friends- kind of like posting “listening to:” on your blog. To share music on Twitter, try the adorably named Song.ly, which won me over with their simple-to-use interface and clean design. Other ones to look at are Twt.fm and the fairly new SongTwit.

Be creative.
History Professor Monica Rankin found a way to use Twitter in the classroom, getting more students to participate in classroom discussions:

…and proving that while Twitter is a simple, fun application- it can also be a very powerful tool.

How are you using Twitter?

Feature
Post

Category
Strategy

Multiple Monitor Love

For years, I resisted switching to multiple monitors. I’ll just buy a larger monitor, I thought- surely one huge screen was better than having to give up precious desk space for all those extra machines?

Now, of course, I can’t imagine not working without my multiple monitor setup. Here’s why:

Different spaces for different things. Forget OS X’s spaces- having multiple monitors gives you the real thing, baby! Design apps over there, games over here, social networking apps there… particularly good if, like me, you’re a little bit OC.

Faster testing. Testing new websites and designs on various browsers has always been my least favorite part of my work process. Being able to have Safari open in one monitor, Firefox in another, Chrome in another, etc. really speeds things up.

Better overall productivity. Ultimately, if you’re a multi-tasker, you’ll adore the possibilities that a multiple monitor setup will give you. All that switching from window to window, and dragging from here to there, on a single monitor setup really does add up- and I’ve found that I get more work done in less time with a multiple monitor setup.

Do you use multiple monitors? Are you considering adding another monitor to your setup?

Feature
Post

Category
Design Focus

Friday Focus 06/05/09: Nature’s Delights

Nature-inspired websites come by the dozen these days, but this week’s featured designs up the ante. They’re really lovely, I promise!

Designs of the Week

Mamie Bouillabaisse

I love the illustration on the left side. Predominantly green but has lots of bright colors and interesting “characters” too. I would have wanted a bit more of them scattered throughout the one-page site, though.

Vyniknite.sk

You know how nature-inspired websites look cliche because they use cliche types of plants and flowers? This isn’t one of them. There’s something about this design that draws me in. Simple, but quite memorable and effective.

Envira Media

So many things to love about this design. First, that the “landscape” is tilted sideways, and the plants serve as dividers for the different blocks of text. Brilliant! Then you have the navigation links skewing every which way. Finally, the typography is fantastic!

Social Media Weekly

BusinessThe Value of Practical Personal Projects

CSSAll About Floats

AccessibilityBig Red Angry Text

Usability10 Tips to Create a More Usable Web

Feature
Post

Category
Design

How’s your CSS Shorthand?

As a child I was always amazed by people who could write in shorthand. Pages of what looked like mere squiggles to me, which were then transcribed perfectly into proper english- it was something I thought I’d like to learn when I grew up.

Fast forward some twenty years, of course- and now I wonder whether anyone uses traditional shorthand anymore. What I do use- almost on a daily basis, being a web designer- is CSS shorthand. Like traditional shorthand, CSS shorthand saves time. Which is why I want to post about it today.

For a long time, I didn’t use CSS shorthand. I thought it was confusing to learn, and that sticking to the old way of writing each line out was better. I was wrong, of course. For example, here’s the “old way” of defining an element’s background:

background-color: #fff;
background-image: url(images/bg.gif);
background-repeat: repeat-y;
background-position: top left;
background-attachment: scroll;

And here it is in CSS shorthand:

background: #fff url(images/bg.gif) repeat-y top left scroll;

See how much space that saves? Another place I love using CSS shorthand is when I define borders. Let’s say I want box with different border thicknesses. In the old days, I would have done something like this:

border-top: 1px solid #ccc;
border-right: 2px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 4px solid #ccc;

With shorthand, all I have to do is:

border:1px solid #ccc;
border-width:1px 2px 1px 4px;

Yes, you will have to learn the various properties you can use, and their default values. But if, like me, you spend a lot of time designing with CSS, it’ll be worth it. I promise.

For more depth into CSS shorthand, I highly recommend Dustin Diaz’s guide. Do you use CSS shorthand in your code?