Newsletter Width

Probably the most common question regarding newsletter is what dimensions should they be.  The problem is each mail client is completely different.  Some are tall and skinny, others short and fat.  It’s kind of like the left over bin at a bargain basement sale, you don’t know what you’re going to get.  According to campaignmontior.com, they suggest not to go any wider than 550-600 pixels.

Tables for Structure

You’ve spent all this time using divs and CSS in your websites to layout everything.  Well with email you can forget all that. Back to the 1990’s we go.  Best practice for laying out columns or any other structural areas is to use the good ol’ table.  A lot mail clients don’t support the CSS that make using divs a viable solutions.

Inline Styles

It’s generally good practice to keep all your styles inline.  Some mail clients take pleasure in adding their own CSS to the equation which throws yours out the window. Inline styles insure the mail client uses your styles and not theirs.  If you do wish to put your styles at the top of your document, just be sure to do it within the body tag.  I know what your thinking…but that won’t validate?  You’re absolute right, but some mail clients totally discard the head tag, so anything in there will be thrown out like 2 month old milk.

Padding or Width, Not Both

In CSS it’s generally good practice to keep padding and width separate.  The same goes for emails.  Width and padding don’t get along. Think of them like the contenders in the next UFC fight night.  Since the mail clients are still stuck in prehistoric web days, padding can sometimes add to the width, even if the width is specified.  If you need to have both then you’ll have to put a table within a table.  The outside table cell specifying the width, and the inside one specifying the padding.

Backgrounds

Unfortunately Outlook 2007 screwed this up for everyone.  It doesn’t support background images.  So consider this when designing your next newsletter.  Also the body tag gets stripped of any styles, so if you put a background color on it, it won’t show up in some mail clients.  You’re best bet is to wrap you’re entire newsletter in a table, and apply the background color to the cell.  It’s also good practice to use the old bgcolor attribute in place of the CSS.  It ensures that all mail clients will display your background color.

JavaScript / Flash

Plain and simple, JavaScript and Flash aren’t supported, some cases they are, but most aren’t..  They’re like the embarrassing friend of yours that nobody wants to hang out with.  Sorry.

Images

Consider it good practice to always specify the width, height, and alt tags of all your images.  A lot of email clients have images shut off automatically.  With the width and height specified it will keep the structure of your layout, and the alt tag will give a description of the image. 

One extra little tip for images, sometimes you’ll notice an extra space underneath your images that you can’t get rid of.  This can be a couple of things.

1. You set your doctype of your document.  Get rid of the doctype, or set it to HTML 4 transitional to fix this problem.
2. An old HTML bug where the image should be right up against the closing </td> or else it throws in an extra space.

Conclusion

In general try and think like you’re back in the old days of internet.  For those younger people out there that haven’t developed in the olden days, now you see what we had to put up with, nothing works the way it should…wow I sound like my father.

Where We Left Off

We should be at a point where we now know how to reorder a list.  If you haven’t read the previous tutorial or aren’t certain on how to reorder lists in jQuery, I encourage you to check out Beginners Guide to jQuery Sorting part 1.

Here is the code from the previous post:

What We’re Building

This time around we’re just going to take the current order of the list and save it to the database for future use.

Reworking the List

Previously we had a simple HTML un-ordered list.  This time we’re going to make it a little more complicated, with good reason of course.  In order to view the updates we make to the database, we first have to have a list  pulling from the database.  For this we will be using PHP and MySQL.

First we’re going to create a file called db.php.  In this file we’re going to do two things.  First connect to the database, and second select all the items from the database and create a list from them.  I’m not going to go into too much detail with the connection info.  If you want a little refresher, we went into more depth in our Beginners Guide to Using Ajax with jQuery post.

Here is the PHP code for connecting to the database:

I guess at this point it might be helpful to see what the database looks like.  We have 3 columns:

•  itemID (unique identifier),
• content (the text inside our list)
• Order (keep track of the order)

Now we’ll create a function that selects all the items from the database and outputs an un-ordered list.

Here is the PHP:

