My original selector looked something like this:

And here is what I noticed afterwards:

1. If the title contains only one word, it actually disappears,
2. More often than not, you will have nested tags in your titles and they would get lost when the script runs

So to fix both issues, we just have to account for those possibilities:

Note that the same can be true for small, strong, em, and other tags, etc. The point is just to be careful.

Here’s Chris’ original article on preventing title widows just for reference.

Say you have a box (div) displaying a different testimonial every time the page is loaded. And you want two other boxes to be the same height as the one with the variable size testimonial.

* Note that if your content contains images, you will want to run the script once the window is loaded instead.

The Javascript

Nice & easy:

I will actually work on a example integrating WordPress into the equation and update this article as soon as I get some spare time in my hands.

If you have a more efficient method, please comment away! Otherwise, I hope you find this useful.

http://net.tutsplus.com/

I don’t think I even have to say a word about this one. The whole Envato network is simply “mind-blowingly” solid.

High quality tutorials and screencasts, managed by the legendary Jeffrey Way.

CSS-Tricks

http://css-tricks.com

Chris Coyier has a pretty unique way to tutor you through the countless issues he’s faced in the past. If you go through all the posts in CSS Tricks and pay attention you will save yourself a thousand headaches.

CSS Trick - Curated by Chris Coyier

jQuery 4 Designers

http://jqueryfordesigners.com

While not updated as frequently as the blogs mentioned above, every single screencast Remy Sharp’s done on jQuery is extremely informative. No doubt he is a busy guy. If you’ve never used jQuery before, and have some programing experience, this site will give you a lot more to “write about”.

JQuery For Designers - Learn jQuery, it's a must!

David Walsh

http://davidwalsh.name

David is pretty much Remy’s evil twin. The former a die-hard Mootools fan and the later a die-hard jQuery fan. Take your pick.

PHP, MooTools, jQuery, Javascript & more

Web Designer Wall (Nick La)

http://webdesignerwall.com

I had to praise the local talent as well! Nick’s blog mixes artistic inspiration with valuable information like a true pro. I hope his obvious gift with the pen tool is contagious.

Web Designer Wall - Creative Design at its best

Digging Into WordPress

http://digwp.com

Another site co-authored by Chris Coyier & Jeff Starr (Perishable Press) released to compliment their also awesome book Diggin’ Into WordPress. Both the book and the site are meant to fill in the gaps when it comes to WordPress configuration, coding and administration.

Digging Into WordPress - Hmm, not much to explain...

WP Beginner

http://wpbeginner.com

Like the name suggests, this is a great place to start if you are thinking of coding your first WordPress theme. Even though I’ve been doing WordPress sites for quite a while, going over some of WP Beginner’s knowledge base has proven worth my time.

WP Beginner - The basics and not so basics for WP lovers

Smashing Magazine

http://smashingmagazine.com

I remember landing on Vitaly’s Friedman’s personal site back in the day and thinking He’s only 18!. He is now one of the main faces running the Smashing Network.

Smashing Magazine - A plethora of resources into one.

Sitepoint

http://sitepoint.com

Sitepoint tends to cover both technical and broader topics all related to web development. It is a great resource to keep up with general knowledge and news about the industry. They also tend to shine the spotlight on the newer technologies pretty quickly.

Sitepoint - News, Articles & Tutorials on Web Development

And it goes on…

I seriously think reading and understanding everything already written in the sites above would easily take you more than four years. In that sense, the Internet has become a gift and a curse on all of us, and that’s all I meant in the introduction. Going to College or University also helps with other valuable aspects such as building social, teamwork & project management skills, providing field experience while being fun at the same time.

There are also many, many, many other sites out there that fit in this category. For example, w3schools is a great resource when it comes to any language related to web development. Others like CSS Perk, and CSS Elite are great sources of ideas and inspiration, and yet others like Freelance Folder hammer on the aspects of running your own business.

As far as SEO goes, I am no expert, but if I must point you somewhere for that, I would look at the Google’s  SEO Starter Guide to begin with, and on that note, I think that nothing beats high quality content, but the SEO field can be extended much further if you consider things like ad campaigns, information architecture, keyword analysis, landing pages, etc.

Last but not least, if you know of any other great resources for web development, please leave a comment! Writing this article also made me realize that I don’t really know any outstanding sites for learning how to make websites using Flash (not that it is my niche, but maybe soon I’ll make the time to learn it. I know things changed a lot with ActionScript 3.x and there must be as many tools out there for this purpose as there are for CMS sites today). Furthermore, none of the Joomla! tutorial sites I’ve been to have left a good enough impression. For that, the official Joomla! Forum and the Joomla! Developer Site have been pretty useful.

I hope this list helps us make the web a better place and also helps our clients understand how much work can go into every project.

CU3ER unfortunately depends on both Flash 9 & javascript to work. So if you expect lots of your visitors to lack either of them, CU3ER is not for you. Having said that, CU3ER is way cool!

In nutshell, you will need to:

1. Download and upload the necessary files onto your sever
2. Include cu3er.swf, swfobject.js, expressInstall.swf, optionally font.swf
3. Upload your images and note their absolute location.
4. Add a div with alternate content in case js or Flash are not available
5. Create a config.xml to communicate with your instance of CU3ER

