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!

How to quickly cache images for css using jQuery

Please note, there are other ways of doing this, but this is a quick method for caching images for your page, using a very simple piece of jQuery.

If you use CSS to change the backgrounds on an element when a user moves their mouse over it you will the new image to display as soon as it happens. If the browser has no record of the image then it has to has immediately send a request to the server for the image. This can take precious seconds and in some cases, could spoil the whole look of your well designed element.

There are a number of fancy jQuery functions that may allow you to do this in a more compliant standard, but I can't see any harm doing it this way:

1. Create an empty element within your webpage (I put it just before </body>), for the case of the example, our element is a div element named 'imageCache':

<div id="imageCache"></div>

2. Set its display attribute to none, like so:

#imageCache{display:none;}

This stops the element from showing when the browser displays the page.

3. In your jQuery code, set the HTML of the element to use the images, in your document.ready function like so:

$(document).ready(function() {
$('#imageCache').html('<img src="image1" /> <img src="image2" />');
})

4. The Images will not appear as they are inside an element which has no visibility thanks to the CSS.

Hey Presto, your images are now ready to be used.

Some people may say that the element should not be added to the web-page unless it is to be used to display something. They may have a point, but if you want a quick solution and you are a jQuery newbie, this will do you just fine and will still pass W3C validation. If that is the case and you do not want an empty tag floating around your HTML source code then use jQuery's 'append' function and add the element in to the DOM and add the images using that method, like so:

$('body').append('<div id="imageCache"><img src="image1" /> <img src="image2" /></div>');

Please also note that this could be done entirely using CSS whereby you load in the images directly in to the HTML within your element, they would still be hidden because of the CSS, the above method is the alternative using jQuery.

How long does it take to become a web developer

This is almost like the question 'how long is a piece of string', because in my experience you can never stop learning.

The real question is how long does it take to become proficient as a web developer and my answer, in my opinion is about 2 years. This is obviously not a definitive answer and is subject to change, especially if you know a programming language for another discipline. The 2 year time frame should not put you off, but it will take you this amount of time to really truly understand all the ins and outs of web programming.

First let's take a look at what you technologies have to learn to become a web developer. When you start down this road, you need to understand how the web works and why it does what it does. What happens when a request is made by the user, how a server responds and how the output is generated by the browser.

The basic model for this piece of user interaction is like so:

The User Requests data via their browser -> The web server responds and sends HTML (Hypertext Markup Language - the language your browser understands) to your computer/device which then in turns displays it to you. That is it, the basic web request. A few other bits and pieces are sent but we'll look at those a little later.

So let's look at the above and break it down. The HTML this is the basic building block of the web and you cannot create a web page without knowing how write HTML. So this is obvious place to start, learning HTML is not that hard and you should be able to start knocking pages together within a week or so. The other part of learning how to write HTML is the ability to learn something called Cascading Style Sheets (CSS). CSS is a technology that allows a page's content (the HTML) and the page's design to be separated in to different elements. This allows for a more structured site, easier design updates and less cluttered mark up. Learning CSS can take a little longer to learn HTML as it has many different aspects to it. There are great many tutorials and books out there and any decent book that teaches you HTML should teach you CSS, if it doesn't, pick a different book. I have already written different post regarding books for beginners, so please take a look there for my recommendations. You should be able to grasp a good amount of CSS in a few weeks/months for you to be able to start knocking web pages together, it can take a couple of years to master CSS as there are so many ways of doing things. i.e. using different methods to solve different issues, different properties for different elements and coupled with the fact that it is constantly being updated by the W3c, it gives CSS and long a drawn out learning curve.

The previous paragraphs, really dealt with the browser/client side of what websites and how they work. The next sections really deal with how a server sends a page to the user. At a basic level a server responds with HTML based on a request from the user. These pages can be static - where a page's content is hard coded in to the request page or dynamic - where a page is constructed and delivered according to a set of parameters. Dynamic pages are still served in HTML, this is the only language a browser can intepret, the difference with a dynamic page is that the page's content can be manipulated by the server when it sends the information.

This is where you really start to become a 'web developer', when you start to learn a language that runs on a web server and is executed at run time. There are a great many choices when it comes to choosing the language, my personal preference is PHP, many others like ASP.net or Java - all work in a similar way and all perform similar tasks though PHP allows you to code using both procedural and object oriented approaches (see other posts of mine regarding this). This part of the learning curve is going to be the longest. You should be able, once you have grabbed the principles of programming, to start programming in PHP and even start creating some dynamic pages within a couple of months, even less if you are doing it full time. Believe me, if you stick with it and you like coding, when you start creating programs, see people using them, then you really feel an excellent sense of worth. However to truly understand the language of PHP is going to take a while, you may be able to create some decent scripts quickly, but like I said before it will probably take you a couple of years, before you get to the point where you are truly comfortable with language. An example of this is where you get to the point that you know that no matter what a customer/colleague asks you to do, you know that you will be deliver what ever they need.

Once last thing, before I sign off. People often ask 'Am I am scripter or a programmer ?' This is a large can of worms and I do not wish to reopen it as it has been argued to and fro by many people. In my opinion, a script is something that runs on a single page, an application is something that runs across many pages and does multiple tasks geared towards a set of goals or objectives.

Essential tools for PHP web developers

Essential tools for PHP web developers

I hope you enjoyed the book list, here are some of my recommendations for software to use when you develop your applications.

