Tips for Creating HTML Emails

As the webmaster for your Region, there is a likelihood that you’ll be asked to create HTML emails to be sent to the parents. HTML emails can be tricky because they don’t always display the same in every email client (similar to how an HTML page can display differently in different browers).

Here are some things to keep in mind when creating an HTML email:

Layout with Tables
Your email should be programmed in a table layout to make sure that everything displays the way it should. DIVs are not recommended because of the limits that certain email clients put on the use of style sheets.

Use Inline Styles Style sheets placed in the headers of an HTML email don’t always work, since some email clients (mainly Gmail) limit the types of style sheets accepted. DO NOT use an external style sheet. It won’t work. The best way to use styles is inline in the HTML. Stick with simpler styles, as some email clients are very restrictive. CSS Support: The Ultimate Guide is a good reference of which CSS styles will work with various email clients.

The Importance of Good Website Navigation

Website users, especially busy soccer parents, don’t usually have the time to sit and search all over a website to find what they are looking for. You can help keep your visitors on your website with clean, concise and organized site navigation.

There are two common spots for website navigation: the top of the website (horizontally across) or the left side (in a vertical list). These are the two places that most people will look for a list of links to navigate your website. Some websites will also offer a complete list of links at the bottom of each page. People are trained to go there for links as well (but usually as a last resort).

When designing navigation for your website, keep in mind the “Three Click Rule.” A user will click on an average of three links before they leave the website. Try not to bury your links so deep that you have to click more than three times to get to them. You want to get your user to the content they desire as quickly as possible. Note that long lists of links are just as cumbersome as hiding them ten layers deep. Organization is key when creating site navigation.

Basic HTML

As the Manager of Digital Media for AYSO, I work with HTML on a daily basis, so it comes very second nature to me. I know this is not the case with the majority of the world, which I often realize by the strange looks people give me when I start talking “code.” Therefore, I thought it would be beneficial to a lot of you if I did an entry on basic HTML.

Whether you know it or not, you probably come into contact with it at some point while editing/updating your Region’s website. It can sometimes look like a foreign language, so it’s important to know what’s what. Here are some common tags you might come across while editing your website.

A quick note before we start: Most tags have two parts: the opening part and the closing part. The opening part starts a certain element style. Everything that comes after the opening tag will contain that style. The closing part comes at the end of the element and stops that particular style from appearing. Note the paragraph example below and how the <p> opens the style and the </p> closes the style. A slash before the letter indicates a closing tag.