In order to make this a full point update, I decided to add a new feature as well — one that a few people have been asking for. You can now exclude categories/tag/terms when calling the plugin now. Huzzah! Now you can stop those pesky quicklink or tumblelog posts from showing up in your random posts.

I suggest anyone currently using version 0.6 upgrade immediately.

With the release of Wordpress 2.3, there has been a fundamental change to the database structure. This change completely broke the existing plugin. Not any more.

Today I’m happy to announce that I’m releasing version 0.6 of the, newly dubbed, Random Terms w/ Posts. This update makes the plugin completely compatible with Wordpress 2.3+. So, everyone that has been waiting and waiting… and waiting, go download it!

What Else is New

The biggie with this update is it’s incompatibility. Version 0.6 will not work with any version of Wordpress prior to 2.3. I’m keeping the older, Wordpress 2.0 and under, compatible version 0.5 plugin around for anyone that doesn’t want to — or hasn’t — upgraded to Wordpress 2.3+.

There is also a new projects page where all further information will be placed regarding this and future plugin updates — as well as any other projects I may feel desire a place here.

This update brings the plugin to version 0.5. Aside from a couple minor code adjustments, the big change for v0.5 is the ability to show post excerpts — something that commenters have been wanting for months. To include the post excerpt simply set the includeExcerpt parameter to true and you’re golden. More information is available on the plugin page.

Setting up my portfolio page has actually given me some time to muck around with Lightbox. It’s dead simple and that pretty much explains it’s proliferation throughout the web.

Given the size of some of the sites I’ve got in my portfolio I’m also thinking of putting the full resolution images up on my Flickr account so those interested can have a look at the big picture. That will probably be done in the next couple days and I’ll add links to the Flickr images on the portfolio page.

I decided to take a simpler approach to my portfolio this time. Instead of the drawn out case studies I had on the previous version of this site I’m just listing some quick details of what I did for each item (HTML, CSS, PHP, etc.). I’m including links to the live sites unless they are changed—in which case I’ll link to my copy of the site if it’s still available on my server.

Alright, enough of me explaining what I’ve done, go ahead and check out my portfolio already.

In the last 10 years of movement towards more online connectivity and inter-operability there has been several updates to Mac OS X and at least one or two Windows updates with many, many service pack and minor updates to both systems. How is it possible that in all of these updates there have been no advances made in giving the online community additional resources in the area of fonts?

To me this is especially confusing since both Apple and Microsoft are making huge efforts to attract large online audiences for their online products and efforts. In the grand scheme of things the online portion of their business is quite small but you would think that even the designers working for both companies would have made enough noise for either company to start including a larger variety of fonts available on the opposite system — even one or two would be nice.

Some developers and designers have started an open letter campaign to Microsoft, Apple and Adobe in an effort to raise awareness of the issue. The problem seems to be licensing and, to some degree, there’s probably some greed or communication issues involved somewhere as well.

The reason for this comment

In the recent past I have received the new Microsoft web fonts that were specifically developed for use on Vista for web developers to use. These fonts have been getting some great reviews from various sources and I wanted to try them out. While working on a new client site I decided to use Calibri, on of these new Microsoft fonts.

After creating all of the CSS — specifying Calibri as the main font with Lucida Grand as a backup — I was very pleased with the effort and look of the website. Then I started sending it to the client for review and was asked to fix several type errors that included orphans — single words being forced onto a new line — in the navigation and small gutters between columns to name a few. Since I couldn’t see what the client was referring to I asked for a screen shot and this is what I received a screenshot similar to this:

Whereas, since I had Calibri installed, this is what I was seeing (images may be a bit fuzzy due to resizing to fit in this column):

Immediately after noticing the fairly significant difference in size between the two typefaces I asked myself how, when using the same size definitions in my CSS file, there could be that much of a difference?! At this point I don’t have an answer. This does show that on the surface some improvements seem to be happening we’ve still got two major problems:

• the new Microsoft fonts are only available on Windows
• there seem to be some major differences in how the new fonts handle sizing compared to traditional web fonts

