At DynamiX, we love nothing more than getting deep into statistics to find out what trends are taking place, what small changes can make a significant impact to the results gained on a particular page, etc. But this one is just plain easy to track, and is very helpful in determining when your site has reached Google’s index.

To explain what to do, let’s use an example that just happened. We recently published an article on our business site about one of our clients, and published it at 10:52am.

Since we are subscribed to Google Alerts, we are informed “as it happens” when a new page has been indexed by Google. It’s not always perfect, but it does a decent job. In this case, our e-mail came in at 11:00am, just eight minutes after we first published the article:

It’s not always this cut and dry, but tools like Google Alerts will often give you a pretty good indication of when something new has hit search engines.

We just came across a great site for visualizing your blog content. It’s called Wordle, and it’s delightfully easy to use. Just keep in mind that Wordle creations are licensed under the Creative Commons Attribution 3.0 United States License and all images must be attributed to http://www.wordle.net/.

With all that out of the way, here’s ours!

The program allows for a lot of customization, including color, positioning and fonts. To get even more creative, you can play with the Advanced version of Wordle, which allows you to choose the weight of words yourself.

After a little tweaking and some custom colors, here’s how ours looks:

And here’s one we created using the colors of one of our clients, Injected Engineering:

Try it for yourself and link us to your finished creations in the comments!

Keeping up with web technology resources can be of tremendous benefit to any good website designer. As an organization, the DynamiX team frequents all of these sites with great regularity, and flag/categorize important articles for later reference. In so doing, we are able to stay in touch with the latest trends and upcoming technologies that will continue to change the face of the web, and are able to ensure we are continuing to move forward on our own work. As you either already know or will soon learn, even a short stagnation in skill growth can spell doom in the website design world. It’s a keep moving ahead at full speed or quit now business.

Resource: Smashing Magazine

Of course it goes without saying that no article would be complete without including Smashing Magazine as an essential resource for web designers, and we have given it proper respect by making it the first on our list. If you haven’t found these guys yet, you are in for a treat. smashingmagazine.com

We don’t mean to toot our own horn, but we are proud to have been featured in Smashing Magazine ourselves twice. Once for DynamiX Labs, and a second for our work on Blue Hat Design (bluehatonline.com).

Why We Love Them:
Aside from their aforementioned featuring of our work, Smashing Magazine is an excellent resource for virtually everything you may need as a website designer. The articles are well thought out and loaded with example imagery and links, but the site doesn’t end at the articles. Patterns, brushes, icons and even entire themes are available for free, and when I say “free” I am speaking of commercial use in most cases. This is a welcome change from the myriad of sites out there that simply grab anything that says “free for personal use” and throw it into an article hoping for some quick traffic. Drop these guys into your favorite RSS reader today, and I guarantee that you won’t be disappointed.

Resource: Webdesigner Depot

Why We Love Them:
It probably boils down to the level of time and research that goes into every article we read from these guys. Nothing was just pushed out the door just to get it up on the site, it’s all very well researched and with exceptional examples. But then you can discover that for yourself here: webdesignerdepot.com

Resource: n.design studio

Why We Love Them:
Not only do these guys know design better than most, but they sift through the mess that is the Internet to find many great apps and websites. Often their posts are no more than a paragraph in length, yet they still manage to say all that needs to be said. ndesign-studio.com

Now It’s Your Turn:

Our list is intentionally short (we left out about 17 other blogs that we frequent often), what resources have you found useful? Share in the comments!

There are literally thousands of icon sets out there. Some are free for personal use, some free for commercial use and many are paid sets. We often come across sites that feature great icon sets that they claim as “free,” with no explanation as to whether they are personal or commercial licenses (they are often only free for personal use).

To clear things up and provide icons that you can actually use for your projects, we have compiled our own list of only the best icon sets that we could find that are all completely free for COMMERCIAL use. Enjoy!

E-Commerce Set:

License (from the downloads page of their web site):
“Available e-commerce icons may be used in any projects, whether commercial or private nature. Please refer the ZIP archive with shop symbols not directly, but I would appreciate a link to this post. Thank you.”

Download it now! http://playground.ebiene.de/2316/free-ecommerce-icons/

Circular Icon Set:

License:
“Circular is free to use for whatever you like without attribution – the only thing we ask is that you don’t distribute them yourself!”

Download it now! http://prothemedesign.com/circular-icons/

Stationary Icon Set:

License:
“100% Free”

Download it now! http://www.dezinerfolio.com/freebie/stationery-free-vector-icon-set

