The use of typography is central to print design and has always been a contentious issue on the web, due to the various limitations of both web browsers and the operating systems which run them.

Early HTML

When the early HTML specifications were considered, it was recognised that being able to change fonts in web content was a requirement and hence the html <font> tag was added which allowed the color, font type and size of the font to be modified.

Color – This attribute allows for the selection of any colour via the standard RGB or hex values used on the web

Font – This allows for a specific font to be selected for example Arial, Verdana etc However it must be mentioned that the font selected here needs to be present on each computer which will be viewing the web page. Hence it was standard practice to select one of the main core fonts which is very limited, especially if you are selecting a common font across multiple operating systems.

These are a list of the common fonts to both Mac OS X and Windows

Arial
comic sans
Georgia
Impact
Lucida Console
Palatino Linotype
Tahoma
Times New Roman
Trebuchet MS
Verdana
Symbol
Webdings
MS Sans Serif

As you can see above the choice is extremely limited and commonly Verdana or Arial are selected with Trebuchet MS commonly used for headings.

Web Standards

With the introduction of web standards which separate out the web pages content from its styling came an improved interface to handle website text. Cascading Style Sheets (CSS) were introduced which give an opportunity to style the content using various parameters such as

Color
Alignment
Decoration (underline, blink, strike through etc)
Transformation (caps, lowercase etc)
Indent
Font Family – exactly the same as the font attribute above.
Size – can be in Pixels (px), Point (pt) and em’s (em).

Using CSS the style of the text on the entire website can be controlled in one place and eliminates the requirement to edit multiple pages to edit common styles.

While CSS is a massive improvement over the deprecated font tag of html, it still has the same problems which is the distinct lack of supported fonts. This initially was a big barrier which forced designers to be conservative with their font choice.

A compromise which is favoured is to use font stacks. A font stack is a comma separated list of fonts which are added to the font-family CSS property. An example font stack is shown below

font-family: helvetica, arial, verdana, times new roman;

The font stack works in a priority order from left to right, if the user has the first font on their system then this is used, if not then the second font is used etc. This allows the designer to add their ideal choice of font first in the list followed by more common fonts. This is an excellent compromise and is known as gradual degradation.

Some designers however cant accept that they cannot guarantee how a web page will look and require a fixed font which will look identical regardless of the machine used.

The following techniques force the use of a set font

Image replacement – This technique involves creating an image of the text styled with the exact font and replacing the html text with the image thus guaranteeing (assuming images are switched on) the use of the correct font. This technique is commonly used for the replacement of headings on a page. These headings are a vital part of search engine optimisation and using an image means that the search engine is not able to read the heading text and hence index it. To combat this, the title is entered as normal text and shifted off the screen using a negative indent and is replaced with the image. On the surface this is the ideal solution – however there are a few problems

If images are switched off then the user will not see any text at all as the image cant be shown and the other text has been shifted off the page.
Many sites now use a content management system to allow the frequent updates to the website. However using the image replacement technique means that the graphical headings have to be changed as well as the text and hence it can make a quick update very time consuming.

SIFR

This method uses the advantages of flash to provide font styling. In a flash movie the fonts used to style the text are embedded into the movie which means that regardless of whether the user has the font on their machine, the text will still be shown how the designer intended it to look. SIFR has used this to create a simple way to style text in a web page, they created a small flash file which has a text container. The file is edited in the flash editor, the font required is added and the flash file created. A javascript file then uses this flash file to replace all elements selected with flash versions, styled with the correct font.

SIFR does work well but does have many disadvantages

It requires that flash and javascript be available on the viewers machine. While both of these are commonplace, some people will still not see the font as you originally intended.
The designer requires flash editor to create the files
It is very slow to load due to having to load flash, css and javascript
Many mobile phones cannot view flash.

Cufon

Cufon performs a similar role to SIFR but doesnt use flash which is its major advantage. The first stage in a Cufon implementation is to select a font – TTF,otf etc and Cufon then converts this into a propriety font in SVG. VML is then used to convert the text concerned into the font chosen. The disadvantages with this method are as follows

The text is not selectable, which means that cutting an pasting text from the web page can be a problem
Most font founderies will not allow you to embed a font into javascript and hence your choice of fonts are limited.
The fonts are replaced at the last moment when I page loads and hence commonly there is a small flicker where the standard font is viewed before its converted.

Typekit

I believe this is the future of fonts and typography on the web. Typekit have formed links with a lot of the major font foundries around the world who have signed agreements to allow their fonts to be used by the Typekit system. To use a font – you simply pay a set fee for the year and you are given a javascript file to insert into your website. Once this is complete you can use the font name in your CSS file in a similar way to the CSS font stacks mentioned earlier. This does have the same disadvantage as the other font replacement methods listed above which is the requirement for javascript but it does degrade gracefully. The main disadvantage is that you can only use fonts from the foundries which have signed an agreement with Typekit. This can be a problem – for example common fonts we use here at Ozones humanist, Din and Swiss are not present on the Typekit site. Hence alternatives need to be selected but then this can lead to branding issues with is a whole different discussion.

