I’ve been on the fence about Twitter. At first I didn’t see any value in it. I thought it was a way to spread a huge amount of useless, narcissistic information. However, I decided I’d better try it out before passing judgment. Now, I’m intrigued - still uncertain, but curious. I’m finding it very useful for getting and sharing good information about design and development. I’ve gotten some great tips and discovered good resources through the designers I’m following. I’m still not interested in finding out where they’re eating dinner or what kind of coffee they’re drinking, but I don’t mind sifting through those posts to get to the good stuff. Sometimes a quick glimpse into someone else’s life provides a smile and a little break from the work day. That’s not a bad thing.

I’m steadily learning more about how it works. For example, you can use hash marks (#) to tag keywords in posts. Here’s a great explanation from Kristine Wirth: http://kristinewirth.com/that-mysterious-sign-in-twitterwhat-does-it-mean/. You can also “retweet” other user’s posts to share good info with your followers. You can address a post to another user by putting @username before your post (these are called “at replies”). It’s a nice way to quickly send a message to someone or reply to one of their posts.

The following video talks about the value of Twitter’s search engine. This is an aspect I hadn’t considered until I saw this video. I like the idea of “the most contemporary thought stream humanity has ever seen.” Check it out:

So, my advice is this: try it out. Experiment, play, figure out if there’s a place for it in your life. At the least, we humans keep trying to connect with each other. That’s what it’s all about, right?

By the way, if you want to follow me on Twitter, I’m @dgraydesign. Happy tweeting!

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!

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.