Archive for the ‘HTML Tutorials’ Category

Email Client Compatibility – HTML Friendly Emails

As a web designer, I actually do not frequently find myself working with email designs. So when my employer requested some HTML email templates, I had to do some research. I found a fantastic article on HTML emails that really helped me out. It was a bit long though, and I discovered some additional things along the way that I thought I’d share.

The first thing you have to do as a web designer when working with HTML emails is forget everything you know about modern coding standards. HTML email is years behind the curve. You’ll find yourself using inline CSS with limited shortcuts, tables instead of divs, and even deprecated attributes that haven’t been used in years.

The second thing you have to do is settle on a simple design. If you thought cross-browser testing was a miserable experience with four to five browsers (Safari, IE, Firefox, Chrome, and maybe Opera… plus mobile if you desire) try the dozens upon dozens of different email clients that all render differently! There are some good resources out there for cross-email-client compatibility testing such as Campaign Monitor or Litmus, but most charge, and if they don’t, they have a lot of restrictions like frequency of checking.

So here are the secrets to making your emails look good across all of your major email clients:

1. Use Tables For Layout because floating and positioning doesn’t work all that well. If you need something to appear next to another item (such as an image next to text) you should still divide that up into two tables. I know I know, it goes against everything you’ve ever known about modern coding standards and practices. But trust me, it’s the best way to go.

2. Use Inline CSS Only unless you don’t want your emails to all look the same. Some email clients will strip out the head tag or any external style sheet references, and others anything within a style tag. Keep in mind, many of these email clients are browser based, meaning they have their own custom CSS. To protect that CSS, they’ll strip anything out that could interfere with it before displaying it. And don’t even think about javascript…

3. Don’t Shy Away From Deprecated Attributes like width and border for your tables. When in doubt, just include it, because W3C standards do not really apply in the same way for emails as they do for websites. I always double my declarations. If I want my table to have no border, then I put that in my inline style declaration, and as a border="0" within the tag.

4. Avoid CSS Shorthand like "font: 14px Arial;" and instead do it longhand like "font-family: Arial; font-size: 14px;". Some email clients won’t read the shorthand CSS, though admittedly a majority do.

Here’s a bare, one column template that you can use with a single h1, h2, p, and a tag. Notice the XX and YY for your own personal preferences. The 98% width on the main table prevents email client bugs that create horizontal scroll bars.:

<table style="width: 98%;"><tr><td valign="top" align="center">
<table style="width: YYpx;"><tr><td valign="top">
<table width="YY" cellpadding="0" cellspacing="0">
    <td style="width: 600px;" valign="top">
      Header Content Goes In Here
    <td style="width: YYpx;" align="left" valign="top">
      <h1 style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Header Here</h1>
      <h2 style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Subheader Here</h2>
      <p style="font-size: XXpx; color: #XXXXXX; font-family: XX;
        margin: XXpx XXpx XXpx XXpx;">Enter Your Main Content Here</p>
      <a href="" target="_blank" style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Link Here</a>
    <td style="width: YYpx;" valign="top">
      Footer Content Goes In Here

In a future post, I’ll discuss ways to avoid getting your email marked as spam, as well as other best practices for making a good marketing email.

HTML For Beginners

I’ve been inspired to write an explanation of how HTML works, and how webpages are created in general, so that the average person, computer-savvy or not, can understand, and even do their own work with HTML. But, I’m gonna start at the WAY beginning, so if you already sorta get it, then don’t start here.

So first, an explanation of what HTML is. HTML is what us web designers and developers use to tell a person’s internet browser how to make the webpage look. How about an analogy. Say you just painted a room in your house, and to do it, you took everything out of the room and put it in a pile. Now you need to put all the stuff back into the room, all in a specific place. Certain things need to look certain ways. Pictures need to be hung on the wall, furniture needs to be up against the wall, books need to be on shelves, and lamps need to be plugged in. Now think of the webpage as the room, and all the things you have to put in your room are the pictures and text and links you want in your webpage. All those different things have to look certain ways, and for a person’s browser to know where to put everything on the page, it needs HTML to explain it.

