Today I was checking out some themes on the Wordpress theme viewer, and I kept noticing some interesting design elements on different pages: super headers and fat footers.

Both can be viable tools to enhance your user interface, but both have pitfalls to consider. I started to think about the possible applications of these elements from a design and marketing standpoint, and I came up with a few pros and cons for each.

Super Headers

Traditional page layouts include a header, a main body, one or two sub columns, and a footer. A super header is an extra strip of information, advertisements, or navigation above the header. Examples include FeedBurner, Technorati, and Daily Kos.

Pros:
1. Prime Real Estate. This is the very top of your page. The first place a lot of people look when they’re discovering your site and trying to figure out what it’s all about. As such, it can be a great place to put ads, like Daily Kos has done. There’s a wide banner ad above the header on their front page. It’s also a good place to put your “About” and “Contact” links.

2. Super headers are unobtrusive. If you’ve got some links that you need to publish like terms of service or affiliate information, you’ll want them to be out of the way yet accessible. A super header is a great tool for accomplishing this. Mashable uses their super header for this purpose.

3. Meta navigation. A super header is a great place to put links for logging in to a service or managing user accounts. Google has been using their super header in this way for quite a while. Between the super header on all Blogspot blogs and their placement of their login links, I actually think Google is responsible for the growing use of this design element.

Cons:
1. Easy to ignore. The only real problem I have with super headers is that they have a tendency to blend in with my browser’s toolbars. For example, when I signed up to use Feedburner to publish my RSS feed, I had very little trouble navigating their site. But when I returned to check my stats a few days later, it took me a good minute or two to find the very tiny, very gray super header with the login link. I passed right over it because it blended in with my browser. A good rule of thumb for super header backgrounds is to go bright or go white. Avoid patterns and muted colors.

Fat Footers

While I don’t have any plans to add a super header to One Thing New any time soon, I am strongly considering developing a fat footer. I’ve seen these used on sites like lifehack.org, Bokardo, digg and others to add lists of links, tag clouds, and other data to the bottom of their pages.

Pros:
1. Where am I, again? If your blog front page is super long, having a fat footer with your logo repeated and some basic navigational links makes sense. By the time someone gets to the end of your 10th post, it’s nice to remind them where they are and reinforce your brand.

2. Come back again. Your fat footer is an excellent place to put subscription options for your readers. Besides having a big RSS link at the top of your sidebar or somewhere equally prominent, you can add a ton of subscription chicklets to other services in your footer. That way, your sidebar stays uncluttered, but you’re still offering the option to your readers.

3. Recommended surfing. Let’s say your blog isn’t the only Web site you are affiliated with. Your fat footer is the perfect place to promote your other ventures. If someone has read your blog to the end, they’ll see your links to other offerings and might continue their infatuation with your content.

Cons:
1. No really, where am I? If you don’t reiterate your brand in your footer, your readers won’t know or care what they’re looking at, and they’ll gloss right over it. Also, using your footer to display ads is a bad idea. That’s not the last image you want your readers to take away from your site.

2. Location, location, location. In case you’ve forgotten, the footer is at the dead bottom of your page. Eight times in 10 your readers won’t scroll that far down — especially if you have your blog set up to post multiple stories on the front page. So, make sure you don’t put any vital information in your fat footer. Things you put down there should be semi-redundant, meaning the things you link to in your footer can be found in more prominent places on your page. Or as I mentioned with the subscription links, offer one option up top and put add ons in the footer.

Again, both super headers and fat footers can be beneficial if used properly. Keep your eyes peeled for a fatter footer on this site in the next couple of weeks.

Today, I started working on integrating an installation of Gallery2 into an existing template. My client wants to add a photography portfolio to her freelance site, and she wants to be able to update and maintain it herself once I’m done. So after doing some research, I decided to go with Gallery2 (with Coppermine a close second) because of its great user interface. Turns out having an easy to use program doesn’t always mean it’s easy to install.