To summarise there is no one font replacement technique which is perfect, however I feel that Typekit linked with CSS font stacks form the most favoured technique.

Nick Thorley Web Design

For a while now google has analysed your website and modified its search results based on the content and structure of your website. For example if you have clearly defined sections to your website then you will find that google will display quick links to the sections below the main website link – this can be shown below following a search for RedHat

Google has now improved this service to include live events. Each website is scanned and if live events are detected they will be displayed in a summary below the link to the main website. An example of this is shown below

This is an excellent feature and provides people with quick access to information allowing them to find and book tickets without browsing each website.

Nick Thorley SEO

Traditionally when displaying search results google displays a small paragraph of text which is either read from the web page itself or the descriptions tag which is added by the page creator and does not tend to change dependent on the search term. However google has now decided to implement something called Answer Highlighting where it will modify the description shown if it believes the new text will answer your question. For example to find the height of the empire state building we may search for [empire state height] which will normally display the following output.

As you will see the description is generic and does not answer the question even though the resulting web page probably would reveal the answer. To enhance the user experience google has decided to modify the description of the page to include the result if it believes it is present in the resulting web page an hence will now display the following result

This time google has presented a result which clearly gives you the answer without having to click the link to view the wikipedia page. This is an excellent improvement for user experience and will enable its customers to get quicker answers to their questions. For content providers however this is disastrous as they rely on traffic to their website for advertising revenue and surely these “improvements” will lower the number of websites visited and hence lower revenues for the site owners.

Nick Thorley SEO

The database is ready, the email marketing software installed, ready and now the email has to be designed and built. Websites are normally built to fill the average screen which is commonly 1024 * 768 pixels or larger.  However email clients display html emails differently to a web browser.  Email clients feature a preview panel which is commonly much smaller than a web browser and only occupies part of the screen.  To make matters worse the preview panel is configurable by the user and hence can have different sizes and orientations.  An average width for a preview panel is between 440 – 700 pixels and hence this is the width to which you should design your emails.

Creating the html email

Modern websites are built using html for the content and css for the styling of the pages including layout, colour and fonts. Ideally this method should be chosen to create your html emails, however unfortunately different email clients have different support for css with some supporting it totally and others having limited or no support.  A useful document to illustrate the various email clients and their levels of css support has been produced by Campaign Monitor.

Until email clients improve the best way to create html emails is to revert back to the old method of using tables for layout.  The number of nested tables should be kept to a minimum as once more than two or three tables are nested, unpredictable results can occur. The key is to keep your layout plain and simple.

Create an email with movement and graphics?

Firstly it is important to consider that most email clients do not immediately show graphics on opening an email. Instead they will show a message informing the user that the email contains graphics and asks their permission to load the graphics.  Hence if the user doesnt see this message or chooses not to download the graphics your email will look completely different to how you planned.  If you choose to create your html email as one large graphic or alternatively have no text at all then the user will initially see a blank message.  You should always have a combination of text and images in every mail you create.  The text will give the recipient something to read if images are switched off and will also act as initial marketing thus encouraging the reader to click the download images button to view more. You will also need to create a text based version of the email and hence you should make sure that the text alone gives the message you want to portray and doesn’t rely solely on graphics.

Unless the email client uses a web browser to render its emails (microsoft outlook version 7 doesnt use a web browser), things like flash, animated gifs and javascript may not be processed and hence are best avoided in html emails.  The best solution is to have an email which introduces the user to the subject matter before asking them to click a link to go to the website where the full detail can be shown.

Nick Thorley Email Marketing

Emails can be sent in various formats, each with their own features.

1.Text only emails – This is the most basic form of email and is purely the transfer of basic text with no formatting, colours or images.

2.Rich text / HTML emails – These emails give the user the opportunity to change fonts along with embedding images. These are presented to the reader in an email which resembles a web page.

3.Multipart / Alternative mime format. This is the best method of sending an email and is the combination of the two methods. The email is split into two distinct sections allowing the same message to be opened by clients using a text based email client and also clients capable of viewing html based emails.

When doing a marketing campaign you should always try to ensure that your emails are sent using option 3.

How are html marketing emails sent?

Its important to understand how the html files are sent to the members of your database. It is possible to create an email attaching a html file and send this out to your database using your email client such as outlook. However this method has various problems -

• The html attachment will be purely that – an attachment which wont be displayed in the body of the email as it is opened and may be blocked by spam filters.

• Manually sending an email to hundreds of people is often not possible in your email client as it will have a limit on the number of addresses you can enter and also the bcc field must be used so that the recipients cant see each others email addresses.

• Using this method its difficult and inefficient to gather and process unsubscribe requests which need to be offered by law.