First we query the database with the mysqli object we created when we connected to the database.  If it returns results without errors then we can go ahead with making our list. 

Making the list isn’t too hard, we’re simply creating a variable that holds our list.  We then cycle through all of the items returned from the database and add it to the end of our variable.  After we have all the info in our variable, we display it for the world to see.  One special note, you’ll see that we are giving each <li> an id.  We’re going to use this when we get to the Ajax portion of the tutorial.  For now just know that the id is required.

The New HTML

Now that we have our db.php file ready to go, we can now make use of it in our main file.

First off we’re going to import the file to use it.  At the very top we’ll just put:

Now we can use the function displayAll() that we just created.  We’ll be replacing the un-ordered list with this function.  When the page is processed, the function will pull the data from the database and output a brand spankin’ new list.  Pretty sweet huh.

The jQuery

The jQuery changed a bit.  We’re adding a new update parameter to the sortable function.  This will be called whenever the order has been changed.

In the update function we’ll be doing 3 things.

• Prepping the info to be sent via Ajax
• Send the info via Ajax
• Display the new updated list

Here is the jQuery:

Prepping the Info

First thing we tackle is prepping the info by serializing it.  This just means that we’re taking the order of the list and preparing them in a way that they can be attached to a url.(e.g. www.domain.com?serialized=data )  For this serialize function to work we have to create ids for our list items in a particular way.  If I want an array called “item”  then I would give my li tags an id of item_1, item_2, item_3, etc. The serialize function will take the text before the underscore as the array name, and the number after as it’s value.  So a list with ids of item_1, item_2 would be serialized to item[]=1&item[]=2 .   When we created the function displayAll() we took this into consideration, and put the items ID value from the database after the underscore so we can reference it later.

Send Info

Next comes the Ajax.  We’re going to use the post function.  We simply have to give it a url, any data we want to send to the url and the function we want to call when we receive something back from the url.

Display New List

The function that handles the response simply just switches out the list’s HTML with the new HTML.

Updating the Database

The first thing we’re going to do is create a file called update.php.  This is the file that will be called by the Ajax.  In this file a couple of things are going to happen.

• Get the array sent in by the Ajax
• Cycle through each item in the array
• Update the database with the new value
• Display a new list

Here is the PHP:

Get the Array from Ajax

Since we used the post method in our jQuery, PHP’s $_POST variable will be populated by what we pasted in.  In our case it was the item array. It’s always good practice to make sure you’ll be receiving what you’re expecting.  In this case we’re expecting an array, so we check and make sure it is an array.

Cycle through the Array

After we’re sure we have an array on our hands, we cycle through each element in the array.  For each element we’re going to check and make sure the value is a number.  If we didn’t malicious users could pass in some harmful stuff.

Update the Database

After we have verified that array’s value is a number, we then pass it into our SQL statement.  The array is ordered in the same manner as the list was.  So the first item in the array is also the first item in the list.  The SQL will  then set the Order of the item to where it is in the array.

Display a New List

The code for this is pretty well the same as displayAll().  The only difference is that we’re leaving the <ul></ul> off, as these will already be in place, and we’re just replacing the innards.

That’s IT

That’s pretty well it.  Now we have our initial code that display’s our list.  Then our jQuery that passes on the order of the list via AJAX.  Then our update PHP file that checks to make sure the values are good, and passes them to the database.  After all that it passes the new list back to the jQuery to display.  Voila!

db.php :

Here is the HTML / jQuery / PHP:

update.php

What We’re Building

Quite simply, we’re trying to give the user the ability to sort a list by dragging and dropping items into place.  We’re also going to give a nice place holder to help guide the user.

Building the HTML

Fortunately the HTML is pretty simple.  All you will need is a simple un-ordered list, with some items in it.

HTML:

The CSS

The CSS is solely for appearances.  You don’t have to use what I used here, feel free to experiment with different styles.  The only class that needs any sort of explanation is the highlight class.  This class is for the placeholder for when the user starts dragging. So more than likely you’ll want to make this subdue, it’s just suppose to be a hint of where to drag the box.

CSS:

The jQuery

