At MeYou Health we’ve send out a lot of email as part of our Daily Challenge. One of the things we struggle with is design constancy from browser to browser and with images turned on and off. While our emails are far from perfect, we’re learning and always trying to improve the experience. Here are a few tips we’ve discovered:

• Try to design without images first and only add images to enhance the design
• Never rely on images to convey the main message of your email.
• Use background colors to effectively design your email
• Use old school <table> HTML to code your email. No body likes this but it’s your best shot at getting something that is recognizable.
• Use table borders to create horizontal and vertical lines.
• Be conscious of how you use your “alt” tag

Here is an example of a Hewlett-Packard email rendered in Gmail with images turned off:

Hewlett-Packard email newsletter with images turned off

Hewlett-Packard  email with images turned on:

HP email with images turned on:

As many of you know, I left Iron Mountain in November to join a new start-up in South Boston called MeYou Health. Since then, we’ve built a really solid core team and are jamming everyday on creating fun user experiences for the Web and mobile devices designed to help people improve their well-being.

Spoiler Alert: Here are a few products in the works that will be available soon.

Daily Challenge
Small daily activities that wil lead to big healthy outcomes.

Stair Climbr
An iPhone application that alows you to virtually climb the world’s greatest heights.

Health Tennis
A Facebook game that connects you with your friends through small daily actions designed to improve your well-being.

Twitter Tracker
Real time tracking and analysis of the collective well-being of the Twitter community.

Monday is a big day. We’re opening the private beta registration. We’ll allow friends, family and other interested geeks a sneak peak at our Daily Challenge application. We’re even working on a contest to reward one lucky private beta user for helping us out (stay tuned for that)

In the meantime if you want to be know with what we’re doing you can follow us on Twitter or fan our Facebook page

Last night I received a real brain twister of a question from @ganarce on my Twitter page. He wanted to know if there was a way to align data within a table using a decimal point “.”. Seemed like a fairly routine type of formatting (invoices, data etc.). Without massaging the data ahead of time to all have the same number of characters before or after the decimal point.

I went to the W3C to for an explanation on horizontal alignment. Ah ha! there it was. Easy enough:

col align=”char” char=”.”

Unfortunately there is little or no support for this attribute amongst the Browser community. I found a method using JQuery that seems to work with IE, FF and Chrome.

Happy formatting!

Previously I wrote about how to shorten your CSS rules with padding and margin. Here are two other ways of reducing your rules and making your stylesheets less cluttered.

Border

If you have a container with a border that is one pixel wide, black and is the same for all four sides you can write it like this:

.myborder {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}

Or you can shorten the rule by writing it like this:

.myborder {
border: solid 1px #000;
}

Since all the values are shared for all four edges it is much easier to write the rule for all four at once.

Color

You may have also noticed that I shortened the hex value for the color from #000000 to just #000. Hexadecimal colors are written using six numbers or letters to declare the color. The 1st and 2nd are the red value. the 3rd and 4th are the green value and the 5th and 6th are the blue value. If the character is the same within these pairs then you can just write the one value and omit it’s identical twin.

CSS offers the ability to shorten your code in a few instances to make it more tidy and easy to maintain. Here’s an example of how to shorten your margin and padding rules.

This rule:

.mydiv {
padding-top: 12px;
padding-right: 3px;
padding-bottom: 6px;
padding-left: 9px;
}

Is exactly the same as this rule using shorthand:

.mydiv {
padding: 12px 3px 6px 9px;
}

Notice two things: First, there is no punctuation delimiter between the values just a space. Second, the order you place the values matters. Imagine a clock, starting at the top (12:00) is your first value followed by 3:00, 6:00 and 9:00. Each of these positions are how you determine where the padding/margin gets applied.

Relative position is one of the most understood of all the CSS positions. Once you understand how it is supposed to be rendered it can be a powerful design tool for your more complex layouts.

To understand relative positioning first we need to take a look at static positioning. By default elements are positioned statically. Static elements flow normally within the document one after another based on the order of your markup. Here is a visual example of a statically positioned div with the id of “mydiv”.

Here’s the code:

#mydiv {
position:static;
}

Static position will ignore any top, bottom, left or right declarations. Normally you would never need to write a rule like this since static is the default value unless you are trying to override another rule.

Relative position.
Relative position is “relative” to the space the element would normally occupy. The element can be moved in the layout by using top, bottom, left or right.

Here’s the code:

#mydiv {
position:relative;
top: 20px;
left:-75px;
}

This rule tells “mydiv” to move -75 pixels from it’s left position, and 20 pixels from it’s top position.

Notice that the area where the div was positioned statically still maintains it’s space within the layout. Hope that clears things up!

In just about every job there are philosophies people follow when they approach their work. It occurred to me that developers fall into the same categories as the our friends the Three Little Pigs.

The Hacker

This little pig loves to get stuff out fast. He hates structure, documentation and often works best by himself. He puts off any re-factoring and leaves a mess for future developers to clean up but on the surface appears fun and fast. Executives love this guy.

The pragmatist

This little pig understands time constraints as well as the value of delivering some quality. It pains him to let product out the door with less quality but knows the business needs to focus on time to market. He builds for scale but not to the moon. His code is generally clean. He believes in light documentation for future little pigs who follow.

Th Purist

This little pig needs to have everything done “the right way” (whether or not he truly understands what that means is irrelevant). Everything needs to be designed and documented before he’ll start anything. He believes in preparing everything for scale. (even without evidence the product will need to scale). He’s often late with his projects but the final product is very high quality.

So what kind of pig are you?

My skills as a User Experience Designer/ Interaction Designer from 1996-2008

Why do I always feel like I’m fumbling around in the dark when it comes to Javascript debugging? Firebug and other tools have been making it a little easier but when you get an error like this:

It’s a little ridiculous don’t you think? I mean really, does IE think I have more than 130 million lines of JavaScript?

At work I was assigned the task of evaluating the major libraries and selecting one for our web applications. I spent some time reviewing the major players and decided to switch from script.aculo.us to Jquery for the following reasons:

1. CSS syntax – Jquery uses the same syntax as CSS to identify elements within the DOM

2. Unobtrusiveness – Because the function identifies the object using the css selectors, there is no need to add any JavaScript in the markup.

3. Microsoft – It seems more and more apparent that Microsoft is hooking their cart to Jquery. Since we’re a .Net shop it was an easier sell than the others.

4. Support – There is a thriving community with examples, tutorials and forums for answering questions.