A Quick Tutorial

Let’s get to it.

First, you need to dowload CU3ER, and upload the files to a folder on your server (e.g. “/cu3er”).

Second, you need include and configure the swfobject plugin:

Third, include the HTML for the CU3ER container and an alternative in case flash or javascript is disabled. The code below is not optimal, and it is not what I have on my homepage. You can place whatever HTML you’d like and I encourage to do so if you want to be able to tell your fwends your site is progressively enhanced.

The last step is to edit your config.xml file. This file basically passes all the parameters to your instance of CU3ER. Once you are acquainted with the available properties it will be a lot easier but the whole thing is pretty self-explanatory. Here is cropped version of the one I used for the animation on my homepage.

So, there you have it. I know it looks like a lot but I think it’s totally worthy, don’t you?

If you want to really dig into this technology, please visit the fabulous, official CU3ER documentation.

Trust me, after you do this once, doing it again will be a piece of cake.

If you know any other great galleries, please leave a comment and let me know.

Have fun!

In this case, I didn’t have that many top pages, so I hard-coded the main nav and used the get_permalink() function to link to the right pages. The only thing you need is to know the IDs of the pages you want to target. To find out:

1. Log into your WP Admin area
2. Click on “Edit” under Pages (or under Posts)
3. Mouse over the page whose ID you need, and
4. Look at the status bar at the bottom of the browser.

The ID will be the last element in the URL (e.g. “…&post=65″).

The same technique also works if you want to find out a particular post’s ID.

The Main Nav

Below is the xHTML/PHP code for the hardcoded main nav, showing only one item. The one thing to note about it is that when you don’t use a function like wp_list_pages(), you also have to add the current_page_item class manually.

The Subnav

For the sub-navigation, I didn’t want dropdowns. Rather, I wanted the child pages to stay on only when you are on a particular section or on one of its child pages. So, I used conditional statements and the wordpress function wp_list_pages(). Within the function’s arguments, I filtered out the pages that belong to that particular section with the “child_of” parameter.

The CSS

Nothing surprising here, the li elements are floated left against each other. And both nav blocks are placed on the page using absolute positioning relative to their parent elements.

Final Notes

I am very aware that this was probably “too much work” for this nav and very similar effects can be achieved using much less code, yet by doing it this way you can have full control over exactly how you want elements to behave. Not to mention, most of it will work even if javascript is disabled. Last but not least, the tooltip effect on the icons is a simple implementation of jQuery Tools. Just include their library and follow their excellent tooltip documentation.

Also, note that for SEO purposes, how you display your navigation is almost irrelavant as long as you don’t change the permalink structure of your URLs. If you have to do so, then you will experience the burden of having some links displayed in Google search results with broken links until a Google bot recrawls your site.

All said, on the next article in this series, I will build a very similar nav using the WP_Query object and you will learn a lot about implementing WordPress custom loops.

Stay tuned.

I’ve had the pleasure to work with a couple other E-mail marketing companies in the past but Constant Contact‘s somewhat recent redesign caught my eyes and for a good reason. I love how much easier to read their site is and their soft color scheme is really pleasing to the eye. Their graphics are also elegant and simple taking very little toll on the bandwidth, thus making the site pretty fast and beautiful.

Constant Contact - Email Marketing

TED

Have you met TED? This is personally one of my favorite sites EVER! The whole concept behind the conference is amazing and inspiring. I could spend an entire day watching and learning from every single one of their guests but you have to watch a few of their TED talks (if you haven’t) to truly understand what I am talking about.

TED - Ideas Worth Spreading

CNN (UK)

Designing any news website would be quite a challenge. Out of the ones I’ve seen so far, I think CNN’s (UK) is the most uncluttered.

CNN (UK) - News Portal

High Rock Studios

This design firm seems to be huge and quite successful as well. I can only dream of working for a company like that someday * knock on wood *. I love what they have done with their portfolio and introductory video. The former slim and the latter definitively leaves quite an impression.

High Rock Studios - Marketing & Design Firm

SideReel

I was a University student not too long ago and discovering Sidereel just happened to be one of the best things ever (at the time). Besides the site’s main purpose, they have managed to create an impressive community with seamless Facebook integration, reviews & articles both internal and external. I gotta say I liked how the banner in previous versions of the site blended better into the rest of the site. Still, Sidereel is great example of information architecture at its best.

SideReel - TV shows online and great community

Do you have any other great examples of great information architecture? Please, do share! Leave your comment(s) below.

Most of the posts will be somewhat random and will cover things that catch my eye while surfing the net or think they are really neat in one way or another. Some examples of what you may find within this “random” group of posts will be book & game reviews, time-killers, productivity tools, product spotlights, music, etc.

Having said that, at least once a week, I hope to come up with a much more elaborate, professional, high-end article on some topic related to web development. This article could cover some neat coding technique that may or may not be CMS-specific. In addition, I will do my best to publish something that is worth reading.

I know there are countless of great resources out there already and thus, when I write, rather than just regurgitating the same content, I intent to expand on it or apply into something new.

I hope you have as much fun following my writings as I will putting them together.

Last but not least, Happy Belated New Year and all the best for 2010.

~Rodrigo.