Bright Icon Set:

License:
“You can use Bright! for personal and commercial projects at free of charge. What I only need in return is your comments and backlinks, if possible. Do not redistribute or sell any icons of this set. Do not provide the direct download link nor upload Bright! onto other servers for your own share (Please link to this article instead – I deserve some traffic!).If you want to spread the words, just link to this article.”

Download it now! http://min.frexy.com/article/bright_a_free_icon_set/

Project Icon Set:

License:
“completely FREE… (even commercial use)”

Download it now! http://www.dezinerfolio.com/freebie/project-icon-set

Shiny Icon Set:

License:
“This free set includes 20 icons that you can use for both personal and commercial projects. Resell and distribution is not allowed.”

Download it now! http://www.doublejdesign.co.uk/2009/11/a-free-icon-set-shiny/

The Ultimate Free Icon Set:

License:
“You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.”

Download it now! http://www.smashingmagazine.com/2009/06/18/freebie-release-quartz-icon-set/

As with any other freebie, we highly suggest reviewing the license on these sites directly as it may have changed since this article was written. If you catch one that is no longer accurate, do let us know!

We’d love to hear about your favorite free (commercial) icon sets, leave us yours in the comments!

We wanted to thank our veterans and active military for all that they do to help keep us safe, so we created a banner for our site. Then we thought, why stop there? So, being a tutorial site, we created a quick “how-to” on adding this to your own web site.

We created three versions, one with a link back to this article to help others add this to their web site, a second with simply the banner, and a smaller version.

Link-Back Version:

To create a version of this banner that links to our tutorial, simply add this just below the <body> tag on your web site:

<div id="veterans"><a href="http://www.dynamixlabs.com/2009/11/11/thanks-to-our-veterans/"><span>Click Here to Show Your Support!</span></a></div>

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:130px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day.jpg) no-repeat top center;border-bottom:1px solid #000;}
#veterans a{display:block;width:100%;height:130px;}
#veterans span{position:absolute;top:-999em;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

No Link-Back Version:

This is the same banner, but without the link back and the “Show Your Support With This Banner!” text. Simply add this just below the </body> tag on your web site:

<div id="veterans"></div>

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:130px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day-No-Link.jpg) no-repeat top center;border-bottom:1px solid #000;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

Small Version:

This banner is just 70 pixels high, instead of the 130 pixels in the first two, and the text centers perfectly on an 800 pixel wide site. Simply add this just below the </body> tag on your web site to use this banner:

<div id="veterans"></div>

Next, add this CSS to your stylesheet:

#veterans{width:100%;height:70px;background:#36476d url(http://www.dynamixlabs.com/Happy-Veterans-Day-Small.jpg) no-repeat top center;border-bottom:1px solid #000;}

If you would prefer to download and use the image on your own, here it is (right-click and save):

We would love a comment on where you have used this, though it is certainly not a requirement. We would also be happy to release the original .PSD file if desired, just let us know in the comments!

A Short List Of Several Sites Already Using This Banner:
– Omni International
– Charis Hills
– DynamiX Web Design

Like all good web developers over the last nine or so years, we have dedicated countless hours to ensuring compatibility with the archaic, standards-naive Internet Explorer 6. Well, here’s where we make our stand. While we are not, at this point willing to jeopardize the visitor experience for our clients by building company web sites that are not IE 6 compliant, we are officially cutting the cord on our own DynamiX Labs web site.

Why Kill IE 6?
Quite simply, because it simply can’t handle most of the great advances that have come along over the past nine or so years. This includes PNG transparency (yes, it SORT OF works with hacks, but not well, and almost never properly for backgrounds), not to mention any hints of HTML 5. Even such simple areas as fixed positioning are a challenge for IE 6. The point is, IE 6 is forcing web designers to lower their standards, and to not push the envelope in advancing newer technologies. If a designer has a feature in mind that will be a really great addition to a new web site, but will take a great deal of effort to complete, they are likely to bypass it completely if IE 6 can’t handle it through hacks. That’s a shame. So let’s stop the stagnation and keep pushing the envelope, and leave IE 6 behind where it belongs.

The Back Story.
Recently, this site was recreated from the ground up with a brand new design. We spent a lot of time making it look good in standards compliant browsers, only to find that IE 6 (naturally) was a mess. So, after several hours of attempting to make the design appear as it should in IE 6, we had had enough.