Editing Software
I use an excellent named PHPED IDE from NuSphere. It is very well priced and it has some brilliant features including intellisense and will pick up all classes, objects, methods, properties, variables and functions that are available to the page you work on. It also has support for CSS, Javascript, Perl and Smarty Templates. The installation also comes with a debug software and a few other tricks and whistles. I see it as an essential tool for anyone coding PHP on a PC. Find out more at nusphere.com

Primarlily I am a PC user, whether it be Linux or Windows, I like using PCs and my reasons go beyond this article. However I am not averse to new ideas or opinions and I have heard from many people that there is an editor called BBEdit by barebones sofware for OSX, unfortunately I have never tried it and cannot comment, but if you have the means, then please do so.

Browsers

I have chosen Firefox as an essential tool for a number of reasons. It has great support for CSS, is secure and is updated on a very regular basis. However, these are not the only reasons for me choosing this program. The other reason is that is has support for add-ons (little additions written by 3rd part developers) which I now consider to be essential.

Here are my list Firefox add-ons that I use:

• Firebug - great for looking at problems and properties of the DOM or Javascript. Has an excellent JavaScript console which is brilliant for debugging scripts. Has so many different options that it would be pointless to go through them here. Find out more here
• Web Developer - Adds new menus so that you can view CSS properties, JavaScript, Image Info... Again too much to list, so please go here for more info.
• Live HTTP headers - Allows you to view header information as it happens. Great tool for looking at information sent by the server. Find out more here
  

Internet Explorer - The other browser I must add here is IE. It is not the best browser in the world, but the market place deems it to be essential as it is still the dominant browser on the market. Your client based scripts, HTML and apps could many great things but if they do not work in IE then they are not going to gain popularity. In fairness to Microsoft they have done their best to iron out many of the CSS problems that has caused issues in the past. I tend to develop my apps using FF as the main browser. Once I'm happy with a page or the area I have been working, I always give it a test in IE to make sure it all renders properly.

• If you really do not want to use Internet Explorer, then there is an option for those with a love of Firefox. You can actually download an addon that will simulate IE within FF. To find out more, please go here.

The obvious choices:

You of course must have an installed PHP installed on your system. With most Linux distributions, the packages can be added at installation or later. You will also need MySQL installed as well, again if you do know how to do this or do not feel comfortable adding to a Linux system it can be tricky. In terms of the Operating System, PHP is a very versatile piece of software and can be installed to be used with either Apache in Linux or on Windows or it can be even installed on IIS in Windows. It is your choice to make and should be made according to your ability at using these Operating Systems.

Unfortunately for people who want to use PHP or MySQL in a Linux installation is beyond the scope of this article. However for those who want to use Windows, there is a simple alternative called WAMP and that can be downloaded here. It installs and configures all the things you need and can get you up and running very quickly. The components that can be installed on Windows include Apache Web Server, MySQL and PHP (WAMP) and once added, you do have a fully working web server.

Reference Manuals/Books

• PHP.net - the PHP Manual - complete reference to everything in the PHP Language
• W3 schools - Excellent reference for HTML and JavaScript properties/methods
• JavaScript Bible - great JavaScript reference book
  
• PHP OOP solutions - still a great book (chapter 2 especially) to refer to

Hope these recommendations help and happy coding...

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.

Dreamweaver - an excellent way to start your web development career

My love/hate relationship with Macromedia/Adobe Dreamweaver

I have since moved on from Dreamweaver but for some jobs it is still a very useful tool. A lot of pro developers hate Dreamweaver and in many cases they have a point. However like many things in life, when people get an idea or an opinion it can be very hard to change. I feel like I am an open minded person that believes in using the right tool for the right job.

Dreamweaver is an excellent program created by a great time of programmers and designers. It has a fantastic interface and it makes site creation available to the masses. When I first started using DW I thought the program was amazing and I was very impressed with how well it created dynamic pages with such a minimum of effort. Also it gives a person a very good look at how server pages work along with some basic interaction with databases and really does ease them in to the whole server side world of the web. It has been created to use many different models including ASP[.net] with MS SQL Server or Access; PHP with MySQL on different servers including IIS and Apache and is therefore a very adaptable piece of software.

Dreamweaver also allowed you to use the WYSIWYG side that allowed you to combine the design and the server side parts all on one page. This was indispensible for a person who had some HTML experience but hardly any server coding experience.

OK, on to the bad points. For people who can code their own apps in a server side language this piece of software will no doubt infuriate them. It writes a lot of code (sometimes needlessley) and creates huge amounts of script to do some very simple operations. This is Dreamweaver's main issue for seasoned developers and like I said it is understandable, but if used sensibly Dreamweaver can still have its place in a developers arsenal.

It is also is quite inflexible with the way creates files in to its structure that it uses for database connections - but this is only a minor issue.

I mentioned on the blog front page that I hope to use this blog to help a business be more profitable. Dreamweaver fits in to this idea perfectly. As a developer, a significant amount of time can be used on the inital stages when design meets the site structure. You can create classes, functions and all manner of time saving techniques to try and make site development more streamlined but if you want to speed up this stage I still stick by Dreamweaver. One of Dreamweaver's finest tools is its ability to help you create CSS and how it can fit in to your site development. CSS in Dreamweaver will allow you to (when your elements are in place) to add an atribute and it will allow you to see immediately how it affects the site's layout rather than loading and refreshing in a browser. If you are creating a site that uses a non-standard layout, this is a fantastic way to do things and will no doubt help you at many stages in the design/structure. Of course you need a fairly good understanding of CSS, but once you have that - page layout becomes a whole lot easier.