Let’s get a bit more specific. Every webpage you ever look at has HTML in it. The basis of HTML is something called a tag. The tag is what you put around different types of things on your webpage so the internet browser knows what to make it look like. There is a tag for paragraphs, for images, and for links, in fact there are about 100 different types of tags (Here’s a list of all HTML tags). Really, only about 20 are commonly used though, so don’t worry. All tags look something like this (but for the example, this is a paragraph tag):

<p>Your paragraph goes inside here.</p>

You’ll notice the paragraph tag opens, then you put in the paragraph, and then it closes with the slash you see above. You can also put tags inside of other tags. In fact, that is really the basis of all HTML pages. Say for example you wanted a link inside of your paragraph. You’ll obviously have a link tag inside your paragraph tag. That would look like this:

<p>Your paragraph goes inside here. And here is a <a href="">link</a></p>

The a means a link, and href is where you put the destination of the link. Similarly, images are put into tags. Images have the img at the beginning for image, then the source (src) where the image is (if you copy and paste that url into your browser, you’ll visit a page with just the image), then the height and width of the image (in pixels), and then alternative text (alt) if the image doesn’t display.

<img src="/images/tutorials/stickyFooter.gif" height="251" width="351" alt="Sticky Footer Tutorial" />

Now you’ll notice that there is no closing tag for the img tag, because nothing goes “inside” of it. So, it closes itself at the end with a slash.

Some other common tags you’ll see, and what they mean:

<html></html> <!--The entire HTML page is wrapped inside an html tag-->
<head></head> <!--Things like the title and description of the page go in the head tag-->
<body></body> <!--The body tag contains all the displayed HTML-->
<table><tr><td></td></tr></table> <!--This is a table like in Microsoft Excel. First you open the table, then you have as many rows as you want (tr) with as many columns as you want in each row (td).-->
<ul><li></li></ul> <!--This is an unordered list (ul) with lots of list items in it (li). Unordered lists have bullets. Ordered lists (ol) have numbers.-->
<h1></h1> <!--This is a header tag. Titles and bigger text go in here. There are 6 header tags that display smaller as you increase the number (h2, h3, h4, h5, and h6).-->
<div></div> <!--Think of the div tag as a two-dimensional box. You can put stuff in it, tell it how big to be, and tell it where to show up on the webpage. This is probably one of the most common HTML tags, and also the hardest one to understand.-->

Alright, that’s enough of those for now, because those are the major ones. Browsers have default ways of displaying those tags. Then, what web designers do, is they apply special rules to those tags so they display just how they want them to. That’s what makes different websites look so different! Those special styles are included in different files called CSS files, or Cascading Style Sheets. I’ve written many posts on CSS, here’s the CSS Back To Basics post. Any questions, feel free to ask! And if you are ever curious how a webpage is written, you can go to your browser, click the view menu, and select to view the source. That will let you see all the HTML that makes the page you are viewing! Don’t get overwhelmed though, just give it a shot and take your time.

The Pros and Cons of Tables

When I started my job as a fulltime web designer, I discovered that my boss used tables for everything. This wasn’t that surprising considering he is a back end developer as opposed to a front end designer. I of course yelled at him (in my mind so as not to get fired) about how horrible tables are. Since then, I’ve settled more in the middle, and I figured I should offer my two cents on the debate of Tables Versus CSS for layout purposes.

First let’s take a look at the oh-so-obvious faults of tables, and why these cons are such an issue.

Con 1. Tables are incredibly rigid. Short of moving the content from one cell to another, changing the layout of anything within your table is incredibly difficult. Especially since you won’t want your layout to look like it uses a table, you’ll end up with rowspans and colspans everywhere.

