If you’re not familiar with jQuery, it’s an open-source JavaScript library which simplifies adding interactive functionality to your website. In this tutorial, I’ll show you how to use ThickBox, one of my favorite jQuery plugins, to create a simple, yet elegant image gallery.

First, Create the HTML page to display your gallery. My sample is just a centered div (margin: 0 auto) with two sets of thumbnails housed in their own divs. The images are floated left with some right margin applied to each. Feel free to use the code as a starting point. The styles are included in the head tag.

In Photoshop, size the thumbnails (uniform sizes work best) and create the larger images that will open when the thumbnails are clicked. I used 450px x 350px for my large images, and 200px x 142px for the thumbnail images. I applied the following style to my img tag to give the images a white border and some space between each thumbnail:

div.gallery img {

border:1px solid #fff;

float:left;

margin: 0 30px 20px 0;

display:inline;

}

You’ll need the following files for jQuery and Thickbox:

Download the current version of jQuery from jquery.com

Download the ThickBox plugin.

Download the loading animation. (right-click and save to your computer)

Download thickbox.css – the ThickBox style sheet

Now you’re ready to put it all together.

In the head of your html document, add links to the jQuery and ThickBox scripts, and link to the thickbox.css style sheet. If you want to use the following code structure, make sure you’ve placed the jquery.js and thickbox.js files in a scripts directory and the thickbox.css in your root directory:

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/thickbox.js"></script>
<link href="thickbox.css” rel="stylesheet" type="text/css" />

Place the loadingAnimation.gif file in an images directory. If you choose to rename it or place it in a different directory, be sure to update the file path in the thickbox.js file.

On each of your thumbnail anchor tags, link to the larger images and add a class of “thickbox.” The code will look like this:

<a href="images/image1_lg.jpg" class="thickbox"><img src="images/image1.jpg" width="200" height="142" alt="image 1" /></a>

If you’d like for the user to be able to navigate through a slideshow of all the images when the thickbox image opens, just add a rel="gallery" to the anchor tag. You can use any name you’d like as long as all the images have the same name. Here’s the link with the added code:

<a href="images/image3_lg.jpg" class="thickbox" rel="gallery"><img src="images/image3.jpg" width="200" height="142" alt="image 6" /></a>

You can also use thickbox to display HTML in an iFrame. Simply append the url of the html link with “TB_iframe=true&height=400&width=600″ and adjust the size as needed. The code should look like this:

<a href="text.htmlTB_iframe=true&height=400&width=600" class="thickbox">Click here</a>

See the demo for an example of ThickBox with an iframe.

That’s all there is to it! You can play with the thickbox.css styles to customize your gallery – be creative!

Finding the right color palette for a website design can be challenging. Often the client’s logo will dictate the dominant colors, or you might be basing the design on a photo from which you can sample colors. When I’m struggling with finding the combination that makes it all come together, I turn to some great online color resources - these are my favorites:

Adobe’s Kuler - http://kuler.adobe.com/ Explore palettes, search by tags, save your favorite themes, and create your own to share with other designers. View this tutorial video from AdobeTV to learn more about Kuler. I especially like having the ability to create a theme from a photo.

ColorJack - http://www.colorjack.com/ Hover over a color to see a palette suggestion. Don’t miss the articles section for some interesting background about color symbolism and psychology.

Daily Color Scheme - http://beta.dailycolorscheme.com/ Know of other good color resources? Please share them in a comment. Happy coloring!

I can help. I’ve designed hundreds of email campaigns for both large and small businesses and learned the frustrating ins and outs of the process as a result.

First, you have to be willing to let go of all the wonderful standards-based design you’ve learned over the last few years. We’re leaving the world of CSS layouts and the separation of structure and presentation for the old world of tables. Unfortunately, CSS support in email clients varies a great deal, so tables are necessary for the email structure. Here’s the good news: there is a baseline of safe CSS supported by most of the email clients. However, these styles need to be placed as inline styles or included right after the body tag in your email—the safest choice is inline—due to the fact that many online clients strip out the head tags. No important information, especially CSS, should be included in the head of your document. Additionally, avoid using floats and background images if you want it to look good in all of the online email clients. Check out Campaign Monitor’s Guide to CSS Support in Email.

Keep the preview pane in mind when you design. I use a width of 600px for most of the emails I create. You’ll want to make sure the important information is in your text, not embedded in images – many people will have images turned off, at least initially. Because of this, be sure to include alt tags on all of your images. Images need to be linked via absolute URLs to a storage spot on the server for obvious reasons. Keep the email short and to the point – most people scan email; they don’t want to read article-length text. Use teaser links to take the reader to your website.

You’ll also need to watch out for things that trigger spam filters, like red text, use of all caps, and exclamation marks in your subject line. Here’s a good article about spam triggers.

Test your email in multiple clients – I have several accounts set up for testing purposes. Also, test in the popular desktop email programs like Outlook, Thunderbird and Windows Mail. Be sure to include a link to your HTML file stored on your server for those who have trouble viewing the email.

Lastly, Outlook is not for sending email. I can’t stress that enough. To send your emails, use a database program like Listrak or sign up for an account at Constant Contact, Vertical Response or Mailchimp (just to name a few) – all will allow you to paste in your own code to create a custom email. They also ensure that you’re meeting CAN-SPAM guidelines, and they provide excellent tracking feedback.

I’ve just provided a general overview here. For more information, here’s a great online guide to designing HTML email:

http://www.sitepoint.com/article/code-html-email-newsletters/

If you find all of this frustrating, as I do, and want to get involved in improving HTML email standards, visit the Email Standards Project.