overview of email development process
DESCRIPTION
TRANSCRIPT
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