overview of email development process

Overview of Email Development Process

Suresh Jonna

I. Creative Design Process

1. Content gathering(Images, Text)2. Layout design3. Standards to build an email template

II. Web Development Process

4. Analyzing the PSD5. Assuming a Layout to build the structure for coding6. Slicing7. PSD to HTML Conversion(Coding the creative)8. QA & Proofing

Agenda

Stages of the Email Development Process

Creative Design Web Development CMS

Pictorial representation

I. Creative Design Process

What is PSD (Photoshop Document)?

PSD is an image format of Photoshop. (Jpeg, PNG,GIF, RAW,BMP,PSP…)

A PSD file contains images and text (May contain videos)

A PSD file can be reused for editing unlike Jpeg file

A PSD file can be opened only on Photoshop tool.

Vast knowledge of Photoshop, and knowledge of Dreamweaver is not necessary.

A Creative Designer creates a PSD file of a creative.

If you have any questions or concerns about the survey, please call 1-888-687-2277 and ask for Al

Hollenbeck in Research and Strategic Analysis.

1. Content gathering ( Images, Text )

Layout Definition:

The way in which the parts of something are arranged.

2. Layout Design

Standard and widely used Layout Some of the different kinds of layouts

A preheader is the short summary text that follows the subject line when an email is viewed in the inbox.

Header: brand logo or banner

Navigation: Contains tabs that takes user to different web pages

Primary and secondary message: Contains purpose of the Email

Footer: Brand information, privacy policy, unsubscribe,Copyrights

What does each term mean?

Emails should be 550 - 600 pixels maximum width.

Use standard fonts - Arial, Verdana, Georgia, and Times New Roman.

Use less Images in the PSD.

3. Standards to build an email template

1. Analyzing the PSD

2. Assuming a Layout to build the structure for coding.

3. Slicing

4. PSD to HTML Conversion(Coding the Creative)

II. Web Development process

ImagesImages with Gradient

Images with Shadows

TextStandard fonts

Text with shadows

1. Analyzing the PSD

Assuming a Layout for coding

2. Assuming a Layout for coding

Definition:

Cut something with a sharp implement.

3. Slicing

Slicing out required images from the PSD

If you have any questions or concerns about the survey, please call 1-888-687-2277 and ask for Al

Hollenbeck in Research and Strategic Analysis.

Creating Tables, TDs, TRs according the layout

4. PSD to HTML Conversion

Coding the layout

Check if the code renders in all the browsers and email clients

5. QA & Proofing