Essential Techniques For E-shot creation for designers and developers

For all you web developers out there, E-shot design may seem like a little bit of a hindrance. It's not what you describe as a fundamental skill to master, but it's something that many of us have to do time and again when you work with, or for a design agency. This is primarily down to you having to turn back time when it comes to your web design skills.

I drew up this set of guidelines as I was commissioned to draw up a fully functional e-shot for a company that specialises in website design Bury called Fluid Digital before they took on their own professional developers. Fluid Digital provide some great e-shot services including design, production and delivery, so be sure to look them up.

Modern positioning and styling techniques center around the following structure:

element/CSS reference model which keeps content and layout separate, for example:

<div id="myElement">My Content</div>

With an accompanying reference in your CSS stylesheet:

#myElement {
display: block;
float: left;
}

That is fine for modern browsers, but when you start creating E-shots, you cannot use this method. No, you have to go 'old-school' and I do mean old school- no element backgrounds, minimal style sheet settings (when you can use them, they have to appear inline with the element). The main reason for going 'old-skool' is because you have to accommodate a number of email clients that all have their own way of doing things. Unfortunately the two most dominant email clients - Microsoft Outlook 2007 and Microsoft Outlook 2010, also have the most restrictions. Microsoft Outlook 2003 is a little more leniant as it used the IE engine to render HTML rather than Microsoft Word.

Designing your eshots can be tricky and I hope to take you through the majority of sticky points in the points below:

Section Layout

Like I mentioned above, you cannot use element/CSS to design your pages. In the case of e-shots, you need to go back to the ways of old and use tables to design your layout. In modern web design, when you go to lay out an element like a <div> you would simple add a background, define the width and how the element is positioned in using CSS. Let's compare the two methods.

The HTML/CSS way

#wrapper {
width:655px;
margin: 0 auto;
}

#column1 {
background-image: url('url/reference');
width: 459px;
float: left;
}

#column2 {
background-image: url('url/reference');
width: 196px;
float: left;
}

#footer {
clear:both;
}

Used in a page, they would look like this:

<div id="wrapper">
<div id="column1">Left Hand Side</div>
<div id="column2">Right Hand Side</div>
<div id="footer"></div>
</div>

With an e-shot, you do not have these CSS luxuries as the elements (usually div elements) do not display well in email clients. The background would not show as background-urls are forbidden, the float would not even work properly in a number of clients, though the width probably would.

Positioning

We use a basic table structure:

<table width="655" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="459">Left Hand Side</td>
<td valign="top" width="196">Right Hand Side</td>
</tr>
</table>



With this you get the two column layout, each cell side by side. Notice the width is contained as an attribute of the table, as is the alignment. There is no need for a clearing div as table cells in the same row inherit the height from their tallest sibling. I have also added the valign="top" attribute as content in cells can be a little bit erratic, this just makes sure that all content positions itself in a uniform manner. This is the basic idea behind positioning elements and content in your eshot. You can use all the normal table goodies of colspan as well as using nested tables to create subsections.

Using Background Images

You can't use them if you want your e-shot to pass muster with all email clients, as background-urls are forbidden. But you do have a couple of options. You can either use an image to encompass all your information, but you then run the risk of your emails being spammed out due to an adverse ratio of text:images or you can use the method I have laid out below which allows you to put image into a table that will encompass your text. As you know the amount of content that will be going in your cell this method would work:



Things you can and can't do:

• font-styling(CSS) is fairly safe and you can perform add most attributes like margin and padding, font-weight etc.
• Ideally, you want your container element to be no larger than 655px wide
• Keep the number of links contained in the email to a reasonable amount to avoid Spamming Issues
• CSS styles can be kept in the head, but may cause some problems, it is preferable to keep all CSS inline. One option is to design the Eshot with the styles in your <head> section and then use something like this to convert them to inline styles
• <td>table cells - use valign="top" applied as an attribute to the cell instead of using vertical-align in your CSS.

Here are some tips which could help:

• Basically, when you're building an eshot you are not building a modern web page, you're building a web page like you would have done in 1996!
• If you feel like you certain clients are not important when your perform your validation then you can always choose to ignore them. I always validate against all versions of Outlook - But like I mentioned above, you allow it to pass the Outlook test then it should be fine in all other clients.
• Always include a link to a web page that has the e-shot saved
• Always include an un-subscribe link
• If you can, include a link back to your website, as you never who is looking at the eshot
• Remember to keep your overall width to 655px as this width is the most compatible size with the most amount of clients.

My top CSS tips

In CSS there is usually more than way to skin a cat. Some people use certain methods, some use others. If you a way of styling that works, whose to say it is wrong. Do not let people tell you are doing it wrong.

I originally created this page as my top 10 tips but still continues top grow on a weekly basis. This post is not a tutorial page, more of a reference for those CSS coders who may be between the beginner and intermediate stage.

Add some consistency

Reset all your core elements to use the same set of basic rules, as some elements show different amounts of padding/margin by default in different browsers, i.e.

div, p, ul, li {margin: 0, padding: 0;}

Types of element

The main two types of styling elements are block level elements and inline elements. The main difference between a block element and inline elements are that block level elements will take up all the space within their parent element until instructed otherwise through CSS. And remember you can change the display type using your CSS.

The big difference between padding and margin

Remember that when dealing with elements. Margin is outside the element and padding is inside the element.

Use single Lines in your style sheet

Write your CSS in single lines, it may look prettier when you write your code, but when you have 300 hundred defintions, it can be extremely infuriating to scroll through your page with all those code blocks.

Browser specific CSS

You can override styles for different browsers by browser and version, check here for a really good list that gives you code examples for numerous