• You are unable to gain any statistics on how successful your email has been.

A better solution is to use an email marketing program which will send emails using the multipart format mentioned above. This will ensure that the recipients who are able to see html, see a nicely formatted email and others who are not will still be able to read the key messages via text. The software also has automatic unsubscribe handling, thus preventing you from accidentally emailing someone who has requested to be taken off the list.

Nick Thorley Email Marketing

Email marketing if done correctly can be an excellent way of promoting your business to current and prospective customers.  However as you will see there are many issues which must be carefully considered to make your campaign a success.

Direct mail

The main alternative to email marketing is Direct Mail (DM) where a letter, brochure or even small package is sent directly to the recipients postal address.  This method of marketing does have its advantages – the reader gets something tangible to touch, you can guarantee they see the mail as you intended and more importantly if budgets allow you can display quality through the materials you use.  However with increases in the cost of fuel, postal services, printing and raw materials it has quickly become prohibitive except in small quantities.  The other key disadvantage is that you have no way of recording stats on the success your direct mail promotion except via monitoring sales.

The more modern and cost effective method of direct mail is email marketing.  In this series of blog posts we discuss the process right from the data collection right through to analysing your statistics.

Why carry out email marketing at all?

Every business who sell products and services has prospects and customers. For prospects, email marketing is by far the cheapest and quickest way to promote your business.  Once you have successfully gained a customer then you need to do everything you can to keep them.  A recent survey by Harvard Business showed that it is 6 – 7 times more expensive to gain a customer than retain one and repeat customers spend on average 67% more than first time buyers.  Email marketing can be a useful tool to help you market your company and to keep your customer retention high.

How do I gain the contacts to build the mailing database?

Every email marketing campaign has to have a database at its input supplying the core details required such as the recipients name and their email address.

This information can be gained from a number of sources -

Purchased Database – If your company has just been created then you are unlikely to have any data which you can use in marketing.  The quickest approach to finding prospective customers is to purchase a database from one of many data supply companies.  Most of these companies allow you to select a demographic and the number of contacts you would like and will in return supply you with a database of contacts.

Website Subscriptions – On your website you could have a signup form which allow your visitors to enter their details in return for a service which could be to contact them, receive newsletters etc.  This data can with the visitors permission be stored in your database and used in future mailings.  This method is considered much better in terms of quality than the above approach as these people have visited your website and are genuinely interested in your product or service.

Business forums – Many business directors take part in local business forums to discuss local trade.  These forums commonly distribute a list of its members which can then be used in email marketing.

Competitions – A common way of growing a data list quickly is to hold an online competition where an entrants details are stored (with their permission) in exchange for the chance of winning a prize. While this is a quick way to grow a database, it can also lead to low quality data as the recipients commonly just want to enter the competition and dont consider their answers seriously.

I have held a database for years – I can still use that cant I?

A database can only be efficient successful if the data contained within it is correct and upto date.  Over time this data will become out of date due to people moving house, changing their email address etc.  This is data degradation is called the churn rate and is estimated to be approx 20 % to 30%.  It is important that you constantly refresh your database to keep it current and accurate.  If you are purchasing your database it is important to ask when the supplier last updated its databases or else you may be paying for incorrect data.  If your database is old then you should consider sending out an email outlining your plans for your email marketing campaign and ask the contacts to opt in.

Is it legal to send marketing to the database I have?

So you have a large database with thousands of contacts and you want to contact them all  – are you right to do so and is it against the law?

The current UK law says the following:

Get the subscribers permission by taking a positive action, which is fully informed and freely given before sending any unsolicited commercial email.

There are two exceptions to this rule

1.    Unsolicited business to business emails with content that relates to business products and services are permitted but a clear unsubscribe option should always be visible.

2.    Unsolicited business to consumer emails can be sent providing that the individual’s contact details were collected through the sale of a product or service or that the customer has opted in to receive emails.

Its important to understand the difference between implied consent and expressed consent.  Expressed consent is where the user has specifically ticked a box which requests that they wish to be kept updated on your products and services via email.  Please note the customer must make it clear they wish to receive the mails (using details from a competition you held isnt sufficient). Implied consent is where a company assumes because a customer has purchased one of their products and that they have supplied their contact details that they can freely market to them.  Both are legal but the success rates vary.  For emails sent to customers which expressed consent the success rate is 10 – 20 %.  For emails sent to customers for which they have implied consent, the results are 1 – 5 %.

Double opt in’s

The most successful method of requesting your clients opt in to receive marketing emails (based on results) is the double opt in system.  This system is where the user opts in to receive emails and is instantly sent a confirmation email.  This email asks them to click a link to confirm that they wish to receive the emails.  It is only on clicking this link will they receive any marketing information. This method ensures that people understand what they have signed up to and also prevents fraudulent subscriptions.

Nick Thorley Email Marketing