What We Did.
We created a small piece of PHP that checks to see what browser, and what version a visitor is using to visit our web site. If using anything other than IE 6, the site will render as normal. But, if a visitor does navigate the web site from IE 6, they will see a completely different header, footer and design (stylesheet driven), in fact the original design that we have had in place for the past several years. In other words, IE 6 is doomed to forever live in the past, while better browsers will continue to move forward as we do.

The End Result.
Here’s how the site appears in Internet Explorer 6:

For anyone still browsing our site in IE 6, here’s what you are missing out on:

More Reading.
For emphasis, we added the code from http://www.ie6nomore.com/ onto our IE 6 version, letting visitors know that they could be getting so much more than what they are. I encourage all designers to implement this code on their non-client web sites. The time will certainly come when this should be implemented universally, but let’s get this process moving on our own web sites for the time being.

If you have a client who is of the same mind about IE 6 and is willing to add this to their web site, all the better, but we don’t suggest forcing this on your clients.

Big Red Disclaimer:
Yes, we know that there are some companies who have had IE 6 forced upon them. For these people, we’re sorry, but it’s time to start pressuring your IT guys to at LEAST allow you use of Firefox, Safari or Chrome in addition to IE 6. There should be no excuse to only allow Internet Explorer 6, particularly since programs that allow multiple versions of IE have been around for years now (see http://tredosoft.com/Multiple_IE for a great XP-based one). There’s even a hack for Vista users. So, the question to ask your IT guys is, WHY only IE 6?

Looking forward to the comments and criticisms!

We recently installed the Tweetmeme WordPress plugin, only to find that it threw over a dozen errors our way that invalidated our XHTML Strict code. It’s far too valuable a plugin to leave off of any good blog, but we do want to be sure that the code doesn’t throw errors. Here’s how to fix those under five minutes.

1. Replace & with &amp; where necessary.
The list should be: &source, &style, &service, &service_api, &force
You can simply do a find and replace for each of these with your &amp; equivalent.

2. Change “iframes” to “objects”
For this, you can simply copy and paste our code:

FIND:
<iframe scrolling="no" height="105" frameborder="0" width="200" src="http://api.tweetmeme.com/chart.js?url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;chs=200x100&amp;force=true">

REPLACE WITH:
<object type="text/html" data="http://api.tweetmeme.com/chart.js?url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;chs=200x100&amp;force=true" style="height:105px;width:200px;border:0;overflow:hidden">

FIND:
<iframe src="http://api.tweetmeme.com/button.js?url=' . urlencode($url);

REPLACE WITH:
<object type="text/html" style="overflow:hidden" data="http://api.tweetmeme.com/button.js?url=' . urlencode($url);

FIND:
$button .= ' frameborder="0" scrolling="no"></iframe>

REPLACE WITH:
$button .= ' ></object>

FIND:
target="_blank"

REPLACE WITH:
target="_parent"

That’s it! That wasn’t so bad now was it? Please let us know in the comments if you run into any issues.

Rounded corners are still as popular as they ever have been, but many designers don’t know how to easily create these using Photoshop. Today we are going to create a template that you can adapt as desired, and show you exactly how we made it in four easy to follow steps.

Here’s how our final document will look:

Step 1: Open/size your image.
For our example, we chose 550 pixels by 290 pixels. For ease of working, we recommend making the document a little bit larger than your intended end result. Here’s how ours looks:

Step 2: Add a rounded box.
Use the “Rounded Rectangle Tool” to create a box around the portion of your image that you would like to capture. Be sure to adjust the radius to suit your rounding desires. We set ours to 25 pixels for this example. Your document should look similar to this:

Step 3: Positioning and layer order
Position the rounded box where you would like it, then drag the layer underneath your image within the “Layers” tab. Your document should look similar to this:

Step 4: Create a clipping mask
Here’s where the fun begins, and where your work ends (unless you just want to add some finishing touches). Simply right click on the image layer, and select “Create Clipping Mask.”

Your document should now look like this:

Now, you can easily add more life to this image before you save it, but the basics are covered. Want to get more creative? You can add more layers, text and even style the rounded area itself through the “Layer Style” window.

In our example .PSD file, we have added in a semi-opaque left hand content area, and added some example text. We also added a stroke and drop shadow to the rounded shape, and used Images – Trim to remove the whitespace around our image. Want to know exactly how we achieved any portion of this .PSD? Leave us a comment below!

Recently, we came across the need for some very simple tooltips. The only real caveat was that they needed to be lightweight, and since we already had a number of scripts running on the page, we preferred to make these using just css. Thankfully, our dear friend the <span> tag is up to the challenge of making these tips fairly easily.

Example 1

We’ll start with an easy example. You have a link to somewhere, and want people to see a message before they click on it.

Like this:
Hi Labs visitors! Don’t forget to check out DynamiX Web DesignIt’ll rock your socks off!!

Here’s the HTML:
Hi Labs visitors! Don't forget to check out <a href="http://www.dynamixwebdesign.com">DynamiX Web Design<span>It'll rock your socks off!</span></a>!

It doesn’t matter whether you place the span tag before or after the actual text for the A tag, just as long as it’s inside it.

Here’s the CSS:
.dynamixtip{position:relative;}
.dynamixtip span{display:none;}
.dynamixtip:hover span{display:block;position:absolute; left:0;top:20px;}
This part is just for the look/feel of the tip, style as you wish:
.dynamixtip:hover span{padding:3px;background:#5f9215; color:#fff;border:1px solid #3f6607;font-size:10px;}

Simple isn’t it? Now let’s get more complicated (but still easy).

Example 2

What if you wanted to put a picture in that tooltip, and float it to the right of your link?

Like this:
Balloons are cool!

Here’s the HTML:
<a href="http://www.sxc.hu/photo/1011246">Balloons are cool!<span><img src="http://www.dynamixlabs.com/images/balloon.gif" alt="this balloon rocks" /></span></a>

Here’s the CSS:
.dynamixtip2{position:relative;}
.dynamixtip2 span{display:none;}
.dynamixtip2:hover span{display:block;position:absolute; left:130px;top:-50px;}

Configure “left” and “top” as desired to position your tip, and you’re done.

Example 3

Let’s say you wanted to tell someone that this balloon is red.

This balloon is red!

This one is just as easy as the earlier examples. There are a few ways to do this, depending on what you want/need to do for this item, but we chose to simply encase the image in a div and apply our class to it. Note that IE 6 doesn’t support the hover property when applied directly to a div. Alternatively, you can simply replace the div with another span tag, and add “display:block” to .dynamixtip3. If you want us to get fancier, leave a comment and we’ll be happy to get into some alternatives.

Here’s the HTML
<div><img src="http://www.dynamixlabs.com/images/balloon.gif" alt="this balloon is totally red"/><span>This balloon is red!</span></div>

Here’s the CSS
.dynamixtip3{position:relative;text-align:center;}
.dynamixtip3 span{display:none;}
.dynamixtip3:hover span{display:block;position:absolute;left:65%;top:25%;}
This part is just for the look/feel of the tip, style as you wish:
.dynamixtip3:hover span{padding:3px;background:red; border:1px solid #800;color:#fff;font-size:11px;}

Notice that for this example, we positioned the tip using percentages instead of pixels. You can of course also use em if you prefer.

That’s all there is to it! Pretty simple, huh?

Compatibility:
This method has been tested in and is compatible with Internet Explorer 6 (beware of :hover when applied to divs, as well as the “bottom” declaration on absolutely positioned elements), 7, 8, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.

The span tag is a great, and often underutilized way to easily change the look and feel of virtually any aspect of your web site. Here’s a simple scenario: Let’s say you have a div that looks like this:

We named our div “awesomediv” for this example (code below).

Here’s the HTML:
<div class="awesomediv">Synergistically enhance sticky data through excellent vortals. Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures. Seamlessly evolve impactful total linkage before enterprise methodologies.</div>And the CSS:
.awesomediv{background-color:#36c;border:3px solid #039;padding:10px;width:460px;font-size:14px;text-align:left;color:#9cf;}

It’s okay, but it’s boring. What if you want to make part of that content stand out, but you don’t want to insert a bunch of inline css? You also don’t want to create a new Class or ID for the style. What do you do?

The Answer.
First, wrap the sentence in a span tag:
<div class="awesomediv">Synergistically enhance sticky data through excellent vortals. <span>Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures.</span> Seamlessly evolve impactful total linkage before enterprise methodologies.</div>

Next, simply define that span tag within your stylesheet. Like this:
.awesomediv span{font-style:italic;font-weight:bold;color:white;}

Here’s our end result:

Now that was easy, wasn’t it? If you want to get even more creative, you could also style other elements such as the “strong” tag to behave differently than intended – though I warn you, unbolding the strong tag may anger the CSS gods.

Here’s how it would have looked without the span tag:
<font style=”color:white”><em><strong>Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures.</strong></em></font>

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.