Overriding styles

Make use of !important when you are struggling with you need to override a style, here is an example:

color: #FF0000 !important;

Important Shorthand techniques

Use shorthand techniques when you can. For example, let's take a look at margin (you can substitute padding here if you want to):

Margin-top: 10px;
Margin-right: 5px;
Margin-bottom: 15px
Margin-left: 4px;

Can be written like this:

Margin: 10px 5px 15px 4px;
Top, right, bottom, left

You may also use another shorthand technique for margin/padding when the top/bottom and left/right use the same values:

Margin: 10px 5px;

Or if you want to apply the same value to each side you can use:

Margin: 10px;

The need for negativity

Using negative margins can in some cases be beneficial when you want to position an element just once when you don't want to change the larger majority of elements.

Generic classes

If you think that you will be adding similar styles to a number of different spans, like color. Create a generic class that adds those colours, i.e. if you know that you will be using multiple validation areas then this may be beneficial

Using multiple classes

You can only assign one ID per element however you can apply multiple classes to an element and is suprisingly easy to do, you just separate the class names using a space. Combining classes can save you repeating definitions and save you time in the long run, for example:

<div id="elementID" class="class1 class 2 class3 class4">My Element</div>

Bullet Points Images

If you want to use an image on a bullet point, you have more control over the image if you do the following. Set the list-style-type to none an add a background-image attribute. The main reason being that you have more control over the background than the normal bullet image as you can use background-position to make sure it looks perfect.

Install the Firebug Add-on for Firefox

This will save you a tonne of time as you can (amongst other things) edit your CSS/HTML on the fly which you allows you to test and try your changes before applying them to your style sheet. There are developer tools for Chrome and IE, but in my opinion neither of them come anywhere near as close to Firebug!

My PHP development Book List (Beginners)

Learning PHP and web development from scratch...

Learning a new language can be difficult, especially when you haven't got someone looking over your shoulder trying to help you. That is why we have text books and believe me, some are definitely better than others. This is not just a statement based on 1 example, there were numerous times throughout my time at university that we were given a recommended reading list and the books that were supposed to help, were in fact just being endorsed by some unscrupulous lecturer who wanted to line their pockets - though this could never be proven. If you are reading this as a student, then please before you buy a book that has been 'recommended' take a look at some reviews on web sites that are freely available, after all £30 of your loan cheque is quite sizeable. I have numerous books that were truly awful and have never seen the light of day since the 13 times I attempted to read them.

Anyway, back to the subject at hand:

Here are a list of books I would use to start learning PHP and web development from scratch. You may disagree with me and that's fine, I may open comments on this post, so please do leave me your choices. You may find that I recommend the same published on numerous occasions, I am endorsing any published over another and all recommendations are purely my opinion based on my own experiences.

1. Start at the beginning - Learn (X)HTML - I was a fresh faced first year when I started learning HTML and loved it almost immediately. I had never done any real programming at this point and found it awe inspiring that you could write something in Notepad, refresh it in a browser and there you go, rendered immediately and outputting your thoughts to the world. The book I used for this was by a lady named Elizabeth Castro called 'HTML 4 for the World Wide Web' which was published in 1999 by Peachpit Press. It has of course been updated for the modern age of W3C standards and is now called HTML, XHTML, and CSS by the same author. This is a fantastic book, moves a manageable pace and unlike then will help you learn HTML and CSS all in one go, rather than how I learnt the two technologies years ago when CSS was just a bit of an extra to be used in your HTML. Technically HTML isn't programming, you are writing Markup but it will get used to many things that as a programmer will be using later on in your career i.e. attributes, properties (in CSS) and referencing different parts of your code.

2. It's another Peachpit publication, this time from Larry Ullmang. PHP and MySQL is now in its third editon and is still going strong. I have had to buy this a couple of times (different editions) as I still use for it a little bit of reference. My first edition was worn out very quickly, constant flicking through the pages and index to find what I need took its toll and as a result my first copy is in numerous parts.

Larry is a great programmer and teacher (as I have mentioned in other posts) as he can teach without laying too much on the student. He also has another more advanced PHP book which will advance your knowledge over a number of key subjects, i.e. OOP in PHP and Ajax with PHP. I would recommend that you build a number of sites first before you tackle that book as it can be heavy going in places. The advanced book is definitely more of reference manual and can be dipped in and out of, rather than the PHP MySQL which I would recommend reading in its natural order.

3. Now that you have hopefully sites coming together. I would recommend taking a look at JavaScript. Javascript has had its ups and downs (mainly due to unscrupulous coders and hackers) but has since had a well deserved revival. I like Javascript, it adds an extra dimension to a web site and makes a site feel more like a desktop application than a website (even more so when Ajax is used). However it can be a quirky language, some of the naming and referencing conventions can be tricky, but once you get the hang of it, you will love it.

JavaScript as well as being a programming language for your browser, it also gives you access to the DOM (Document Object Model) and when you learn to manipulate it, can give you some really impressive looking results.

The reason I have added Javascript after PHP is that it looks rather similar to PHP in terms of the code and that with PHP you only have to worry about 2 or 3 real events. Page Load and then GET and POST. JavaScript has many more events and uses objects (HTML elements etc) to add to its functionality.

So the book I recommend for learning JavaScript is the JavaScript Bible (now in its 6th edition) by Danny Goodman et al. A brilliant book, set a good pace and has a massive reference section for you to look almost every property, method and attrbute in the language. It also teaches you about the DOM and how to create scripts that affect it, so is a very good all round.

There are more books that I have used but I will talk about them in my next post. These books will move in to more advanced areas including Object Oriented Programming, Ajax and a few other areas.