A Designer’s Life

by Deborah Gray Smith Graphic and Web Design

Color Palettes: Finding the Perfect Combination

October26

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.

ColorJackhttp://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 Schemehttp://beta.dailycolorscheme.com/ Know of other good color resources? Please share them in a comment. Happy coloring!

HTML Email Design Giving You Headaches?

September8

emailI 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.

Open Source Solutions

June23

If you’re not familiar with Open Source, read this overview at the Open Source Initiative, http://www.opensource.org/. In a nutshell, Open Source is a development method that allows for collaboration among talented designers, developers and programmers, and offers shared access to source code and permits redistribution under licenses that meet the Open Source Definition. The Open Source community is truly amazing, and this development method often results in applications that surpass their commercial counterparts in quality and usability.

Some of my favorite Open Source offerings are:

OpenOffice – I use it exclusively for all of my word processing and spreadsheet needs.

jQuery – This is a fantastic JavaScript library that makes adding really cool JavaScript functionality to your websites a breeze. Check out ThickBox, which was built on the jQuery library, for a nice way to display images.

Joomla! – I love Joomla! This is a terrific, very powerful, content management solution. It’s easy to learn and allows web developers, even one-man studios, to painlessly offer content management to their clients. Try the online demo – you’ll love it!

These are just a few Open Source offerings. You can find more at SourceForge.net, just one of many sites where developers post their projects.

While you’re out there collecting all of these great Open Source apps, don’t forget to donate to the Open Source Community!

« Older EntriesNewer Entries »