For those of you that have attempted to implement an email template with a vaguely complex design in Outlook 2007 you will have hit many stumbling blocks with simple CSS attributes such as “background images” and “display”, to name but a few, not supported.  Getting these templates as close to the original design as possible in all email clients whilst also offer a slightly degraded, yet more than acceptable version for Outlook 2007, is a very tricky and time consuming business.  This is where conditional comments come in to play, as the example shows below:

<!--[if gte mso 9]>
	Add your Outlook 2007 specific code here...
<![endif]-->

The above code snippet provides a much needed means to target Outlook 2007 specifically with styles and code to produce the degradation required to allow HTML templates to display correctly in such an awkward email client.

I would say long live conditional comments, however, I think I will take another tact, please please please Microsoft address Outlook’s support for CSS and for pity sake use the IE rendering engine and not MS Words.  You have the market leading browser so use it… [Rant ends] 

Best Practice

• Use tables to provide positioning and layout as this will provide the greatest levels of consistency cross browser. In many cases the simpler the code the better.

• Inline styles should be used to create the desired creative effect again to reduce the risk of cross browser inconsistencies.I.e.

  <span style="color:#000000;">

• Apply fixed pixel sizes for font sizes and height/widths.

• Use span tags with inline styles instead of p, h1 tags etc. Most browsers apply natural padding and margin to p, h1 tags, so by using span tags you can eliminate this as a factor.

• Avoid shorthand – some email clients have a habit of removing shorthand and replacing with the longhand equivalent (and doing it very badly). It’s therefore much easier to take away the risk of this happening and only using longhand from the start.I.e.

  <span style="margin-top:10px;display:block;">testing</span>

  instead of:

  <span style="margin:10px 0px 0px 0px;display:block;">testing</span>

• Use the table background attribute to apply background images instead of using CSS. This is the most universal approach, however, it is worth remembering that Outlook 2007 does not allow background images at all.I.e.

  <table cellpadding="0" cellspacing="0" border="0" background="http://www.mydomain.com/images/email-010101/myimage.gif">
      <tr>
          <td>
              Content here
          </td>
      </tr>
  </table>

• If background images are used, apply a background colour to provide the same colour styling as the bg image.  This will provide structre to email clients that do not render background images.
• Where an image is inserted apply an inline style of display block. This removes extra margin applied in Windows Live Hotmail through Firefox.

• Reference images on a live server. This will help reduce the weight of the email as well as decreasing the risk of your template being picked up as spam as spammers have like to embed images into emails.

• Images and text must be used in proportion again to avoid the risk of being picked up as spam. Spammers like to include the message of their email in images to avoid email filters recognising blacklisted words.

• Although JavaScript does work in some email clients its coverage is by know means complete. Until there is better wide spread support JavaScript should not be used.

• Forms should not be used within an email template. As with JavaScript,there is support in some email clients but not all so they are best avoided.

• Do not heavily nest tables within tables as older email clients such as Lotus Notes do not like it.

Useful Links

The Campaign Monitor blog has some very helpful CSS support guides for different email clients. Very interesting and well worth a read as it can save you a great deal of time in the long run.

- Visit Campaign Monitor

The Email Standards site “helps designers understand why web standards are so important for email, while working with email client developers to ensure that emails render consistently”. Another good read with some very helpful information.

- Visit the Email Standards

The following tutorial will guide you through the process of “layering” a page in a way to give the appearance of a flash background.

The are however a couple of points that are worth noting.  These include:

• Absolute positioning is used to add content above the flash movie.  This therefore mean that the content is taken out of the flow of the document and when resizing the page content may be cut off unless a good workaround is used.
• UFO (Unobtrusive Flash Objects) is used to embed the flash background although you could, and probably should, use SWFObject instead.

flash background HTML

The HTML below provides a simple structure and can be broken in to two sections, a div with id “flash-background” (used to house the flash background) and a second div with an id of “website” (contains your site content).

flash background CSS

The CSS below is not very complex.  Set your default styling on the body I.e. font size, colour etc. The flash background div is positioned absolutely in the centre of the page with a z-index of 0 and website div is also positioned in the centre of the page with a z-index of 10000 (obviously doesn’t have to be that high I just wanted to show that it was larger ).  CSS wise that is it, not very difficult at all.

JavaScript

Finally we need to embed the flash movie into the page, in the example below I have used UFO, however, I would strongly advise you to use SWFObject 2.0 as this is currently the best solution in the market.

var FO = { movie:"flash/background.swf", width:"1014", height:"960", majorversion:"8", build:"0", xi:"true", wmode:"transparent" };
UFO.create(FO, "flash-background");

demo

Flash background demo.

download

Flash background download.

After seeing an amazing design tutorial on PSDTUTS for a Vista Style menu design a decided to give it ago and turn their design into reality.  Well I’ve built it and it looks pretty good (see the css vista menu demo) so I thought I would share how I did it with the world.