We’ll be using a library from the jQuery UI.  This does all the complicated code so you don’t have to.  You’re going to have to import 3 files

1. jQuery : http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
2. jQuery UI Core file : http://jqueryui.com/latest/ui/ui.core.js
3. jQuery UI Sortable file : http://jqueryui.com/latest/ui/ui.sortable.js

Once we have these imported then we’re good to go.  The jQuery that we’ll have to write isn’t overly complicated.

jQuery:

Conclusion

Now that you realize how easy it is to create a sortable list, use and abuse it.  Keep an eye out for part two of this tutorial where I will show how to interact with the database via AJAX.

Here is the code all together:

Positioning

The problem with loading JavaScript files is when they’re being downloaded the browser doesn’t download anything else.  So JavaScript affectively blocks your browsers from downloading other assets like CSS, or images. Giving the illusion that your page takes longer to load simply because the users notice the CSS and images not being loaded.  A simple trick is to place all of your JavaScript just before the end body tag.  This way it insures everything else has already started loading before it hits your JavaScript.  Really you’re not speeding up anything, just re-arranging how things load.

Load it When You Need it

JavaScript should only be used as an enhancement. Your website should work perfectly fine when JavaScript is shut off.  If it doesn’t you should consider looking into Progressive Enhancement. It’s a method that make sure your HTML is laid out first, then you add the bells and whistles.  That aside, because JavaScript shouldn’t be completely necessary, you should be able to load the script as you need them…not on page load.  This will speed up your initial page load, and get people into your site quicker. 

So how do you do this you ask?  With JavaScript of course.  Here is some code:

The function importFile() will add an element to the head of your document, just like you would normally.

To use these function you might do something like this:

It checks to see if a function you have in your JavaScript file exists, if it doesn’t then load the JavaScript file.

Delaying

The problem with loading your JavaScript on demand is there can be a pause while the script loads.  To prevent this we can just put a delay on loading the JavaScript.  This way it won’t load on page load, and it will be ready for whenever you need it.  This might look something like this:

Other Methods

Besides that you should consider combining all your JavaScript into one file, this way there are less requests for your browser to make.

Also consider caching you’re JavaScript files.  If the browser already has the file on hand it won’t download it, saving precious load time.

Lastly consider compressing your files, the smaller the files, the less the user has to download.

Conclusion

Hopefully these methods will help speed up your load times a bit.  You’re users will thank you for it…or rather they won’t complain as much…which is sort of like a thank you

What We Are Building

Here is a look at what we’ll be building.  Not too fancy but it gets the job done.  It gives your site a nice little Easter egg for you users to find when surfing.

Getting Started

The first thing we’re going to have to do is image work.  Decide which image you want to reveal.  I just found a picture of a cat on the internet.  Second of all you’re going to have to create a fairly large image that goes from your background color to transparent.  It needs to be large enough to cover even your largest browser.  I made mine about 2000px square with a little texture in the gradation.  Once you have that made, simply save it as a transparent PNG and your ready to go.  The idea here is that the transparent PNG is going to sit on top of your hidden image.  Your PNG is going to scroll up,  but your hidden image is going to stay in place.  Kind of like the curtains at a theatre.

The Code

There is not much to this.  There is a single div wrapper which will have the PNG overlay as it’s background, and the body will have the hidden image as it’s background.  In this tutorial I also added some text and an arrow just to show that it is scrolling.

Just a couple of notes.  For this to work in IE6 your going to have to find a PNG transparency fix.  There are 10 million out there, just pick one.  I used the jQuery pngFix plugin. Also be sure to get rid of any margin padding on the body.  You’re PNG overlay won’t go to the edges if you have this margin in place.

Here is the Code:

That’s all there is too it.  Nice and quick for a pretty cool effect.  Enjoy.

3D Tag Clouds..Oh My

What exactly will we be building?  It’s somewhat like a carousel, but we’re going to have the take fade off into the distance like the lone ranger at the end of cheesy “B” western flick….very dramatic. 

We’re also going to have our tag cloud interact with the users mouse.  The further the mouse is away from the center, the faster it will rotate.

