Basic Layout Elements for E-Mail Marketing Messages
The layout of your marketing e-mail directs your audience’s eyes to specific content. Use visual anchors to draw readers’ attention to your content. The variety of visual anchors you can use is limited only by your creativity and the layout of your e-mail template. (Most EMPs allow you to create visual anchors from an e-mail template.)
![Visual anchors abound in this e-mail. [Credit: Used by permission from Under Armour]](http://media.wiley.com/Lux/82/268382.image0.jpg)
Credit: Used by permission from Under Armour
Visual anchors abound in this e-mail.
Basic visual anchors, with explanations of how they draw attention to your content, include:
A headline draws attention to itself first then to the content immediately below it. Differentiate headlines from surrounding text by using a different font, color, or style of text. Types of headline include
Block appears in front of a background color different from the main background color
Bold appears darker or heavier than the surrounding text
Border appears inside a boxed outline
Graphics are images of text with special design elements
Images and graphics draw attention to themselves then to adjacent text either to the left, right, or below the image. Image types include
Portrait: Taller than wide
Landscape: Wider than tall
Top-bar: At the top of an e-mail, spanning the entire width of the page
Background: Behind the text
Bordered: Surrounded by a border line
Text links, when embedded in a larger body of text, draw attention to themselves followed by surrounding text. Standalone links draw attention only to themselves. You can also group links in a list:

A horizontal list of links.
Horizontal lines and borders draw attention to the content above them; vertical lines and borders draw attention to content on the left or right depending on the strength of the visual anchors on either side.
Boxed borders draw attention to the content within the box beginning in the upper left of the box.

Web Design & Development Glossary
AJAX
asynchronous JavaScript and XML. A technique used in web page development.

Web Design & Development Glossary
API
application programming interface. A set of rules programs use to communicate with each other.

Web Design & Development Glossary
color stop
A special element that indicates a color to be added to a gradient.

Web Design & Development Glossary
FTP
File Transfer Protocol. A network protocol useful for transferring files in a client-server relationship.

Web Design & Development Glossary
HTML
HyperText Markup Language. The predominant language for building web pages.

Web Design & Development Glossary
HTTP
HyperText Transfer Protocol. The primary networking language for the Internet.

Web Design & Development Glossary
PHP
PHP Hypertext Processor. A scripting language that works well within HTML.

Web Design & Development Glossary
socket
A technology that allows remote computers to maintain a persistent connection in order to communicate with each other.

Web Design & Development Glossary
sprite
An graphic object on a web page that will be manipulated in real time.

Web Design & Development Glossary
SQL
Structured Query Language. A programming language useful in managing relational databases.

Web Design & Development Glossary
stateless protocol
An Internet procedure that completely breaks the connection between the client and the server after a transaction, meaning that the next transaction will require an entirely new connection.

Web Design & Development Glossary
Telnet
A network protocol useful in interactive, text-oriented communications.

Web Design & Development Glossary
W3C
World Wide Web Consortium. The organization that sets international standards for the World Wide Web.