Gallery2 is an image gallery platform that uses PHP, Smarty Tags, and a database backend to let you organize and manipulate your images on your hosting server. Gallery2 is crammed full of features, which actually becomes its main weakness: it has feature-itis. While modifying one of the prepackaged themes, I keep finding myself cutting away whole chunks of extraneous code.

It’s pretty frustrating because at this point, I know enough PHP to realize that Gallery2 is overqualified for this job. But I don’t know enough to build my own application from scratch. So for now, I’m stuck having to cut back an action-packed application like Gallery2.

Another problem I’m having with the Gallery2 guts is that the album pages are laid out with tables. I’ve been a div man for years now, and it’s been quite a while since I’ve worked with tables as layout elements. I know pages of thumbnails can be considered tabular data and thus would warrant using tables. But I’d designed my template using divs before I chose the gallery platform. It’s nothing I can’t handle, but it’s frustrating nonetheless.

My final gripe with Gallery2 is the same I’ve had with every content management system I’ve worked with — I’m talking to you Wordpress, Joomla, Blogger, phpbb, Coppemine, etc. How about instead of giving me preloaded templates and themes that have tons of features I have to remove, you make the out-of-the-box template as bare bones as possible? Then, instead of ripping a template apart and removing the features I won’t use, which has been faster than building one from scratch in every platform I’ve used except Wordpress, I can add features to a solid foundation.

Now let me add that, as is always the case when I discuss Open Source applications, I am eternally grateful for all the hard work the developers put in so that I can have access to these awesome products. When I have problems with these platforms, I’m typically as frustrated with my own limitations as I am with the applications. So just because I whine a little, don’t think I’m not appreciative. I’ve just had a hard day, and now I feel better. Thanks for listening, Internet!

I was perusing digg this evening, and I came across this article about color choice and on screen readability. According to the study, Times Roman italic in green on a light yellow background (sound familiar?) is the optimal combination from a readability standpoint. Choosing a good color scheme for your site isn’t just necessary to facilitate reading; it’s also important to pick colors that reflect the meaning and intention of your site.

If you’re bringing a pre-existing brand to your Web site, you should chose colors consistent with your logo, signage, letter head, business cards, etc. Your purpose for creating your Web site is to extend your brand, and if you go off on a color tangent on your Web site, it will be harder to maintain your brand identity from the real world to the virtual one.

If you are creating a brand from scratch on your site, choosing color goes hand in hand with establishing a brand identity. You’ll have to consider which colors best reflect your brand, if you want your color palette to be muted or bold, how many colors to use (too few is boring, too many is confusing), and how to combine those colors to best express your message.

Selecting your color scheme is an extremely subjective task, and it’s different for every business. So, rather than a step-by-step tutorial about color picking, I’ve put together a list of online resources that can guide you through the process.

1. Complete Color Matching Guide
   This site is about as comprehensive a list of color resources as I’ve ever seen. Of particular interest are the links to articles about the meanings, symbolism, and psychology of colors. For instance, did you know that yellow can represent intelligence or that different shades of green can mean anything from peace to jealousy. It’s fascinating.
2. 10 Tools to help you select a Web 2.0 Color Palette
   As the title says, this is a blog post with a great list of online tools for creating Web 2.0 color schemes. My favorite is ColorBlender.
3. COLOURLovers
   I haven’t even scratched the surface of exploring this site yet. From their About page: “COLOURlovers is a resource that monitors and influences color trends. COLOURlovers gives the people who use color a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.” The article that brought me to this site is an excellent analysis of the color palettes of Grammy-winning album covers. COLOURLovers looks like an incredible resource for designers of all kinds.
4. ColorZilla
   ColorZilla is a Firefox plugin that lets you pull colors from any Web page you’re visiting. I certainly wouldn’t advocate lifting entire color schemes from other people’s sites, but if you come across a shade of blue that you really like, this tool makes it easy to grab it. In the past if I wanted to do that, I’d take a screen shot of the browser and use the dropper tool in Photoshop or GIMP to get the color. This plugin is much easier.