When will companies like Adobe, Microsoft and Apple work out some sort of solution that will give the online community more than five, generic choices of fonts for use on the web? I don’t know but hopefully it will be soon, for all our sakes.

It is also very important to understand when and why gradients are used in certain designs. Mike does a good job of explaining it:

When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume, depth, and light sources. When you visit a site that looks really sleek and cool, it’s probably because they manipulated your eye correctly and the 3D effect looks “real”, and on sites that look odd or “not as real” it’s because the effects they used didn’t mimic what your eye believes as 3D. Your eyes have been looking at things in the world for a very long time and they’re used to what a shadow looks like, what a light source’s highlight on an object looks like, etc. If you don’t approximate what your eye “thinks” something should look like then your design won’t accomplish the 3D look you’re trying to emulate.

-Mike Rundle, Businesslogs & 9rules

Creating a gradient in Photoshop

The method I use to create gradients is pretty simple, just as everyone else’s methods are I’m sure, but subtly different at the same time. While you could choose two colors with the Color Picker and make a gradient from one color to the other the method I use allows much more flexibility if you decide to change the colors or even want to switch from a light gradient to a shadow gradient.

Step 1: Choose your color and create your base

It goes without saying that you’re first going to want to pick a background or base color for your gradient. This would be the color of the object you wish to give the 3D effect. For this I generally like to simply click on the Color Swatches in the Tool Palette. When the Color Picker appears choosing a darker color would be advisable but it’s your design so feel free to play around with different colors.

Step 2: Make a new layer for the gradient

Here’s were the bulk of the flexibility comes in. By creating the new layer and calling it something simple like “gradient” or “highlight” you can change transform the gradient position, size, color and transparency. The quickest way to create a new layer in Photoshop — on a Mac — is with the key combination: Command(Apple key) + Shift + N

Step 3: Setting the gradient color

Most people would have you choosing a lighter color or some would even suggest picking white as the gradient color. The method I use — or at least one method I use — is slightly different because I keep the gradient color the same as the base color. This is another area where the flexibility of this method lies.

Step 4: Making the gradient

Here’s where Mike and I are very similar — hence the exactly same heading for this step. Select the gradient tool by hitting G on the keyboard — or Shift + G if the paint bucket is selected — and look at the Options bar for the gradient tool. Make sure the gradient type you’re using is Foreground to Transparent — the color you’ve chosen will blend into the gray checkerboard pattern if you are — and that you’re making a Linear gradient — first two options in the bar pictured below.

The other settings you’ll need to check on are the blend mode, opacity and other options. Generally the default positions are the Normal blend mode, which you want, at 100% opacity, which you want, with the transparency option checked — if the dither option is checked there isn’t any visual difference so no need to worry about that one for web graphics. The reverse option will simply reverse the colors so if, for example, your gradient was solid blue to transparent, with the reverse option checked you would actually draw a gradient that would go from transparent to solid blue.

Now all you need to do is make sure the Photoshop window is larger than your current document so you can start the gradient higher than the base/background color. When you’ve picked your starting place for the gradient click and drag an line in a downwards angle slightly towards the lower right corner of the base color/object/shape/background.

Getting the angle right

Be sure to experiment with the exact angle of the gradient because it’s not always going to be perfect the first time — Command + Z is definitely your friend when creating gradients. The trend on the web is to emulate a light source that is coming from the top and off to the left. While I haven’t measured any of the gradient angles Mike suggests a 10° past vertical angle. I say experiment, if the angle doesn’t look right or fit in with the rest of your design, change it.

It is very important to use some length for the line you’re dragging. A longer drag line ensures that the gradient is made much smoother and subtler — and therefore much more pleasing to the eye. This mimics how light sources and refraction’s are in the real world.

Step 5: Set the blend mode for the gradient

You may be wondering where your gradient is at this point. Since we’ve made both the base color and gradient color it’s, unless you’re hiding the base layer, impossible to see any gradient whatsoever. In order to make the gradient show and maintain it’s subtle nature, go to the Layers palette and select the “gradient” layer. Now using the blending mode drop-down menu — reveal all the choices by clicking on the menu — choose the option listed as “Screen”. There you have it, your subtle gradient is now visible for all to see.