Con 2. Table code can get messy. If you use tables for all your layout, then you’ll end up with nested tables all over the place. The code becomes hard to read, and almost impossible to edit.

Con 3. Tables have different default settings in different browsers. If you want your site to look the same no matter what browser your user is viewing it through, then you’ll have to go through at set padding, margin, border, et cetera to the values you want them to be. This is a hassle because of all the tags associated with tables. You’ve got table, tr, th, and td. Mind you, even if you don’t use tables, you should be setting default CSS values anyway to avoid cross-browser issues.

Con 4. Tables increase the size of your files. That’s right. Tables just often require more code. Even though the difference in load time for most people is negligable, it is still something to consider.

Alright, and now the benefits of tables, and why it is important to set aside your bias against tables and accept these pros.

Pro 1. Tables can be very helpful for certain design elements. Take rounded corners of any box for example. Though you’ll need anywhere between 1 and 8 images to make a rounded corner box (1 if the box does not need to expand, 3 if it expands in one direction, and 8 if it expands in two), tables will make the implementation of this a lot easier. Of course, you can use divs for this, but you won’t need to edit this table, just the content and images inside. Divs can float incorrectly in different browsers, ruining your rounded corner box, but the table won’t break.

Pro 2. Tables are great when you need to show… tables. That’s right, sometimes the best way to display information is in a table, and obviously the best way to implement that in the web is using… you guessed it, a table!

Pro 3. Tables make certain difficult CSS issues much easier. With tables, you can easily vertically center text, or ensure that two separate sentences of text will always appear next to each other horizontally. Obviously, there are tricks in CSS around this anyway. To vertically center a line of text, you can set the line-height to the same pixel height as the div it is in. So clearly, there is always a way around this problem.

When it comes down to it, every pro or con you find for tables doesn’t really matter. For every pro, using a little CSS magic, you can work around it. For every con, using a little effort or time can work around it too.

In the end, using floating divs is a much safer route to go for your layout. You can change the location of content very easily, your code will be cleaner, and make more sense logically when reading through it. But don’t knock down tables. Use tables for your overarching page layout (header, body, footer for example). These things won’t change as much, so tables are a clean and safe solution. Basically, tables aren’t 100% evil or amazing. Use them when appropriate, and don’t overdo it, and you’ll be just fine.

CSS Rollover Button

Everyone likes a good rollover button. It creates interactivity for the user (which younger website users like) but also gives an indication that the button is clickable (which is important for older and less experienced website users). There are a lot of ways of implementing a good rollover. Most people jump to Javascript to do this because they think that’s the only way. However, this requires you to write javascript that preloads your images so that there is no delay on the rollover for the first time. Well, I’ve found a much better solution using only CSS that is clean, easy to implement, won’t break, and works across all browsers. I love it so much that I use it for all of my buttons on my fulltime employer’s website.

So now you must be asking, how does this wondrous CSS miracle work? It is actually quite simple. Using only one image, you will restrict the size of your button (to only show part of the image which will be set as the background), and then use the pseudo-class :hover to shift the background-position of that image into the hovered portion. Again, this allows your full image to be preloaded so there is no delay on rollover. This has been cross-browser tested in Firefox 2 and 3, Internet Explorer 6* and 7, Safari, Opera, and Chrome, and it works perfectly. Here is an example below including the full image, the image as it will appear/work, the HTML, and the CSS.

This is the HTML:

<div class="rollover" id="exampleButtonIDHere">
  <a href="link location here">
    Put a summary of your button here. A few words will suffice, imagine this as the "alt" text for your image/link  

This is the CSS that made the image on the left into the button on the right.

