soapbox: html emails

working on a simple html email notification template today, i was reminded why i find them so annoying.

the primary reason, no designer will be surprised to hear, is microsoft. rather than making their browsers and email clients compliant with current standards, they routinely take steps backwards! why, you ask? i have no idea. i also have no idea why such a staggering percentage of people still use them; in my opinion, this is ground zero for capitalism breakdown.

but i was reminded of the shortlist version of programming & design requirements to hack html emails for the majority of email clients (for a much more complete discussion, including valuable marketing tips, visit the email experience council):

• 600px width max.
• simplicity is KING in the design. if you do find a way to make it look cool, keep in mind not everyone will see it that way anyway.
  
• make everything important text, not image based. always use alt tags on images. and if you must use an image, be sure to repeat the same info in plain text somewhere.
• use the most simple code you can come up with (by simple, i mean grossly archaic and outdated).
  
• use tables (eek!) but don't nest them, or style them, or otherwise do anything attractive with them at all, or they won't display consistently.
  
• code styles inline with both html and css. then try to show your client how to add content to the template. then tie a large, twisty knot behind your ears, using only your toes.
• near the top, ask users to add you to their address book, or your emails may never reach them in the first place
  
• test your email in every email client you can think of, and a few you can't.
  
• include a "view in browser" link at the top, in case your best efforts fail miserably anyway.
• comply with can-spam laws, or you may get blocked forever.

this is one of those times when minimalism is a great artistic movement to ponder on. not simply because this particular email template will probably have a grand total 2 sentences, but also because we want people to actually be able to see and read them.

color, color, color

if you've seen my logo, it may be no surprise to you that color is one of my favorite design elements.

case 1:

take, for example, a recent project i've been working on: a web-based money management software. the technology is amazing, but it needed something to connect the advanced back-end with the end user.before: the colors seems drab, and the design un-inviting. (granted, they weren't trying to put much effort into the design)

after: the site appears welcoming, and the technology as advanced as it really is! in some ways, the changes were minor...but they add up to make a big difference.

case 2:
onyx websites

before: the colors are so plain, bland, and paint-bucket-esque, i don't think even a good design could make them look professional.

after: toning the colors down a bit and changing up the logo makes all the difference. though this is a rough design and still very simple, the difference is unmistakable.

in professional designs, gray is one of my favorite colors. it's legible, but not as hard-edged and plain. bright colors can work well, but they must be chosen carefully.

so today's lesson - go, design, create - but do it with (the right) color!

site launch: stones river oil

this site has a very limited amount of content, which will only be viewed by a handful of investors. they mostly needed a home page that could catch the attention of a visitor, and that looked professional enough for them to be taken seriously. this home page is a variation on the large image background; in this case, the large image becomes the focal. view the new site here.

large image backgrounds

you may have seen a recent trend in web design - large image backgrounds. while they are typically more suited to low-content websites, for the right site, they can increase impact dramatically. (some high-content websites can use large backgrounds, if it's done just right - but use with care).

take, for example, westlake harvesting. even though their content doesn't change much from year to year, they like to make small changes to the design so it looks fresh and updated. check out the difference from the old, standard gradient background to the new design:

before

after

visit the site here: www.westlakeharvesting.com. i used a fixed background to maximize impact and minimize the plain color at the bottom.

this was a quickie-update for an old site i didn't even design in the first place (took me about an hour)... but check out what you can do with a little more effort:



i found these images at webdesignerwall.com, under this post. fabulous, and a new favorite design idea.