Simple HTML

As the sub title suggests the HTML is painfully simple.  Most of the complicated stuff is in the jQuery.  All we’ll need is a list of anchor tags wrapped in a div.  Told you it was simple,  here is the HTML.

Styling the List

For the most part the CSS is just to make the links pretty.  There are a couple of things that need to happen though.  The anchor links need to have a position: absolute.  This way the jQuery can give it x and y co-ordinates and the links will obey.  Also we need to give a height and width of the div wrapper.  The jQuery reference the dimensions of the wrapper to help layout the links.  It might also be a good idea to give the wrapper a position:relative to keep the links inside the wrapper, this isn’t necessary though.

Here is the CSS:

The Fun Part (jQuery)

Now comes the trigonometry….see…your high school teacher was right, you will use this stuff in the real world.  It really isn’t that bad though…3 lines of trigonometry is more than acceptable. I’m not going to go into great detail with the math.  If you want to learn more about the math behind the 3D I recommend reading Kirupa.com tutorial on it. The tutorial is for flash, but you will get the gist of how it works.

Here is the jQuery:

Just to step through what we did.  First we setup the mouse event. We figure out how far the mouse is away from the center and assign it to a variable that controls the speed of the scrolling list.

After that we step through each element in our list and give each one a spot on our 3D circle.  A for loop walks through each one, and evenly assigns an angle to each element. (e.g. 1st = 0 degrees, 2nd = 5 degrees, 3rd = 10 degrees…etc)

After we placed each element on our 3D circle it’s time to animate it.  We use a setInterval to call our render function repeatedly.  The render function steps through each element and figures out where and how it should be displayed.  The trigonometry basically creates a set of numbers that if you plot it on a graph look like a wave. If you apply those numbers to the size of the text, it gives the appearance of going back and forth in space.  If you also apply these numbers to the y, this will give you the appearance that the text is going around in a circle. If you don’t understand the math inside this function not to worry.  I encourage you to play around with the numbers to see how each number effects the outcome.

The Finish Line

That’s all there is to it.  Here is the code all together so you can have a look.  Enjoy.

The Plan

Unfortunately browsers allow limited skinning of select boxes.  So the plan is to use jQuery to change a select box into a text box and a unorded list for the dropdown.  When a user clicks on the text box it will display the list below the textbox, just like a regular select box, but it’s easier to style.

Getting Started

The first thing we’ll need is a select box.  Nothing special here, just a regular select, but we’re going to give it an id so we can reference it later in the jQuery.

The jQuery

To save a little time we are going to use a plugin to handle converting the select into a text box.  I’ll be using the plugin from brainfault.com. From my experience this plugin is far less painful then other ones I’ve tried. It’s as simple as importing the plugin and running a method.  Here is the code to get it up and running.

Basically we’ve just imported the CSS which styles everything, jQuery, and the plugin.  Once we have those then we just have to run the selectbox method on the select boxes we would like to style.  We could have done something like $(‘select’) if we wanted to apply it to all select boxes.

The CSS

The CSS in selectbox.css isn’t too difficult, the most important part is applying the background image to the newly created text box.  Really you don’t need to touch anything in the CSS and just change the image.  In our case we want to make a couple of changes.  We’re simply going to change the font size and width inside the selectbox class.

The full CSS file can be seen here:

The Image

The last thing we need to handle is creating the image that will be the background for our text box.  On the far left of the image is the button and to the left will be the background of the select box.  Here is the image we will be using.

That’s it, after we’ve created the image we’re good to go.  I recommend looking at the plugin code to get an idea how it all works. This is a fantastic plugin so be sure to give your props over at www.brainfault.com .

Here is the code all together.

The CSS:

The Idea

I liked killie6’s module, but I think it has to be a little more in your face. Originally I thought having something like a humorous 404 page would do the trick, but that would kill any sort of navigation of your site.  So I opted to create a lightbox that pops up if you’re using IE6, make the user feel painfully guilty for using IE6, then give them a way to upgrade right then and there.  Hopefully this will get the idea across to users not to use IE6.