.rollover a{
   display: block;
   text-indent: -9999px;
   margin: auto auto auto auto;
   cursor: pointer;
   outline: transparent solid 0px;
#exampleButtonIDHere a{
   height: 100px; /*This height is the visible portion of the button only*/
   width: 200px; /*Put your image width here*/
   background: url('Put your image location here') no-repeat left top;
#exampleButtonIDHere a:hover{
   background-position: left -100px; /*This negative value should match the height above*/

So basically, a div, with a background image of both buttons, and a height and width restricted to the size of only one of the default button, shifts on :hover to pushing the hover portion of the image up into the viewable portion of the div, with the default portion of the image pushed out. Simple right? I know! If you are going to have a lot of these buttons, I’d suggest a whole separate CSS document for them. You can also combine the .rollover with the #exampleButtonIDHere. I keep them separate because it reduces the length of the CSS document with lots of buttons.

Don’t forget the a tag inside the div tag, and include the a as part of your CSS style declarations. Each portion of that CSS is very important! The “display: block;” allows for the image to not be pushed out of it’s own div. The “text-indent: -9999px;” pushes the alt text out of the way, the “margin: auto auto auto auto;” eliminates any cross-browser issues with default settings, the “cursor: pointer;” forces every browser to display it as a link with the mouse icon changing, and the “outline: transparent solid 0px;” forces browsers to not outline the link when being clicked. If you have any trouble implementing this, let me know, because I completely swear by this amazing CSS trick. I’d also love to hear if you’ve had successes implementing this on your own website.

*Be careful, if you use png images for your buttons (which I do because they are far superior to gifs with transparency) then IE6 won’t allow your rollover to work. Most png fixes that I have found so far disable background-position properties in CSS in IE6. Annoying, but really not the end of the world. Either live with it for whatever percentage of your users are IE6 users, or use jpgs and gifs instead. I say the pngs are worth it for the better transparency quality and lower file size.

HTML – Getting Started

So, just getting into the game huh? Well let me leave the scolding for later. Let’s pretend that your mother’s dog doesn’t have its own blog and personal myspace page. Let’s pretend that your grandpa didn’t make a facebook account last week. Let’s pretend that every small business out there hasn’t realized that having a website is always an improvement over the yellow pages… Oh wait, they haven’t gotten to that point yet…

At least you’ve caught on. Getting into web design is no easy task, but it isn’t all that difficult either. I am about 98% self taught in everything I know about web design and coding. So here are a few tricks you can use that will help you learn:

1. The best way to learn is by doing. Try making your own site. Open up a good old text file, and start writing. If you save the text file as .html instead of .txt, then any web browser will read it (assuming you wrote it correctly)!

2. Imitation is the sincerest form of flattery. If you see something you like on another website, then be inquisitive! See how they did it. If you go to your browser’s menu screen, click on View, and then View Source. This is the code that the browser reads to display the website.

3. Use the resources that have been provided to you. There are tons of great websites out there that can help you. What are you struggling with? Code? Try w3schools, the place that helped me learn most of what I know. They have a tutorial for every web language you could imagine. Start with HTML and CSS. Difficulty with design? Find other sites that you like the look of. Try the CSS Zen Garden which shows the power of CSS or CSS Beauty which shows… the beauty of CSS. There is a ton out there, just google it!

4. I guess you could take a class, but that didn’t do crap for me.

5. When in doubt, Google it! If there is ever anything I’m not sure how to do, or something that is broken that I can’t seem to fix, I Google it. Someone has written about it somewhere. You can always try asking someone that does it for a living… cough cough… and hopefully they might have the answer!

6. Get the greatest tool EVER! If you don’t have firefox as your default browser, fix that problem first. Then, download the add on entitled “Web Developer”. It has the best tools for web developers including tools to outline your divs and tables, resizing your window, viewing source, and even editing the CSS for other people’s websites! That’s right, you can edit the CSS for facebook or google or cnn. I know right?!

7. Still not sure how to get started? Well stay tuned, I’ll be writing more about HTML and CSS basics. I will interject with other topics like special CSS tricks as well, so you’ll have to bare with me…

Thanks for reading. Questions? Just ask!