Depending on the colors you’ve chosen you may want to reduce the opacity of the “gradient” layer. I generally reduce opacity in intervals of 10% — if the Move tool (hitting V on the keyboard will select this tool) is selected all you need to do is hit the numbers on the keyboard above the letters (the same ones that by holding shift will give you the !, @, #, etc.). With this example I set the opacity to 70%.

Variations on the theme

Throughout this tutorial I’ve talked about the flexibility of this method and by using the blending modes for the “gradient” layer is where you’ll find the majority of that flexibility. By changing the blending mode to Exclusion gives you a slightly different type of gradient — similar to the effect of your object/base color being affected by the color of another object (as long as it’s a complimentary color :^)

If you decide to change your mind and wish to make the object recessed instead of highlighted you just need to change the blend mode of the “gradient” layer to something like overlay, hard light or soft light.

And that would be the method that I use for creating gradients. By adding additional “Solid Color” layers above the base/background and gradient layers and making clipping masks out of them you can easily change the gradient and base/background colors — but that’s a tutorial for another day.

As the story goes, Unmatched Style held a design contest with a cash prize of $1,500. The requirements were very minimal and not very complicated.

• All the really good entries will be featured here on Unmatched Style
• You only have to submit images for three pages — no code
• All entries must be received before July 3

To keep the story short, when the winner was announced no prize money was given “because each was missing a critical piece of the requirements.” Unfortunately for everyone, there were no specifics given. Also, conveniently enough, comments are closed on both entries regarding the contest on Unmatched Style.

Solving the problem

So far, everything that Shane — the author and seemingly the architect behind the “contest” — has done up to this point has been very shady. In order to clean up this mess and regain at least a small portion of his reputation back this issue needs some very clear and decisive action.

Obviously the first step is to enlighten the audience, or at least the winning designer, on the “missing” requirement(s). When information is held and both parties are vague it shows a huge breakdown in communication. That’s where rumors are started, opinions are formed and respect is lost.

By opening up the lines of communication the rumors can be dealt with and a dialog on how to remedy the situation can be started. Whether the designer did miss a requirement or not, if they know what they’re missing, most, if not all, designers will do whatever they can to fix it.

Far reaching affects

There are a lot of people keeping an eye on what’s happening at Unmatched Style. Mark Boulton had some great thoughts on design contests in general and a lot of what he has to say ring very true in my opinion.

Whatever the outcome of this latest debacle regarding so-called “design contests” there are a couple results that we can definitely expect. The first being that Unmatched Style will lose the faith, respect and loyalty of a large portion of it’s readers.

Hopefully more importantly, this will shed a brighter light on these types of “contests”. I think companies or individuals holding design contests need to be much more transparent and as specific as possible. There also needs to be a very open line of communication between the contest runners and any of the contestants. Keeping these things in mind will avoid any undue bad press and confusion for all parties involved.

This plugin, aptly dubbed Simple Countdown, lets you pick a title for the event or time you’re counting down to and merely displays the title along with the remaining days, hours and minutes until the event occurs. The great thing about Simple Countdown is that you can use a plain english date and time, e.g., “next tuesday” or “july 23, 2006 noon”

Download Version 1.0.1

Example: Lunch on January 1st 2012 is in 1 year, 295 days, 3 hours and 4 minutes

The details

Usage

Call the plugin with the following code (be sure to remove any extra spaces after the opening “less than” symbol and before the closing “greater than” symbol — WP keeps adding extra spaces when I post/edit this article).

From the sidebar or template file: < ?php cc_countdown('EVENT DATE AND TIME', 'EVENT TITLE', AUTO DELETE); ?>

From within a post: <!--cc_countdown:EVENT DATE AND TIME, EVENT TITLE-->

The title of the event and time remaining until it occurs will both be written to the page wherever the plugin is called.

Parameters

EVENT DATE AND TIME

(string) the date and time of your event can be written many ways, plain text, like the example above, or using digits, e.i., 09/13/2007. When calling the plugin from a post, placing a “-” (dash or minus sign) in front of the EVENT DATE AND TIME will remove the countdown after the date/time has passed.

EVENT TITLE

(string) Just write the title of whatever event is happening in plain text. This will be displayed as an h5 element on your page/template so make sure you’ve got a nice style for it. When calling the plugin from a post, this is an optional parameter and if added to the tag it can display the title of the event before the countdown. The title will be replaced with an “I’m sorry” message when the event time has passed.

AUTO DELETE

(boolean) Determines whether the countdown should be displayed after the event has occurred. If AUTO DELETE is set to FALSE when the event has passed “(Your event title) has already happened” will display wherever the plugin is called. Default is TRUE.

Version history

Version 1.0.1 — October 27, 2006

• Changed the output of the countdown for RSS readers to ask visitors to view the actual website to see the countdown. Without this message the post would constantly be marked as new because of the changing timer.

Version 1.0 — October 25, 2006

• Added ability to call the plugin from inside posts
• Modified some of the internal code structure
• Renamed the plugin, must now be called via cc_countdown instead of ms_countdown

Version 0.4 — July 8, 2006

• Added the ability to display years if the event is that far away
• Better grammar formation
• Changed the date difference calculations to use less code
• Removed a bunch of useless comments and unused code

Version 0.2 — June 18, 2006

• Released to the public

Installation instructions

To install Simple Countdown, download the latest version from the top of this page and expand the .zip file. Upload the ms_countdown.php file to your /wp-content/plugins/ directory.

When the file is finished uploading, log into your WP admin page and click on the activate link in line with the Simple Countdown plugin. The plugin is now installed and active.

To show the countdown to whatever event you’re counting down to, open up the theme page, such as sidebar.php or single.php, etc. — found in the wp-contents/theme/ folder — in a text editor like TextMate, Dreamweaver or even NotePad.

Once you’ve located the spot you’d like the countdown to show on that particular page, simple use the usage instructions at the top of this page to display the countdown. Save the file and upload it to your theme directory.

Questions, comments, suggestions

I always welcome questions, comments and suggestions on the WP plugins I release. If there is something you think I should add, let me know. Having trouble with the plugin as it is? I’m here for you. Just want to say thanks? Write about it on your blog.

Most web designers and developers raise their rates at this point. Excellent idea. This is also a good way to drop the bottom portion of your client list — the bottom portion consisting of the lower paying clients or the clients that give you very little work. The trouble happens when you’ve got a good client that gives you regular work and has been around for a long time.

Because you’ve had this particular client for a while they can almost predict your rates and what your quotes will generally be worth. This makes it very difficult for some designers and developers to raise their rates. If you just raise them regardless and start quoting differently, this client will notice what’s going on and that generally brings on confrontation. This is where future-proofing your quotes comes in handy.

How to future-proof your quotes

The first step, is to not give out specific information on your hourly rates. It doesn’t matter if you’re only charging $5/hour for a project, keep it to yourself. If a client knows what you’re charging hourly from the first quote they will start doing the math for you. Before you know it they will only start asking you how long a particular project will take and they will give you your own quote.

Along the same lines, try to avoid giving out hourly totals as well. If a client can do the math based on your hourly rate they sure as heck can do the opposite based on the hours. It’s important to remember to give the client a timeline, just not a specific amount of hours.

Some clients like you to print out specific line-items on quotes when they are submitted. The best thing to do in this scenario is to list all your line-items but only provide a final price, inclusive of all the line-items listed. Should the client come back to you to negotiate you can start removing line-items to meet the budget they have. Both of you walk away happy.

Why future-proof your quotes?

I’ve found the biggest reason to future proof your quotes is the complexity creep. As a client gets more and more comfortable with you they will start asking for bigger and better things. Often they won’t understand how complex an idea is and just assume that since the last project only took 15 hours at $25/hour this one will be the same.

Another reason to future-proof your quotes is to account for hand-holding. Every web designer or developer has at least one client that needs to be lead, by hand, through every step of the process. If you’ve taken the time to future-proof your quote, the next time you work with that client you can add in a little extra for the added service you’re providing.

Finally, by future-proofing you can avoid the death trap that is known as price lock. This often happens when one of your clients is very chatty about how much you charge. Mr. Chatty-client is good friends with Mrs. Potential-client — I think they may even be cousins actually — and he likes to tell her all about how little he’s paying for all of this work you’re doing.

So Mrs. Potential-client asks you for a quote to which you carefully oblige. Problem is, Mrs. Potential-client comes back and says, “Mr. Chatty-client said you only charge this much, why are you charging me more? I think I’ll just go somewhere else.” Good-bye new client and hello price lock.

There are other ways

Of course, there are dozens of different ways to deal with these issues. It all comes down to what you’re comfortable with and what fits your personality the best.

In the mind of the client, once the quote or estimate has been accepted the dollar amount is set. Anything and everything they can think of after that is just a bonus for them, and some clients want or even expect a lot of bonuses.

How do you tell a client that what they’re asking for isn’t included in the quote? Maybe we should define what we classify as the elusive scope creep.

Definition of scope creep

The creeping of scope happens after a client has accepted a quote or estimate. Once they have given you the specs — hopefully more detailed than not — the clients mind starts brainstorming again, especially after subsequent discussions with the designer or developer.

All these fantastic new ideas the client is thinking often need to become reality for them. In a clients mind, since they’ve already locked in a dollar amount with a designer/developer adding these “little extras” shouldn’t take much time and therefore should be included in the quote they’ve agreed on.

Why does scope creep?

More often than not, and without knowing it, we will plant new ideas in our clients heads. We seldom realize this is happening because we are constantly surrounded by others that understand what we are talking about.

Designers and developers are constantly brainstorming out loud and with more than one person in their field. This switch is very hard to turn off when we’re talking to a client.

Stopping the creep

If there was one magical answer this topic would be sooo much easier to discuss. Since there isn’t one right answer we have to tailor our approach based on the client. More experienced designers and developers have obviously dealt with this and probably have a nice little collection of responses based on how their relationship is with the client.

Here are a couple of options you may want to try. Keep in mind you should base your response on how comfortable you are with the client.

The candid approach

If you have a history with the client and they are someone that you’ve done a large body of work for or you know them socially the best way to tell them is straight-up. No mincing words, no questions, just point blank. Let them know they are increasing the scope of the project and you’ll have to either re-quote the project or quote on the additional elements they’re adding.

Not enough time

Let the client know that while the additional scope they are talking about would be fantastic for their project it would cause a time and scheduling issue. Working with the new elements would cause you to miss your deadline and/or the deadline for another projects. This approach would probably be best suited for the times where you either don’t want to deal with the client on this issue or you find the client intimidating. Be sure to mention that you’ll consider the additions at a later date if they’re still interested though.

Ignoring the request

In this case the important thing to remember is to actually listen to the requests before following this path. If the scope creep is an avenue you’d rather not take or don’t know if either of the other approaches would work, you could simply ignore the request and complete the project as outlined in the specs and quote. Should the client ask why the additional elements are not on the finished product you can direct them to the approved quote/specs/agreement and ask, politely mind you, if those items are there.

Caution: This takes a delicate approach and you should be a very good people person if you want to go this route.

Stop giving the client ideas

This may be a lot harder than you think. Getting used to simply quoting on the spec, accepting the job and doing your part is tough. As mentioned earlier, designers and developers get excited about their work and like to talk about it. While a lot of inexperienced designers/developers may take this approach the more experienced tend to go with another option.

Obviously this is not an extensive list of options but hopefully it will give you some ideas on how to deal with scope creep. Your mileage may vary with any given approach and these are merely provided as options to think about.

The best piece of advice is to ask around and ask everyone you know — heck, ask people you don’t know but that you respect. People that know you can give you a better idea of what approach would be best for your personality.