5. Hex Hub HTML Color Codes
   I’ve posted this link before, but it is my go-to resource for picking colors. As much as I love the widgets that let you slide a bar or scroll around a color wheel to pick a scheme, there’s something about being able to see every color available on one page that is easier for me. A lot of times, I’ll find a shade of the color that I like on the Hex Hub, and I’ll take it to one of those automatic color schemers to flesh out the palette. Nonetheless, I use this site all the time.

Choosing colors is such a fundamental part of creating any sort of design project that a lot of folks, I think, take for granted how important it is. I hope these resources point you in the right direction when it’s time to develop your site’s color palette.

So I’ve spent the better part of today installing and playing with Ruby on Rails on my Mac. For those who don’t know, RoR is a server-side Web application framework that facilitates the production of dynamic Web sites and Web applications. At the moment, I’m hip-deep in all this stuff and don’t have much time for blogging tonight. So instead of an in depth post, here are a few links to Ruby on Rails sites that have helped me get up and running.

1. Hivelogic - Installing rails on OS X.
2. A great “Hello World” tutorial from the RubyonRails.org documentation.
3. Why’s (Poignant) Guide to Ruby - I haven’t finished it yet, but this is an extremely fun guide to the Ruby programming language.
4. Start to put it all together and fill in the gaps with this piece by Amy Hoy
5. Beginner’s guide to using AJAX on Rails - This is actually what I’ve been working on today with this book to guide me. But this piece on the O’Reilly Web site is a good introduction to the process.

RoR is such a popular framework these days, and the amount of information about it on the Web is pretty daunting. But hopefully I’ve done some of the grunt work for you, and these links will get you going. As I get further along in my own Rails education, I’ll post more about my experiences.

By the way, I resisted the urge to call this piece “Rob on Rails” out of some misguided attempt at professionalism. We’ll see how I feel about that in the morning.

It appears I need to revisit some things from Saturday’s Weekend Web Developer post about Wordpress. The intention of my article was to provide some tips for making the Wordpress posting experience easier for bloggers new to Wordpress.com. As it turns out, two of my tips aren’t viable for Wordpress.com for a couple of reasons.

First, the version of Wordpress available on Wordpress.com isn’t a fully functional implementation of the platform (I still think the tips are worthwhile for folks using the fully functional Wordpress platform). Wordpress.com doesn’t allow plugins or themes created from scratch. I’m sure it’s because of the potential security issues that could arise from users uploading Javascript and PHP files to their servers. This is totally understandable from their standpoint, but in my opinion, it takes away the most alluring aspect of Wordpress: it’s ability to be customized. So, my tip about adding plugins to increase the platform’s functionality is totally wrong when it comes to Wordpress.com.

Secondly, Wordpress.com doesn’t include the theme editor, so my tip about adding a couple of CSS classes to your stylesheet won’t work. There is an option to pay $15/yr for the ability to customize your stylesheet, but this just seems ridiculous. I’m going to do some more research, but based on this, I’m starting to think that Blogger is actually more customizable than Wordpress.com. I’m going to start playing with Blogger some more to see if that’s true.

In conclusion, my tune has officially been changed when it comes to Wordpress.com. (Not Wordpress.org, which is the homepage of the open source community developing the platform. I still love the fully functional platform.) I just assumed that Wordpress.com would be a full implementation of the platform, but it’s not. I tried all Friday evening and all day Saturday to sign up at Wordpress.com, but I was unable to access the site. I should have waited until I had researched the site more before I wrote about it. Lesson learned: always do your homework!

I still believe that the Wordpress platform is the best blogging engine, but Wordpress.com is a bastardized version of it. So, to all you casual, part-time, weekend bloggers, I say stick with Blogger! Wordpress.com just isn’t there yet.