Nice CSS layouts tutorial...

Tutorial that demonstrates CSS fundamentals to novices well (also useful for veterans looking for a friendly refresher).

http://learnlayout.com/

HTML Email Newsletter Top Tips

Email newsletters are common place for advertising products, services and events. Considering its uses, it is easy to understand why HTML newsletters are king; who wants to send plain text emails when we can send fancy text and graphics?! Unfortunately there are a lot of email clients out there wanting the HTML in a particular manner. Below are some simple tips to get you started with your HTML email newsletter creation.

1. Tables for layout not CSS... Unfortunately, there are alot of email clients that were developed in the last ice age still being used. This means CSS is poorly and wildly interpreted in terms of displaying your newsletter's layout. It's back to tables for cross email application consistency.

2. Inline styles... Although CSS shouldn't be used for layout, it is fine to use simple CSS styling for the content of the email newsletter. Some email clients can strip out HTML head styles, so put the <styles section in the body tag, or even better, put the css styles inline.

<p style="color: red;">

3. Javascript... Put simply, no JavaScript allowed! Most email clients will just strip it out.

4. Test, test and test... First test the design in Chrome, Firefox and IE, chances are if it works in these then you should have a consistent design across the web email clients and most app email clients. Finally test with as many email applications as possible (outlook, outlook express, thunderbird, lotus notes etc).

Using the above tips you should achieve a fairly consistent viewing experience of your newsletter for recipients. If you are having consistency issues the links below may help.

A Guide to CSS Support in Email A top compatabilities article
Example table layouts
Useful email marketing blog
CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail
CSS and Email, Kissing in a Tree

DRY CSS == .LESS

Lots of talk regarding the .LESS (pronounced dot-less) library has prompted me to finally get around to incorporating it within one of my projects - and I'm impressed. .LESS extends on CSS, making your CSS dynamic. It allows you to work with your CSS more easily and without needing to repeat yourself by way of 4 powerful language enhancements:

Variables

Variables specify widely used values in one place such as site colours.

@companyRed: #eeeeee;

h1, h2   { color: @companyRed; } 
#banner  { color: @companyRed; }

Mixins

Collecting sets of rules within a class and allowing other rules to add that class as a property.

.myMixinClass { 
   color: #ffffff; 
   text-align: center; 
   font-weight: bold; 
}

#banner   { .myMixinClass; padding: 30px; }
#footer   { .myMixinClass; padding: 0px; }

Operations

Perform simple math operations between related properties.

@defaultBorder: 1px;
@companyRed: #eeeeee;

#banner {
  color: @companyRed;
  border-left: @defaultBorder;
  border-right: @defaultBorder * 2;
}

#footer { 
  color: (@companyRed + #111) * 1.5;
}

Nested Rules

Avoid long selector names for specifying inheritance, allowing you simply to nest the rules making the CSS a lot more readable.

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

How does .LESS work?

These language enhancements are parsed and converted to valid CSS on the fly, or can be pre-compiled. It's amazingly easily to start working with and the homepage has all the info you'll probably ever need on .LESS - it really is that simple :)

Performance?

.LESS removes comments by default and has built in support for minification and caching via the optional config values. Although if you are serious about performance I'd suggest using .LESS to compile your .LESS files to .css during the build and leave the caching and compression to IIS.

Gotchas to avoid...

• Visual Studio 2008 won't know what type of file a .LESS file is, which means it opens it as a plain text file. There is a .LESS Visual Studio Integration Pack (if it asks you to login then click 'login as guest') that I recommend you getting so you have syntax highlighting at least - but I'm afraid intellisense won't be able to help you here.
• Remember to make sure IIS is setup to forward .LESS resource requests to the ASP.Net engine (if you are working on MVC apps then it will by default).
• Visual Studio won't set a build action on .LESS files, so remember to set build action to 'content' or the files won't be deployed.
• As .LESS parses the file I noticed it fell over (didn't process the rest of the CSS file) on this particular CSS hack "border:none!important;" so you may need to rethink your hacks if .LESS doesn't like it.