step one

Create a PSD of the menu as details in the PSDTUTS article linked above.

step two

Cut out the images required for the menu design and save them to an images folder at the root of your site.  The required images are as follows:

• A one pixel wide image of the background of the menu. (nav-bg.gif)
• A one pixel wide image of the divider (bar) that splits each nav item. (nav-bar.gif)
• An active state image with the blue glow. Notice this image also has a divider (bar) on the left hand side of this image. This will be important for later on in this tutorial. (active.gif)

step three

Build the HTML structure:

As you can see above the structure is a simple unordered list of the desired navigation items, contained within a div named "main-nav".

HTML wise that is it really.  Just drop this in to the body of the site.

step four

Now we need to style the menu using the images we previously cut out as detailed below:

The code above sets the default font and font size for the body of the document.  You can use whatever font you desire here or if you only want to apply these font styles to the menu add the font styling to the "#main-nav" style.

The "#main-nav" style sets the height/width of the menu whilst also applying the navigation background to the container.

Next we need to remove the default padding/margin and bullets applied to unordered lists.

Now we set the height of the ul tag to match the height applied to the "#-main-nav" container whilst also applying the nav divider (bar) image as the background of the ul, positioning it to the right hand side.  Finally we float the ul left which gives a cross browse effect of width auto and pad the right hand side by 1px (This will allow room for the nav divider to show).

Next we set the height and width of the li tag and float it left forcing each li tag to sit inline with each other.  In this example the width is fixed to 80px but this is very much up to you and your design.   A line-height si also set to equal the applied height forcing the text to vertically align to the middle.

Now we need to style the "a" tag itself.  Again it has been given the same width and height as the li tag and floated left.  This makes sure the whole navigation item is clickable as well as to remove unwanted margins in IE 6.  Next the nav divider (bar) image is added to each "a" tag to complete the dividing pipes look.

Finally we need to add the link styling and active/hover states.  The text colour is set to white and link underline removed for all "a" tags and we apply the active image to the active class and "a" tag hover state.

Now all you need to do is check it out in your browser.  Enjoy..

demo

Check out the CSS Vista Menu Demo for yourself.

download

Download the CSS Vista Menu.

Kirupa had one demo in particular that I wanted to see if I could emulate called Scripting 3D in Flash. This example showed how to create a camera movement in flash giving a feeling of perspective.

Having looked at the code I decided this was most definitely possible in JavaScript and here’s what I came up with…

code

HTML

The HTML as seen below is pretty simplistic.  Firstly we have a sceneContainer that wraps the whole 3D Engine, then we have a scene3D container which acts very much as a view for the the engine as will be described below and finally we have the individual images within the scene, each with an id allowing individual styling.

CSS

The CSS details simple styling for the engine.  Points to note are as follows:

• sceneContainer has a fixed width/height and an overflow of hidden.  This allows us to mask the images as they move back and forth in perspective.
• Next we have the scene3D positioned absolutely with a width of 100% of it’s container (sceneContainer).  This allows for easy resizing and positioning of the container within the sceneContainer.
• Finally we have styles for each individual image within the containers.  This allows us to position all the images within the scene3d container.

JavaScript

Lastly we have the JavaScript.  This is strongly based on the kirupa example and works by looping through the images included in the scene and scaling them based on the variables set in the movie.  To achieve the effect of the images zooming in and out we also have to scale and reposition the scene3D container at the same time hiding the overflow within the sceneContainer.

Have a play about with the variables to get to grips with how they control the effect and more over, have fun!

demo

Have a look at the Simple 3D JavaScript Engine Demo.

download

Feel free to download the Simple 3D JavaScript Engine Code.

After having a play about with these two examples for a while it got me in to thinking, “how easy it would it be to implement a 3D Carousel myself?“

Well after carrying out some research and using the two above examples as a foundation I created a basic 3D Carousel. This example will be the first instalment in which I demonstrate the basic Carousel and further more advanced tutorials will be added at a later date.

So here we go…

code

html

As can be seen below the HTML is very simple and consists of a main container wrapping several divs with images inside.  That is all that is required at this stage from an html perspective.  Obviously the number of images and the images themselves can be changed here.

css

The CSS is also very  simple setting the style attributes for the main container as well as the images width and height within each of their containing divs.  One point to note would be that the width and height of the carousel container should be edited as desired to meet your needs althoug further editing will be needed below as shown.

JavaScript Variables

This is where understanding is required to set up the carousel. baseSpeed is the initial speed of the carousel, the higher the value the faster it will spin, radiusX and radiusY are the horizontal and vertical radiuses of the carousel so adjust these to effectively change the width and height.

centerX and centerY pinpoint the center of the accordion with in the main container. These will need to be amended if the main containers width and height attributes are amended.

