I am frequently asked to build HTML email templates for clients and internal projects. Recently, I created a template as a base to start from. The template is available for download, feel free to download and use it if you are looking for a neat clean standards complient start to your email marketing campaign.
Sending HTML email can be a challenge. Questions about image hosting, embeded CSS, viewer support etc. are exponentially more complicated than a simple web page. My approach to this project was to make the template as simple as possible placing the emphasis on the content with fewer images, included CSS, simple but elegant design and fully complient markup.
Just to be safe I designed for IE6 and up. Because of this I am using a “transitional” DOCTYPE and hybrid markup strategy that utilizes tables for structure and CSS for font styles, backgrounds and margins. The layout is a simple 2 column design with header and footer. In its current form the template requires on four images, thumbnail and feature images are optional.
Super Clean CSS
Download the template and images
I find it interesting that we are this far into the web 2.0 revolution and Front End Engineers are still struggling with CSS page footers. Just last week I was faced with this exact issue. Having created a site design and produced all the front-end code for the project, I passed the entire package on to the developers with a nice neat bow on it.
However, as is often the case, issues began to appear as the development cycle began. Utilizing a standard two column layout, I elected to place the footer at the bottom of the primary content pane rather than at the bottom of the entire page. I thought it might look nice to contain the footer within the content pane and adjust it’s placement relative to the content rather than both the left navigation AND the content. Interestingly, issues began to appear in FF3 once the page was filled with content. During the course of my development work I had tested the code in IE7 and 8, FF3, Safari and Chrome without issue but now, suddenly, my footer was overlapping content or appearing way up the page rather than firmly attached to the bottom of the page.
In the end, I ended up pulling the footer from the content pane and placing it in a more traditional location spanning both the nav column AND the content column. While it works fine now it was a painful process to make these changes after development was already underway. As a result, I thought it might be timely to discuss CSS footers and how to make them clear columns using the seldom used clear property. NOTE: this will still not fix the footer to the bottom of the page but it WILL clear all of your content.
There are about as many ways to place a footer as there are designers but this is a method I keep coming back to. Outlined by Patrick Griffiths in his book Best Practice Guide to XHTML and CSS, not only does this method work, it makes sense to me.
The Problem
For this example I am looking at a two column web page. Column1 being navigation and column 2 being content. Here is the HTML:
<div id=”header”>
<!–stuff–>
</div>
<div id=”navigation”>
<!–stuff–>
</div>
<div id=”content”>
<!–stuff–>
</div>
<div id=”footer”>
<!–stuff–>
</div>
This should work as is provided you can guarantee the navigation column will never be longer than the content…but can you? As designers one thing we can never count on is what the client is going to do with our design. So how do we get out of this fix?
Absolute positioning is generally the first thing I used to try but in this case. Applying absolute positioning to the navigation column would make sense.
#navigation {
postion: absolute;
left: 0;
top: 100px;
width:150px;
}
#content{
margin-left:150px;
}
Absolute positioned boxes are pulled from the normal flow of the page making it difficult to determine where they will end and you cannot align other elements on the page in relative to an absolutely position item. If our navigation column is absolute positioned and our page content is shorter than our navigation column we will end up with a footer that is overlapping our navigation. So what is a sensible workaround for this?
One simple option is to float the navigation rather than absolute positioning it:
#navigation{
width:150px;
float:left;
}
#content{
margin-left:150px;
}
#footer{
clear: both;
}
The clear CSS property is specifically designed for use with the float property. In this case we have floated the navigation left so that the content will run to the right. The clear property forces the footer to in effect “clear” the navigation in cases where the content is shorter than the navigation. If the content is longer than the navigation nothing will happen.
Web based applications are getting more and more sophisticated all the time. More often, designers are being asked to design more that just web sites. Increasingly we are being asked to lend our skills to the design of web based applications filled with forms and various pieces of complicated functionality. As experience engineers it is up to us to find solutions for applications that we never would have dreamed of delivering via the web several years ago.
This is my solution to one such problem. I was presented with a complicated application will with large numbers of forms in many many catagories. The challenge was to find a way to present all the required features in a way that presented like a cohesive application and not just a bunch of forms linked from web pages. For the solution I turned to jQuery and CSS.
The Expanding Application Window consists of a series of tabs and concertina-like sliding bars, it’s basically an expanding window navigation control on steroids with a tab navigation feature attached. Developers are able to take this framework and add any number of tabs or sliding windows to complete the client’s applications allowing for nearly infinite expansion as the application evolves.
The inspiration for this application window system came from the incredible work of John Resig and Stu Nicholls. In the work of both of these gentleman I was able to find pieces of the solution I was looking for. By combining them I was able to create a solution to my unique problem.
View a Demo | Get the code