If you like this idea please download and use it.  If you want something less obtrusive go with killie6.com.  Something has to be done, the browser is driving everyone CRAZY!…okay maybe not everyone…probably just me.

What We Are Building

We are going to build a header that animates it’s background.  We will also encase the header in shadow for the little extra dramatic effect.

How it’s Going to Work

The header background image is going to be super tall. Here is the important part, we’re making a header that is 300px tall.  The image’s top 300px and bottom 300px have to be the same.  This will allow us to scroll our header seamlessly.  So dust of your Photoshop skills you’re going to need them.  Not to fret, it’s not that difficult.  Just copy the top 300px of your image and paste them on the bottom.  Then blend what was originally on your background with what you pasted in.

Now that we have our background image, we will also need to create a shadow overlay image. This will basically be a png with a transparent center that gradually turns to black on the edges.  With the CSS we are going to lay this on top of our header to give a dramatic effect.

After that it’s just a matter of animating the background image with jQuery so it scrolls.

Getting Started

The first thing we’re going to need is the HTML in place.  It’s pretty straight forward.  We have a wrapper div to center the website, a header div for the animation, another div within the header for the shadow overlay, and finally divs for the navigation and body copy.  It’s a lot of divs, but what do you expect, it’s the framework

Here is the HTML:

The CSS

We aren’t going to do anything too difficult here. Here is a list of what was done:

• Center the website
• Give the header a height and a background image
• Style and position the text within the header
• Create a shadow overlay
• Give basic style to the header and navigation bar.

Here is the CSS:

Just a note, the png transparency won’t work in IE6.  If you choose to optimize for IE6 you will need to add this piece of code to use the overlay.

HTML:

The jQuery

There are a couple ways of animating the background with jQuery.  You can use the jQuery plugin that allows you to animate the CSS background-position attribute.  This is the same plugin we used for making a table row highlighter in jQuery. I opted not to use this as I found the performance was lagging.  Instead I went with an interval that calls a function repeatedly.  It’s a little uglier to look at but the performance is a lot better.

Here is the jQuery:

Bring it All Together

That’s all there is to it.  Here is the code all together.

What We Are Building

We be making a simple image viewer that has 4 tabs on the left and a main picture on the right.  When the user clicks on one of the tabs it shows the new image.

Prepping the Images

First thing we’ll need are images.  In this example I’ve used landscape images, but this could be promotional content, or whatever you like.  I made the main image 500×300, and the tabs 75×125.  I just picked a size for the main image, than divided the height by how many tabs I wanted. (e.g.. 300 / 4 = 75)  This gives me the height of my tabs. The width of tab was arbitrary, I just resized the main image to the height of 75 and the width is whatever it falls at, in this case 125.

The Theory

The theory behind how this is all going to work really isn’t that difficult.  We’re going to use anchor tags to jump from one image to the next. This is much like a “Back to Top” link that jumps to the top of the page when you click on it.  The only difference is the images are going to be scrolling within a div wrapper instead up jumping up and down the page.

The HTML

The HTML itself is pretty simple.  For the tabs it’s just an unordered list, with images inside of anchor tags. For the images they’re all wrapped in a div (this is important as we are going to hide the overflow so it only displays your selected image) Also each individual image is wrapped in a div along with a named anchor tag.  These divs are there incase you want to use background images instead of regular images, we really don’t need them in this instance, they’re just there incase we change our mind.

Here is the HTML:

The CSS

What we’re going to do with the CSS is setup the tabs so they sit to the left and are stacked on top of one another.  We’re also going to make it so the tabs originally sit at an opacity of 40%, then when a user rolls over the tab it will change to 100% opacity.  Probably the most important part of the CSS will be for div wrapping the images.  We just have to make sure the overflow is set to hidden.

Here is the CSS:

Putting it All Together

The last thing we need to do is put the HTML and CSS together.  Of course you change around the appearance of where the tabs sit and how many tabs there are.  The important thing to take from this tutorial is the idea of using anchor tags as a means of switching images.

Here is all the code together: