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:

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!

I’ve been designing a new CSS framework the last few months and thought I’d share my thoughts on how I set it up to be both useful and flexible. I’ve tried to take best practices from some of the

reset.css

This negates most of the CSS rules written by the default.css built into the browsers. Gets everything back to a level playing field so your new rules are more predictable.

layout.css

All the containers, columns, navigation etc. This is the largest sheet and contains everything that doesn’t fit in any of the other sheets.

colors.css

This is where all your colors live. It helps with consistent usage. If you are responsible for maintaining brand this is the best place to control that effort. You can also use this sheet to define a high contrast style as well. Just add another sheet and conditionally point to it in this one’s place.

forms.css

Forms are always a bear to design. This is where I keep all the form elements and different form layouts.

type.css

All typography is in this one. H1, H2, H3 etc. are defined here. Font-family.

iehacks.css

Where I make IE act like a modern browser.

debug.css

During development I like to tun on certain styles to help me. (ex. div {background-color: pink;}
) This helps me see all the divs on a page so I can work on floats etc. I use a JavaScript to toggle this sheet on and off.

I have to admit I was completely surprised when I learned Google was launching a new browser. They kept the secret under lock and key kudos to them.

I’ve been test driving it for the last two days and it seems like a great new browser, it’s a little faster than FF3, Safari and IE8, it’s got a decent user experience and I’ve found it to be extremely stable.

But more than all the new fancy new features, I’m glad it came out of the gate with excellent support for Web Standards. With FF3, Safari and IE8 the browser landscape has change dramatically over the last few months. I’m starting to see the light at the end of the IE hack tunnel. I’m starting to see what it might be like to design once and not worry about browser testing.

Which one is best? I’m not sure, I’ll keep banging away at all four to see if there is one clear winner but it’s obvious the biggest winner are the HTML junkie, CSS jockey and JavaScript hero.

A more and more users upgrade to browsers that support Alpha transparency, there are increased options for designers. A great way to get a visual effect on your images without manipulating the originals is through the use of overlays.

Say you have a picture of John Wayne:

Now this is great but you want it to look a bit older, weathered and aged. If you position an overlay on top of this image that contains some yellowness and some dust and scratches you can get that effect without changing the original.

Here’s the overlay:

What you need to do now is position the overlay over the top of the original picture of the Duke. It’s z-index needs to be higher and it’s position needs to be exactly over the top of the original. See example

Volia! that’s it. New style without changing the original.

Yesterday I gave the second in a series of talks on web standards. The topic was a high level look at CSS. Below are the slides.

| View | Upload your own

If you’ve ever written CSS you’ve probably run into issues related to CSS styles which are in conflict. For instance:

.blue { color: blue; }
#red { color:red; }

<p id=”red” class=”blue”>Sample Text</p>

The id is trying to make the text red and the class is trying to make it blue. Who wins? It all depends on specificity. Below is a table that explains CSS specificity.

With the example above the text would be rendered red because the ID has higher specificity than the blue class. To figure out what style takes precedence you work your way across the table. Inline style? Nope. ID? Yes. then that rule is more specific. If they both have IDs then you move again to the right to classes and elements.

The above example would render the following:

p = 0,0,0,1 – not a very specific rule but will cascade quite nicely
p.error = 0,0,1,1 – the introduction of the class negates any piling up of elements (e.x body div ul li span em )
#special p.error – the ID  is higher in specificity. Attributes which are in conflict will use the ID’s attribute values.

For a full explanation see the W3C’s specification.