Here’s the answer.

It’s actually pretty simple in it’s current state.

First, you need to start off by building your containers with appropriate background images and such which looks something like this:

<div id="container"></div>

With CSS that looks eerily similar to this:

#container {
            height:70px;
            width:900px;
}

Then add your background image, which gives you this:

#container {
            height:70px;
            width:900px;
            background:url(image.png) bottom center no-repeat;
}

Now, what you’re left with is a div that’s at the top of your page that’s 70 pixels tall, 900px wide and has a background image that’s at the bottom/center of the div.

Next is the positioning trick. In order to get the div to stay at the bottom of the page and not move when you scroll there a bit more CSS to add to the container. We need to position the div to be static, and then center it in the window.

To make it not scroll:

#container {
            height:70px;
            width:900px;
            background:url(image.png) bottom center no-repeat;
            position:fixed;
}

Take make it at the bottom of the window:

#container {
            height:70px;
            width:900px;
            background:url(image.png) bottom center no-repeat;
            position:fixed;
            bottom:0;
}

To make it in the center. This is a two parter. First we need to determine the center of the page:

#container {
            height:70px;
            width:900px;
            background:url(image.png) bottom center no-repeat;
            position:fixed;
            bottom:0;
            left:50%
}

That makes it so that the left side of the div is aligned to the middle of the screen. Now we need to pull the div to the left by giving it a negative left margin of half of the entire width of the div (remember that the div is already set to be 900px wide).

#container {
            height:70px;
            width:900px;
            background:url(image.png) bottom center no-repeat;
            position:fixed;
            bottom:0;
            left:50%;
            margin-left:-450px;
}

That’s it! Now you just need to find a good drop down menu system to plug into that and you’re gold. The navigation system we used was a highly customized Jquery plugin that’s meant to emulate Mac’s Stacks. We had to retool it to work on a toggle so that one disappears when another is opened…but that’s a different post for a different time ; )

-Steve

One can argue that they didn’t change the shortcut keys on all of the programs because people were already used to, and had already established, their muscle memory for the pre-established keystrokes. My opinion is that the new programs have been around long enough that it’s time to make the simplest aspect of consistency consistent. Let’s face it, it’s completely absurd that to hide an application you press Command-H in Dreamweaver, Command-Shift-H in Photoshop, and Illustrator totally lacks a default keystroke for hiding altogether.

Now, Adobe doesn’t appear to be changing this any time soon, however they did set the programs up to customize all key commands on your own.

It’s honestly as simple as selecting Edit > Keystrokes

From there, you can view either shortcuts for tools or shortcuts for each menu item categorized by a high level menu option.

Once you find a shortcut you would like to change, click on the appropriate column and then simply type the keys you would like to assign to that shortcut and the symbols for those keys will appear. Hit save and you’re all set – and one step closer to better efficiency.

1. Email Clients are dumb

When creating an HTML email always remember that you’re basically creating a web page for someone in 1996. This means that you should be using the simplest in HTML tags, and when using CSS, don’t use floats, absolute positioning, and use CSS shorthand sparingly.

2. Don’t copy and paste or import a Word file as the content in your email.

If you paste in from Word you’ll also be pasting in Word’s special characters which tend to fail-out when viewed in an email client (or a basic web-browser for that matter). What I mean by that is that a quotation mark pasted in from word will be the pretty curved quotation mark instead of the web-standard straight-quotes. So, if it’s THAT important to you to have curly quotes you would actually need to replace all quotations with either the code “ or ”

You’ll also end up with a bunch of useless XML and styling that doesn’t do anything but mess things up like this.

3. Width

Remember that most people viewing your emails won’t be seeing it in a web browser, they’ll be looking at it in Mac Mail, Outlook, Entourage, Thunderbird, etc. So, the standard rules of website width don’t apply. You’ll want to keep email below 650 pixels.

4. The <head> is useless

Don’t spend too much time playing with the information in the Head of the HTML. In fact, you can delete it. Most email clients will remove it anyway so it doesn’t interfere with their own interface.

5. Don’t give it a DOCTYPE

Remove any DOCTYPE information from the top of the HTML. Because you’re going to be using depreciated and long-handed code the DOCTYPE may actually interfere with what you’re trying to accomplish.

6. No external stylesheets

Trying to use external stylesheets is generally a bad idea. Its support between email clients is spotty at best. It’s best practice to APPLY ALL STYLES INLINE.

7. No Javascript or Flash

As stated in #6, support for in-email Javascript is very spotty because of security issues. Flash just straight-up won’t work…don’t even think about it.

8. Always give direct source URLs

When linking images up to your email, remember, they always must be hosted online on a public server. So, never leave an image tag like this: <img src="image.gif" />. The src="" should always be a direct link: <img src="http://www.blindacre.com/blog/image.gif" />

SO, now that we’ve got the Top 8 things to remember, what we’re left with is a basic HTML shell that looks like this:


<html>
<body>
</body>
</html>

Adding in a 650 pixel wide column to contain the content of the email that is centered in the window should look something like this:


