Coding a single column HTML email
When you consider coding your emails, you should go for a single-column email design given that is the most simple option. Typically, this email design is used to send out an announcement or to advertise a single product. However, the easiest way to understand it is by converting this design into a grid and analyze all the design elements: the logo, header, content area and footer. The first step is to focus and begin to see the design as a set of blocks. If you put a grid around the most common elements, you will get a set of boxes and this will help you imagine the way the the content will be displayed. If you use Notepad ++ when coding your emails and you look to each of these boxes, you can learn how to keep things simple and create an email that looks well in different email clients and web-based email services.
Despite all its advances, coding HTML emails can be a headache for programmers, especially since they have to ensure the cross-browser compatibility. However, tables represent a major asset that can streamline the entire work of a programmer. A single column email works great for newsletters because it enables you to control significant amount of content into such as small space as an email. Virtually there are several types of tables: the pseudo-body table, which represents the color area that is around the email box, the wrapper table for email, which contains the email itself and is the box that goes around the footer and the news area. You also deal with a table that represents the actual start of the email and above it you must have generic information and a brief note about how people become readers of you email and how they can unsubscribe. At the start of the email, you usually have HTML table and table data cells which contain a background image. The news box relies on a news table which is nestled within a larger HTML email and it is very straightforward with a small width. Regarding this aspect, a good coding practice is to start HTML tags with a <p> tag on the first line, put the content on the second line and end it with a </p> tag on the third line, for this allows non-technical people to update code in you email without any hassle.
The last element of the design is the footer. In order to cater your requirements, it could encompass several boxes. For the footer, you mainly need three tables: one area for the links, a middle table to give your some space over the background image and a third area with the links on the right which are wider. The point is that you don't really need strong HTML knowledge in order to understand all these elements. Basic HTML knowledge should be enough when you decide to create simple emails that reinforce the branding and create familiarity to website visitors.