Finally speed is used in conjunction with baseSpeed to set the initial speed of the carousel, although, the speed will be altered depending on the position x of the mouse over the carousel container.

demo

Have a look for yourself at the Simple 3D Carousel demo.

download

Feel free to download the Simple 3D Carousel.

notes

This is a very basic demo and as such should not be treated as a finished product.  I’m using this article as more of a tutorial to create clear stages between the version above and a far more advanced version that I will release in the not to distant future.

I’m still looking to further improve the smoothness of the carousel and new features such as automatic image reflection and arrows to manually rotate the carousel will be added in future versions.

mootools modules

Core

• Core

Class

• Class

Native

• Array
• String
• Function
• Number
• Element

Element

• Element.Event

Window

• Window.DomReady

Now as I am working on a template builder myself I thought a good place to start would be by reviewing the YAML builder and to decipher the positives and negatives of the application. So here we go:

aesthetics

It has to be said the builder is very aesthetically pleasing with a simple yet satisfying design and very powerful interactive features allowing drag and drop components to help build the template as required.

level of detail

The level of detail at which you can manipulate your desired template is relatively high, however, if your looking to create a very complex template this builder is not for you. Allowing only 0, 2 or 3 column layouts can be quite restrictive although it does allow you to add “column sets” to each column to produce a more precise layout, however, this is not always practical.

The ability to add padded content boxes, content elements (such as h1, h2, p, line, ul) and column sets really enhances the template builders appeal and definitely offers novice template builders a firm foundation from which they can build.

The level at which column and site widths can be edited also works very nicely. The ability to set max and min widths, re-order columns and change the individual column widths add for a satisfying effect.

conclusion

It has to be said the YAML builder is well worth a look to see if it meets your needs. More complex layouts may be a bridge too far for this builder, but I believe with a little extra development this app could be formidable. It does have a very strong foundation, but I would like to see it support more columns and the integration of rows as well. Then there is always the prospect of equal height columns to take it in to the exceptional bracket.

A lot to think about when considering my own template builder, but I can definitely use this as a firm benchmark from which I can weigh my own efforts against.

update

I have just received an email from Dirk Jesse (YAML Builder Developer) and he added the following to my review with regards to the level of complexity:

"Check out the Subtemplates in the "Add Elements" section. These offer much higher flexibility (eg. columns and rows) and can be combined with the exisiting columns. You can also remove all columns and creatve your layout only with the subtemplates. They even can be nested. So, rather complex layouts are possible too."

Well I think that just about caps it off.  What an awesome app.  If anyone uses it let me know how you get on.

Anyway the code itself aims to fire a function when there has been no mouse movement for a predefined length of time and reset the count every time the mouse is moved.

code

The code is very simple, therefore, only the JavaScript is worth talking about for this example, so that is going to be the focus of this article.  Have a look for yourself below.

Right then here we go:

JavaScript

At the top of the code there is a variable called "idleTime", this variable sets the idle state time (in milliseconds) that the browser mouse be idble for, before firing the function.  Change this as you wish.

Next we have the "init" function which is called on page load by an event listener at the bottom of the sample code.  This itself sets a mouse move event listener (which resets the idle state when fired) on the document body and also calls the idle state function.

We then have an "onIdleFunction" which is where you put the code you wish to be fired when the page is idle.  In this example we’re just alerting out that the page has been idle.

Finally we have two functions, resetIdle and setIdle, which really do exactly what it says on the tin.  The first resets the idle state (on mouse movement) and the second sets the idle state.

Well that’s about it so have a look for yourself at the demo and code below.

demo

Feel free to view the Simple JavaScript Idle State using Prototype Demo.

download

Also please have a look at the Simple JavaScript Idle State using Prototype Code.

note

The Idle State at present only uses mouse movement for detect inactivity.  This will be problematic when considering devices that do not have mice (as it will not work), however, the code can be easily adapted to check for other forms of activity.

It is also worth while mentioning that the mouse move event is applied to the document body and therefore you must make sure that the height and width of the body and html are set to 100% for this to work, otherwise the event listener will not work.

Have a look for yourself at HTML/CSS Liquid Layout Templates and let me know what you think.

Due to the nature of embedded flash it does not seem possible to “mask” it using an overflow hidden on a containing DIV. This however is not the case.

By simply adding the following parameters a flash movie can be masked:

The wmode parameters bring the flash movie back into the flow of the document and therefore allow it to be treated as if it were for example an image.

The complete code I have used in the example is as follows:

code

css

The CSS as shown above is very simple and sets a width on a containing DIV to 30% of the page width as well as having an overflow set to hidden. This will simply demonstrate the effect clearly.

html

As can be seen above there isnothing special here. Simply a containing DIV with a flash movie embeded and of course the parameters set.

example

Please have a look at the Masking a Flash Movie in HTML using a DIV example.

download

Feel free to try it out yourself with the Masking a Flash Movie in HTML using a DIV download.