<html>
<body>
<div align="center">
<table width="650">
<tr>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>

Now we basically have a shell ready, you can put all content between the <td></td> tag (the table cell) or separate your main table into rows and columns for your layout.

Now, let’s add some content


<html>
<body>
<div align="center">
<table width="650">
<tr>
<td>
<h1>This is the Heading!</h1>
<h2>This is a Sub-Heading</h2>
<img src="http://www.blindacre.com/images/logo.png" />
<p>Lorem ipsum dolor sit amet, consectetur <a href="http://www.blindacre.com/">adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
</table>
</div>
</body>
</html>

This bit of code gives us an email that looks like this:

Ok, we’ve got the layout and we’ve got the content, now lets add some styles.

REMEMBER: Keep all styles and CSS in-line, and don’t use any shorthand!!!


<html>
<body style="margin-top:0px; margin-bottom:0px; background-color:#2d2d2d;",>
<div align="center">
<table width="650" cellpadding="20">
<tr>
<td style="background-color:#1d1d1d;">
<h1 style="font-size:35pt; color:#899C2D; font-family:Georgia, 'Times New Roman', Times, serif; margin-bottom:0px; padding-bottom:5px; font-weight:normal; border-bottom:1px solid #cccccc;">This is the Heading!</h1>
<h2 style="font-size:18pt; color:#899C2D; margin-top:0px; margin-bottom:20px; font-weight:normal; text-align:right; font-style:italic;">This is a Sub-Heading</h2>
<center><img src="http://www.blindacre.com/images/logo.png" border="0" /></center>
<p style="font-size:12pt; line-height:30px; font-family:'Lucida Grande', Arial, Verdana, sans-serif; color:#888888;">Lorem ipsum dolor sit amet, consectetur <a href="http://www.blindacre.com/" style="color:#899C2D;">adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
</table>
</div>
</body>
</html>

As you can see, all CSS is inline (and in pink).

The code above with the styles now gives us an email like this:

Now, once you’re all done with your pretty HTML email design and you think it’s ready to send be sure to CHECK AND RE-CHECK THE EMAIL IN MULTIPLE EMAIL CLIENTS!!!

The email clients you’ll especially want to watch out for are:

1. Outlook
2. Outlook Express
3. Mac Mail
4. Entourage
5. Thunderbird

You’ll also want to sign up for a few different free email providers including:

1. Gmail
2. Yahoo
3. Hotmail
4. AOL

That’s all for now – if you have any questions or think we missed something important, leave us a comment and we’ll answer ASAP.

-Steve

OBVIOUSLY this was a huge frustration; everyone was blaming everyone else for their timezone being wrong, there was rioting in the streets, etc.

After a quick Googling, I found a short forum post on the Apple Support site that explains what the problem is.

Go to iCal > Preferences > Advanced and UNCHECK “Turn on timezone support”.

Turn off timezone support

Apparently this is another one of those bugs in iCal that Apple decided to overlook and send to market anyway…kind of like not being able to cancel the dialog window if you accidentally open the editing pane of an event.

See...no cancel option. You HAVE TO sent it out.

Fuzzy edges vs. Crisp edges

What’s really going on here?

For whatever reason, Adobe decided to allow vector paths to actually float BETWEEN pixels causing some amount of anti-aliasing to occur on sharp edges, thus making them not so sharp.

Zoomed in you can clearly see that the path forming the rectangle is between pixels

There are, as far as I can tell 3 ways to avoid this.

1. Have perfect mouse-eye coordination
2. Fix it after the fact
3. Make it so it doesn’t happen in the first place

The first option is obviously NOT the best way to go…no one’s that good.

So, on to the second option.

If you notice that this happened to your vector shapes than you need to zoom in nearly to the max 3200%, grab each anchor point on a given side with your Direct Selection tool (the white arrow – keyboard shortcut “A”) and nudge the points into position with your arrow keys.

Aside from this being time consuming and annoying, there’s also potential for mathematical errors in the dimensions of your shape. What I mean is, because you’re shifting individual sides of your shape one at a time, it’s possible to turn your perfect 250×250 pixel square into a 252×248 pixel rectangle if you don’t keep track of which way you need to nudge your paths.

NOW, that leaves us with our third, final, and best option; avoid the situation all-together.

This is another one of those “why in the world didn’t Adobe turn this setting on by default instead of hiding it in a menu than no one opens with any kind of regularity?” Yes. There IS a setting to turn this off.

With any of the vector tools selected, look up top at your menu bar.

So, now, look at the bottom, almost in the dead center of the menu, just to the right of the Custom Shape Tool. Click on the menu drop down.

Drop down menu with Snap To Pixels selected

At the bottom right of that drop-down menu select the checkbox that reads “Snap to Pixels”.

There you go! Never again will you have to deal with fuzzy edged rectangles.

NOW, if anyone knows how to do this with the OTHER vector tools (pen, line, polygon) drop me a line at steve@blindacre.com. Until then, in order to fix THOSE shapes, I suggest reverting to Option 2.