Wednesday, February 28, 2007

Flexlib: Much Needed and Improved Flex Components

An open source Flex library has been released with some great extended and improved components for Flex. I'm particularly interested in the buttonScrollingCanvas and dragScrollingCanvas - they solve some interface issues I've been dealing with in my "baby" Flex app that I was dreading having to write myself.

Thanks to the team who wrote it!

MAX 07 - Windy City - Be There!

Adobe has announced the dates for MAX this year!

North America MAX 2007 - September 30-October 3, 2007 - McCormick Place West, Chicago

Cool! I SO guessed it would be Chicago, and I think it's a great choice of location. I've attended (even organized) conferences in Chicago and the experience has been positive (outside flying into O'Hare). Lots to do, a beautiful city and a nice convention center. At the time of year weather will be nice too. Rock!

Friday, February 23, 2007

Email styling with foreground and background colors

I was working on a few email designs recently when I came across an issue with the color of the text when the email was forwarded. The solution is pretty simple, it just takes a little planning.

Say you have an email with a dark body background color, say, dark gray. Then the content of your email (a table or a div) has a lighter background (white), with dark text. Then you want to add a footer or a header to the email (an unsubscribe link), outside that body, with the dark background, so you make the text color light. You end up with a style rule something like this:

body {
background-color: #666666;
color: #FFFFFF;

div#main {
background-color: #FFFFFF;
color: #000000;

Everything looks dandy, until you send that email, and someone replies or forwards the email. Many mail clients such as Outlook will mangle the original css when the message gets forwarded, and use the "body" style for the text throughout, so suddenly none of the text within your "main" div is readable, because it's white on white. Simple fix? Set the foreground color in the body style to your desired (dark) default text color, and then override it for the footer.

body {
background-color: #666666;
color: #000000;

div#main {
background-color: #FFFFFF;

div#footer {
color: #FFFFFF;

IE 7 CSS: Dotted borders...woo!

A little happy feeling just washed over me when I noticed this morning that dotted borders actually show up dotted in IE 7. It's trivial. And I'm pretty much over the dotted-borders-ad-nauseam look anyway. But after all these years of having to either graphically add a dotted border (which always made me think twice before using one) or swallow the ugly dashes that IE 6 substituted, it's nice to see them working.

Tuesday, February 20, 2007

Design is a living process

I'm a big fan of Campaign Monitor, both as a site and as a tool. One of the things I really admire about their design is how they have designed every detail. If you dissect the design, it's simple, and straightforward, and not unusual. There's no "one thing" about the design that makes it exceptional. What makes it exceptional is the fact that every single character and pixel has been thought out and carefully designed. It's a great work of usability.

They didn't just design a "frame" for the site, they designed the content as well. This is what I believe truly separates the "ok" designs from the great ones.

Some examples of how they have designed the details:
  • the headings of their tables (data grids) have a subtle, attractive gradient background and a subtle banded scheme with a nice hover/highlight effect
  • every screen shot (features, resources pages) is attractive and neatly cropped
  • the "price tag" on their pricing page is impossible to miss, yet matches the site perfectly
  • the icons are used consistently throughout the site
I also like their clear and friendly writing style, writing is too often overlooked on an otherwise well-designed site.

The method I use to inject quality design at every level of a site, is to design (with whatever tool you prefer) several pages in addition to the home page and sub page. This requires a great deal of preparation. You have to know what content you are going to have, and where it will go. You have to think the content over thoroughly during the design phase. Often it's hard to visualize content without actually having a site design, so I find it's something of a back-and-forth process. Work on the main site design, develop a look; then go design the content pages, go back and adjust your layout...

Design is a living process, it can never all be done "up front", and there is no such thing as taking a template and running with it forever and ever. I'm not trying to create job security for myself, but I do know that well designed sites like CampaignMonitor don't happen by accident.

Tag cloud for Blogger

When I first saw them, I thought tag clouds were a little silly and rather ugly, but now that I'm used to them I've done a 180. Seems they are a better use of space and they sure beat one long list of links, so I decided I had to have one! I found this one for Blogger that worked well, the only thing I had to change was the color settings to get it to match. Cool!

Sunday, February 18, 2007

Puppy growing pains

My intention for this blog isn't to talk too much about my dog, but over the past week we've been through some interesting (and occasionally upsetting) experiences with our 7-month old Chesapeake Bay Retriever puppy Kenshin, so I thought I'd share.

About two weeks ago when I took him to obedience class (if we're going to have an 85 lb dog he darn well is gonna learn to be obedient), he seemed to be less energetic than usual. I knew this because the prior week he pretty much embarrassed the hell out of me by being entirely out of control. But at this most recent class, he was calm and behaved much more like his good little self at home (as opposed to going crazy as he tends to do in class). He also seemed tired, he wanted to sit or lay down when he wasn't actively engaged, and I even had to coax him to get up at times. Deep down I was relieved and pleased that he was being so relaxed, but I wondered if something was wrong.

As the week progressed he seemed to be more sleepy than usual. He also didn't seem terribly interested in food, which, in Kenshin's case, is a definite sign that something's wrong. We couldn't tell if he was just being picky, because for about a week before he had been eating raw meats and vegetables when we ran out of kibble, so we figured he wasn't too happy switching back to the kibble. We took him with us to Adam's parents for the weekend, where he seemed to have plenty of energy, but then again, his girlfriend Ruby the Golden pup always makes him perk up. He still didn't want to eat kibble, although we convinced him to eat some table scraps.

By the beginning of the last week I was decidedly concerned about his lack of appetite, and he was getting more lethargic. No vomiting or diarrhea, though. Weird. We took him to his Holistic Vet (meh), who said he looked fabulous and was perfectly healthy, and that we should keep giving him lemon zest and pepper to "strengthen his stomach chi," and that we should just keep him on a BARF diet and stop with the kibble if he wouldn't eat the kibble. It didn't help that the morning before he went, he had eaten a full meal, so we were still uncertain if anything was really wrong. I think the vet thought we were being alarmists.

The next day, he was even worse. His entire demeanor was different. He was not happy, he looked miserable. He didn't want to play, or eat, he just wanted to lay around and sleep. Very unusual. The real cause for concern was that he refused to walk up the stairs, and appeared to be favoring his hind legs. Now it was looking really bad. Adam scheduled an appointment with the vet in PA that his parents swear by, a non-holistic vet who professed to be familiar with holistic practices (so we wouldn't catch crap for treating our dog's chi with pepper...that's a story unto itself).

It was encouraging that this other vet did not dismiss any of our concerns and seemed very knowledgeable in diagnosing the problem. Within minutes he had found some specfic sore spots (something the prior vet did not do) on Kenshin's spine that explained the pain in his hind legs. We had done our own Googling and developed a few theories as to what could be wrong, so to allay our concerns the vet did a battery of tests. However the ultimate outcome was that poor little Kenshin was in a lot of pain, most likely due to a bone disease called Pano.

Pano affects young dogs during rapid growth periods, and can last for weeks, causing inflammation and pain, shifting around to various limbs. The good news is that there are rarely any serious ill effects after the disease runs its course, and the treatment is simple pain killers. The vet gave Kenshin a double dose of pain medicine to get things started, and sent us home with a couple additional medications that we could have on hand in case one of his other tests came back positive (lyme disease being a particular concern given our location). By the time Adam and Kenshin got back from PA, Kenshin was closer to his usual self than I'd seen him in over a week. He greeted me with excitement, he was 100% more alert, and he finally started eating again.

His appetite isn't quite back to his usual voracity, but he's eating regularly now. He's happy and alert, and plays with his toys (although he's prohibited from rough play and tug-of-war, his favorite game). He occasionally shows sensitivity in his back legs, usually when it's time to take more pain medication. He thinks his pain pills are treats. We'll find out tomorrow if any other tests came back positive (the initial bloodwork was a-ok), but we're pretty sure at this point that Pano was the problem. I feel much better knowing that he's not in pain any more, and I'm relieved that it wasn't something more serious.

I found it interesting as I researched the disease that a lot of the recommendations our breeder gave us about feeing him coincided perfectly with how to prevent Pano. Although there's no specific known cause, or specific prevention, most of the recommendations I read about were things we already do (give him a vitamin C supplement, feed him adult formula food rather than puppy food). I had a lot of confidence already in our breeder's experience (although she did start Kenshin on the whole Holistic thing...), and my findings seem to support that.

Suffice to say, if you're ever in doubt about what any vet (or doctor) says, get a second opinion. If it seems like all your vet does in a check up is play with your puppy, it's probably true! A 3-hour drive and $500 is well worth it to prevent weeks of pain and misery in a poor puppy who can't tell you where it hurts.

Friday, February 16, 2007

Using Clip Art, Sin-Free

Clip art is typically thought of by many, particularly in the Design community, as something to be avoided like the plague. “Designers who use clip art are not designers.”

While I have seen many really ugly designs that use clip art, I think the problem still comes back to poor design, not bad clip art. In fact, a lot of the clip art illustrations out there are quite good. Yes, there’s bad clip art, and it should be avoided, but there is also clip art that can be carefully used to your advantage with effective results.

Often clip art is a good solution when you have little or no budget for proper imagery, but there are ways to prevent it from looking cheap. Especially if you’re willing to put a little elbow grease into it.

Here are some tips to keep your design looking good when you are forced to use clip art.

Size and Proportion Still Matters

This is probably the biggest flaw I see with most clip art use. Because it’s being designed by someone with little design knowledge (knowing MS Publisher does not count as design knowledge!), basic rules of size, proportion and alignment are broken.

The most common thing I would change? Make it bigger! But, you ask, why would you want to make ugly clip art bigger? Because most of the time the design has used insufficient white space, and there is generally not enough room on the page, so the clip art gets reduced to minute icon-like sizes to enable everything else to fit. Then there are a few different clips, all too small, sprinkled throughout the page.

Better to pick one or two of the best clips and make them bigger, which will add some visual tension to the design. The clip then becomes an anchor or focal point of the design, rather than another extra element on the page. (While you’re at it, shorten the copy and add some negative space!)

Control the Color

Usually the user of the clip art takes it as it is and uses it. But sometimes the color palette in the clip is simply atrocious. Sometimes the color is close but not a perfect match for other color on the page. Sometimes the clip just doesn’t match at all. Red flag!

It requires some extra work, but if you edit the clip (usually in Illustrator) so that the color scheme is better, or so that the reds in the clip match the rest of the red on the page, or so the clip coordinates better with the style of the design, it will look nicely integrated into your design rather than popping out and saying “my designer is a loser.”

Get thee a color wheel (or visit Kuler), and come up with a new scheme for the clip. Learn to use the Illustrator commands like Select > Same > Fill Color/Stroke to replace colors in a few easy steps.

Don’t Mix Themes

Clip art often comes in convenient stylistic collections or themes. You’ll see series’ of clips revolving around say, Sports or Plants or Food that share similar design characteristics, color scheme and look. They’re great used together. They look terrible when they’re mixed. If you’re really good, you can modify one to match the style of another theme, but in general, avoid using clips from different themes together. And make sure that the theme matches the overall look of your document.

Don’t Use Clichés

Design clichés are bad no matter the form, whether it’s stock photography or clip art or typography. Run from Screen Beans. In general, make sure what you are showing with Clip art is a well thought out use of the image. Beware, clip art collections are chock full of clichés, because most people who use clip art want exactly that (although they may not realize it). Try to think of an out-of-the-box use for the image, and don’t use the just-plain-terrible clichés, like Screen Beans.

Use it as a Starting Point

Perhaps you’re not a skilled enough illustrator to draw a printer from scratch (I'm not...), but you can surely find a bazillion clips of printers. Pick a few that are close to what you like, and trace them, cut up, stretch, and recombine them, or just use them as a reference to create your own, original illustration. Remember, you don’t have to use clip art as-is!

Trace a Photo or Drawing

If you need a clip-art like image but can’t find one that isn’t fugly, try tracing a photo. Illustrator’s Live Trace feature can produce some really nice results in just a few minutes. Trace the photo, tweak the color to your liking, remove backgrounds and stray points, maybe add some brushes to the strokes; and you’ve got your own, original clip art.

Easy Icons

You have to design a set of icons for something completely random, and you can’t find (or afford) what you need from IconBuffet. You can use clip art as a starting point to help you design your own. It will usually require some simplification, but at least you won’t be starting from scratch. Take similar, simple illustrations which provide an outline structure. Then use that base, and simplify, shrink, restyle, and rework until you have your desired icon. A lot of what makes an icon set work well is consistency in style and treatment - color, stroke, fill, shape - apply the same features consistently to several clips and you've got icons.

And lastly...

Here are some Clip Art sources that you probably already have available to you:

  • Microsoft Office Clip art and Clip art Online
  • Illustrator’s packaged clip art (look on your hard drive for Adobe\Resources and Extras\Goodies\Illustrator CS2\Clip Art and Stock Photos)
  • Illustrator’s packaged symbols and brushes (Window > {various} Libraries)

Happy clipping!

Thursday, February 15, 2007

It's not BS when he says SEO is BS

A loud "Amen" and a tip of my hat to this guy:

At my old company, there was a big huge to-do about getting our site in the top 3 results on Google for an extremely ambiguous and competitive search term. While it would have been nice and I don't think it was undeserved, these expectations were unrealistic.

I spent hours in meetings trying to explain to my coworkers and managers that paying an "SEO" firm to optimize our site was not going to help us, not to mention that I did not want some idiot blackhat SEO scumbag riffling through our carefully crafted XHTML. The thought of the keyword stuffing that some were suggesting just made me ill. And everyone we talked to who'd ever managed a website thought they knew everything about SEO.

Fortunately my whining worked, and at least while I was there, no one ever did any SEO on the site except my team. We started to see our results getting better simply because the content producers were actually paying attention to what they wrote, which had been our biggest problem to begin with. If your pages do not contain the exact search phrase, you cannot expect get into the top of the results.

Yes, there are "good," honest and well-meaning SEO firms out there, but they aren't easy to find... and if you ain't got it already, they aren't going to be able to get it for you.

An introduction to the web today

Show this to your manager if they ask you about Web 2.0:

(You are probably sick of hearing about Web 2.0, in fact I want to stab myself for mentioning it on this blog, but I actually enjoyed this video, it's worthwhile!)

Thanks to Forty for bringing this to my attention!

Wednesday, February 7, 2007

Design Patterns for Designers

A few years ago I got this book on design patterns for web design - graphics, html and visuals. It was a really interesting book, it collected a few years worth of web design best practices in a single place, covering everything from navigation (tabs, breadcrumbs, drill-down, etc) to shopping carts. It talked about the popular-thus-familiar ways the best patterns worked, and some pitfalls to avoid when using them. It also showed a lot of screen shots of the design in action. I hadn't seen any other book like it, so I ate it up. I highly recommend it, I believe there is a newer edition out now.

Today I discovered that the always interesting Yahoo Developer Network has a Design Patterns section, and it seems to have a lot of cutting edge patterns. I'm very pleased to see design patterns for web design becoming more mainstream - it's kind of a sign of the industry maturing.

Monday, February 5, 2007

Super Bowl Commercial Favorites

This would not be a marketer's blog without a recap of Super Bowl ads! The beer commercials were as funny as ever, but I still found the commercials overall to be a little disappointing. I liked the Bud "slap" ad, it was just plain funny.

My favorites this year were still the ads (good follow up to last year's monkeys - I still laugh at those), they hit home and are still entertaining, especially the "promotions pit". Surprisingly absent were the Movie trailers, I think there was only one or two (at least that I caught).

Some of the better-produced ads (like the Coca Cola one) were old and have been seen plenty before, so they weren't of much interest. The people at my Super Bowl party collectively gagged over the Ford commericals - how many car-parts-coming-together ads do you need?

The Snickers one that seems to be creating a lot of controversy or disgust was not nearly as disgusting to me as the Doritos checkout-line ad. Speaking of Dorito's, I thought their better one was the fan-produced "live the flavor" ad. It seemed rough around the edges, and later I found out why, but still a very good commercial.

Carlos Mencia's Bud ad was mildly funny, but I just don't like Carlos Mencia that much. Taco Bell's Steak Grilled Taquitos with the lions was pretty random. The K-Fed Nationwide ad would have been a lot funnier if I hadn't already seen it! As much as I can't stand the guy, I have to give him credit for doing it.

I hear that Revlon put a lot on the line buying an entire 60 second block for their Colorist commerical, which was rather anti-climactic, entertainment-wise. Still, it made me think again about using off the shelf hair color, so perhaps it might have worked. There's always that debate - sure it's entertaining, but will it work? I'd be interested in hearing their results.

See them all here.