Eloqua What is this and why should I read it?
|
|
|
- Job Dawson
- 8 years ago
- Views:
Transcription
1
2 DR Who? Definitive Results is a boutique marketing consulting firm based out of Leesburg, Virginia that specializes in helping Marketers accelerate their efforts using the technologies available to them and alleviate their Marketing Automation pains aka Eloquirks or Marketoerks as we call them. We specialize in Marketing Automation, Marketing Operations, Marketing Analytics, and IT Services. Our mission is simple: we help Marketers transform their operations through the power of Marketing Automation. We love working with the next generation of modern marketers those driving results based on data and analytic insights, not their guts or the wind. Our Experience: we ve been in similar shoes to you. All of our consultants were previously users of a Marketing Automation tool(s) prior to joining DR giving us 20+ years of hands-on experience. So we really get your pains and challenges. Our Commitment: we commit to always respond to you within 1 business day throughout our relationship. No waiting and wondering. Our Rates and Flexibility: we offer highly competitive rates which we are transparent about from day 1 as shown on our How We Help You pages. If you don t see what you need, we will create a custom plan and/or project for you. We can plug into your team and become a key team member for you to count on whether its for strategic marketing projects or a simple task to just get done quickly in your Marketing Automation tool. Contact us: 202 Church St SE, Suite #204, Leesburg, VA Phone: MKTGDOC ( ) info@definitive-results.com Web:
3 Eloqua 101 Definitive Results Purpose To identify common formatting issues when designing html s for Eloqua. Audience Eloqua Users Designers Marketers Sources on Acid C&A2011 Guide EE12 - Do It - McAfee - HTML Design What is this and why should I read it? This is a guide to provide information on the most common html formatting issues for Eloqua and html in general. This resource is a compilation of information from various sources with the intent of creating a go-to-guide for common issues experienced in most browsers while creating html for Eloqua. This guide will outline those issues and provide solutions to common problems to avoid frustration. As to not reinvent the wheel here, I have found several excellent resources, which I will be citing. Included in this guide will be quirks that we have experienced as well with designing, implementing, and modifying html s in Eloqua. Some of this information you may already know, but we present it with the intent of being a thorough go-to guide for our internal use and training as well as part of our clientside sanity retention initiative. Lets get started HTML s are generated utilizing the HTML programming mark up language. Different browsers and programs handle and display HTML differently, resulting in inconsistent deliveries. This guide outlines best practices to ensure the best results in terms of deliverability, content and design. Rule #1: Outlook is not your friend. Designing html for Outlook could lead to hours of staring at your screen, test after test, wondering Why Outlook, Why? Luckily there are some common fixes for Outlook to ease this suffering. We will share these with you as well. Just remember, Outlook is not your friend, it was apparently coded by Murphy s Law standards.
4 A great way to start your is with on Acids Boilerplate common fixes. Sure, we could just put a link here and a send you on your way. What kind of friend does that though? (That being said it s an awesome resource so you should check it out: - 1) <head> <style type="text/css"> /****** CLIENT BUG FIXES - BEST NOT TO CHANGE THESE ********/.ExternalClass {width:100%; /* Forces Outlook.com to display s at full width */.ExternalClass,.ExternalClass p,.externalclass span,.externalclass font,.externalclass td,.externalclass div { line-height: 100%; /* Forces Outlook.com to display normal line spacing, here is more on that: */ body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none; /* Prevents Webkit and Windows Mobile platforms from changing default font sizes. */ body {margin:0; padding:0; /* Resets all body margins and padding to 0 for good measure */ table td {border-collapse:collapse; /* This resolves the Outlook 07, 10, and Gmail td padding issue. Here's more info: */ /****** END BUG FIXES ********/ 2
5 Optimizing for mobile only screen and (max-device-width: 480px) { /* Here you can include rules for the Android and iphone native clients. Device viewport dimensions are as follows: iphone: 320px X 480px - portrait, 480px X 320px - landscape Android: 350px X 480px - portrait, 480 X landscape (These are average dimensions, the Android OS runs on several different devices) */ body[yahoo] #container1 {display:block!important /* example style */ body[yahoo] p {font-size: 10px /* example style */ /* You must use attribute selectors in your media queries to prevent Yahoo from rendering these styles. We added a yahoo attribute in the body tag to complete this fix. a_queries only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* Here you can include rules for the ipad native client. Device viewport dimensions in pixels: 703 x portrait 1024 x 703 landscape */ body[yahoo] #container1 {display:block!important 48% of s are being viewed on mobile devices - Litmus Optimizing for mobile should be standard. /*example style*/ body[yahoo] p {font-size: 12px /*example style*/ Notes on embedded CSS: 1.) Be aware that Gmail will not read any of your embedded CSS 2.) Although we have seen the!important priority used in other examples, it is not necessary. If you use "!important" you can no longer overwrite your styles inline which is required for Gmail. 3.) The Android does not support "class" declarations outside of the media query. Here is more info on that: 4.) You might want to consider duplicating your embedded CSS after the closing body tag for Yahoo! Mail in IE7 & 8. 3
![Android OS runs on several different devices) */ body[yahoo] #container1 {display:block!](/docs-images/41/5328024/images/page_5.jpg "important /* example style */ body[yahoo] p {font-size: 10px /* example style */ /* You must use attribute selectors in your media queries to prevent Yahoo from rendering these styles.")
6 Coding your The best philosophy to embrace when designing and developing html s for optimal deliverability is to use code simple enough that it will renders across all clients and platforms, including those without full browser functionality. Declare as many parameters and attributes as possible, leaving nothing left for interpretation by various browsers, clients, devices and platforms, which do not adhere to definitive standards. Anticipate all configurations. Avoid JavaScript as most software disables JavaScript by default. Document Type Declaration (DTD) Murphy s Law: Anything that can go wrong will go wrong So TEST, TEST, TEST! Make sure to declare your DOCTYPE. DOCTYPE Declaration is the abbreviation for Document Type Declaration (DTD). The DOCTYPE Declaration (DTD or Document Type Declaration) serves two functions: (1) When validation your HTML code, it tells the HTML validator which version of (X)HTML standard the coding is supposed to comply with, and to validate against, (2) It tells the browser which standards compliant mode to render the code against. Declare your html with the 4.01 Transitional doctype, as it allows elements and presentation attributes that should otherwise be included in the stylesheets to be included in line, which is crucial for HTML s. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Failure to establish a doctype can lead to inconsistencies in the amount of margin that's added beneath <p> tags. By default, <p> tags have {margin: 1.12em 0; applied according to the default HTML4 stylesheet, however browsers and clients are not required to adhere to this, most notably RoadRunner and Yahoo. Failure to establish a doctype can also produce unexpected results when the border-collapse property is utilized ( collapse.asp). Content Type and Character Set Declaration Declaring a character set, tells the browser or application how to interpret the text characters in the <body> of your , especially with respect to special characters in non Latin languages or when copying from a text editor like Microsoft Word. The most popular character sets are UTF-8 and ISO In website development, you can declare your character set employing a <meta> tag in the <head> of the document like this <meta httpequiv="content-type" content="text/html charset=utf-8" /> clients however ignore the Content Type defined within the <meta> tag. The Content-Type is automatically determined and set in the s header by the server sending your . This value can be changed but requires access to the server. Contact your service provider and ask them what Content-Type they set in the header when sending the s if you desire. Alternatively convert all of your special characters to HTML entities to ensure consistent results. There are numerous online conversion tools and charts available to assist with converting characters. View the W3C HTML symbol entities reference chart for more details. Laying-Out and Developing Your HTML layouts should always be developed using tables with inline styles as opposed to stylesheets (CSS). Avoid <div>s for layout work, tables will take more time and require more complexity, but ensure more consistent results and reduce the likelihood of the layout breaking. 4
7 Tables While using tables for layout may be a step back for those who like to code to the latest standards, sticking to tried and true techniques will ensure the most consistent rendering across the board. Using html tables also helps with problems caused by different clients, browsers and devices that can interpret the same code differently. Code like it s 1999! Forget <div> Tags! Forget <style> Tags! TABLES ROCK! Remember 640 x 480? Web safe colors? Parachute pants? These are the tools of the HTML s. Forget what you know about Javascript, Frames, Forms, CSS, FLASH, AJAX... every acronym you spout out at cocktail parties. When it comes to HTML s, "old school code" is the way to go. Keep it simple... use TABLES, FONT tags, inline CSS (but be very aware that some clients have limitations). By keeping the code simple and the design straight-forward, you'll make life easier on the people who are receiving your message and it ll display more consistently. -eroi Table-Based HTML Layout Tips Create one table each for the header, main column, and footer. Wrap these tables with another framing table. Ensure the width of the framing table does not exceed 98% to ensure proper rendering in clients such as Yahoo! Mail. Table Tips: Set all possible <table> <tr> and <td> attributes with the tags to ensure maximum compatibility with clients and applications. Example: <table border=0, valign=top, align=left, cellpadding=0, cellspacing=0>. Declare all possible attributes, including dimensions (in pixels), fontattributes, and alignment, inline to avoid leaving anything up to interpretation by different clients, browsers, and devices Set all possible attributes at the <td> element level as well. Background image support for <table> and <td> elements is inconsistent, even when it is supported images may not download for all recipients due to system and security settings for both known and unknown senders. If you decide to use background images, anticipate and develop a graceful contingency plan utilizing background colors and make sure to test the results to ensure the results are desirable. Avoid the use of <colspan> and <rowspan> tags, and try to minimize the number of nested tables (tables within tables) whenever possible. Older readers, including Lotus Notes have been known to have issues rendering these tags. Use the padding style to control margins within a <td> cell, margin style is inconsistency supported across reader. Cascading Styles Sheets (CSS) Cascading Style Sheets are an area of debate among HTML programmers. While it offers powerful formatting capabilities, support for internal and external CSS stylesheets varies across clients, browsers and devices. Avoiding CSS ensures the most consistent and predictable results. Pre knowledge of recipient rendering platforms can prove extremely valuable. As a rule, if CSS is utilized, include all styles specified in the stylesheet inline as a graceful fall back. Campaign Monitor offers a current, and highly detailed guide on CSS support among clients and devices: Campaign Monitor Guide to CSS Support in Clients. 5
8 Declaring a CSS Reset for Pixel Precise Work Experienced web designers utilize a CSS Reset to maximize control over layout and styling and ensure pixel precise work. Resting the CSS resets removes all standardized formatting of HTML elements resetting all attributes to 0. This allows for manual resetting of all HTML elements for maximum control of layout and prevents clients, browsers and devices from interpreting attributes both declared and undeclared according to their native settings. To ensure consistency, the CSS should be reset by including both the follow CSS declaration in the stylesheet as well all manually setting all possible attributes on all referenced HTML tags. Note: The following CSS Reset code includes numerous tags not supported by HTML clients which will be ignored. The code is also useful for resetting the CSS for website design. To ensure optimal control for platforms which do not recognise stylesheets, ensure all possible attributes are declared inline for each HTML element utilized in the HTML. CSS Reset Code (Include in the <body> not <head> tags for maximum compatibility) <style type= text/css > html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; /* remember to define focus styles! */ :focus { outline: 0; body { line-height: 1; color: black; background: white; ol, ul { list-style: none; /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; caption, th, td { text-align: left; font-weight: normal; blockquote:before, blockquote:after, q:before, q:after { content: ""; blockquote, q { quotes: "" ""; </style> 6
9 Cascading Stylesheet Tips: Do rely upon CSS. Anticipate and code for a graceful fail. If you include CSS stylesheets include them within the <body></body> tags, not the <head></head> tags to prevent browser based applications from removing them by default. Do not use CSS shorthand, only basic CSS style declarations: instead of font: 12px/16px Arial, Helvetica, specify each parameter separately: font family, font-size, and line-height. Avoid using CSS or inline styles to replace bullets with images in unordered lists Support is inconsistent. Some servers strip out CSS lines that begin with periods such as class declaration. To remedy this add a space in front of any CSS that begins with a dot. (See below for example) <style type= text/css >.title {font-size:22px;) </style> Ensure all styles declared at the <table> level are re declared in the each contained <td> element as well. This can mean repetitive style declarations in multiple <td> cells. Fonts Font attributes can be set inline (directly to the HTML code) as well as in the CSS. For HTML s it is recommended that font attributes are set inline, and as many attributes as possible are set to prevent different bowsers and clients from treating the non declared parameters differently. Some of the most common font attributes are: Font Families Utilize web safe fonts. In order for a font to display correctly it must be installed on the recipient s computer, or supported by their client or device, such as a blackberry. Web safe fonts are generally shared across all browsers, clients, platforms, and devices, and thus safe to use without compatibility concerns. When setting the font-family property, include several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. If the name of a font family is more than one word, it must be in quotation marks, like fontfamily: "Times New Roman". More than one font family is specified in a comma separated list. Typical web safe fonts include Arial, Arial Black, Comic San MS, Courier New, Georgia, Impact, Tahoma, Times New Roman, Trebuchet MS, Verdana, Wingdings. Font Size There is much controversy and debate over which specification to use when setting font-size: Ems, Pixels, Points, and Percent. The majority of long time designers agree upon specifying font size in pixels (px) not points (pt) or em (em). Different browsers, clients, devices and platforms interpret font sizes differently. A font may render and appear different when viewed on Internet Explorer on a PC, an iphone, or a Mac. Setting font-size according to pixels allows for most precise control over fontsize, as it relates to pixels. Points and Ems can be resizes according the viewer s system settings. Be careful not to set the font to small and making the text difficult to read. A commonly used font-size is 12px. iphone Tip: If you anticipate many iphone recipients, be aware that the iphone automatically sets a minimum fontsize of 13px, which can break your intended layout. This can be overridden by applying the CSS code below: <style type="text/css"> div, p, a, li, td { -webkittext-size-adjust:none; </style> 7
10 Other font attributes font-weight: Regular, Bold, Italic, Underline, etc. font-style: normal, italic text-decoration: underline, overline, subscript, superscript color: Black, # (use common color names or hexadecimal code when possible) line-height: Use pixels, not em or percentages letter-spacing: Use pixels, not em or percentages word-spacing: Use pixels, not em or percentages Font Tip Declare all possible font attributes, in all utilized and nested elements (<h1>, <h2>, etc., <table>, <span> and <p>) to ensure maximum control and consistency over rendering. Links Links are a vital element of HTML s. They direct your s recipients to the offers and additional information presented in the . Use the target="_blank" attribute to force links to open in a new browser and keep the original open. Link Tips Some clients overwrite your link colors with their defaults, and you can avoid this by taking two steps. First, set a default color for each link inline like so: <a href=" style="color:#ff00ff">this is a link</a> Next, add a redundant span inside the <a> tag <a href=" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a> To some this may be overkill, but if link color is important to your design then a superfluous span is the best way to achieve consistency. Use the target="_blank" attribute for the HTML A tags so that people reading with a webmail service don t have the requested page appear within their webmail interface. Images Images are an essential part of design. They are indispensible for conveying a message and creating visually effective and compelling s, however they can present obstacles in terms of deliverability. Not all clients download and display images by default, as a result of system and settings, as well as spam filters, resulting in delivery of an incomplete message. To maximize deliverability and ensure your message is effectively conveyed, avoid text based images, as any information conveyed through images will be lost when those image do not display or render as desired. To optimize your images for web delivery; use jpeg and.gif formats, avoid.png and.bmp images. Keep your image sizes to a minimum. Avoid using too many images to keep the overall size of the small (< 100KB). Include the image description and details in the <alt> tags to describe your images, and assign them hyperlinks. Use images of the desired size whenever possible, and set the height and width attributes for each image to prevent the layout from breaking when an image does not load and carries no size specifications. Make sure the images are consistent with your corporate image and the message you are trying to convey. 8
11 Image Tips Declare each image s dimensions, height and width, in pixels. Declaring alt parameters for all images. This helps convey the message of an image when fails to rendering and ensure the message is still conveyed. For layout considerations, avoid using large images above the fold in the . This is another classic spammer practice and can increase the likelihood an will be tagged as spam. Use only.gif or.jpg formats for all images, even if it means some additional file size. Avoid animated.gifs files. Support is inconsistent. Avoid.PNG images. Lotus Notes 6 and 7 does not support 8 bit or 24 bit PNG images and can result in rendering errors, most commonly red X s. Close a <td> on the same line as an image, do not insert a line break. Avoid using 1 1 pixel images to force precise spacing, this can trigger spam filters. Client Specific Image Tips Hotmail: Windows Live Hotmail adds additional pixels of padding below images. Apply the following style to images to prevent this occurring: Inline: <img src= x style= display:block > CSS: <style type= text/css > img {display:block </style> Outlook: Outlook 2007 does not recognize the <alt> parameter. Text The copy is generally the most important element of an . Reliable rendering and formatting of text is crucial for conveying a strong, professional message and presentation. Avoid copying or importing copy and content from applications, websites, or word processors (such as Microsoft Office) as they can generate superfluous code inconsistent with strict HTML standards. Experienced HTML coders work exclusively with HTML source code and are aware of these inclusions. When concerned, pasting and re copying your text for a simple text editor (such as Microsoft Notepad) will remove all text formatting. Text Tips Use carriage returns (Shift Enter) instead of line breaks (Enter) to ensure consistent line spacing and rendering. In HTML source code: <BR><BR> instead of <p> Avoid inputting symbols directly, use html character codes. See Character Set Declarations above Coding Conclusion and Best Practices Whenever possible, use the simplest solution possible, it will ensure the greatest consistency in rendering. Declare all possible attributes. It is better to be thorough and ensure everything is declared than leaving attributes up to interpretation by the recipients applicant or device. Avoid CSS, if you use it, anticipate a graceful fall back for when it fails to load. Avoid JavaScript. Most software disables JavaScript. 9
12 Avoiding the Spam Filter Use Spam Friendly Subject Lines Subject lines are particularly scrutinized by spam filters. Avoid the following scenarios in your subject lines: Too many capital letters compared to lowercase letters. Repeating Capital Letters in a row. Gaps In Between Letters. (ex. s*p*a*m) Repeting letters and/or symbols. Special Characters. Overusing special characters like $, #, %, etc. Punctuation. Overusing punctuation marks. Word/Space Ratio. Using too many blank spaces. First Character Is Special. Starting your subject line with a special character. SPAM filter triggering words. (see below). Avoid spam words and phrases Some words and phrases hold more significance for spam filter triggers than others. While it s sometimes necessary to use these, refrain from using them whenever possible. Here is a list of words and phrases that can trigger spam filters. Image Related Spam Filter Triggers Image to Text Ratio. s that are image heavy, or have large images, especially above the fold, can get flagged as SPAM. Image to text ratio should be 1 image per 1 paragraph of text. Spacer images. Avoid using 1x1 pixel images for precision spacing and layout, they can trigger SPAM filters. CAN-SPAM Act: 10 Point Checklist Thank you to the cited sources! This document was created/compiled with respect to the original sources and all of the sources have been noted. The purpose of this document is to act as an educational resource/learning aid. It is not intended for sale or resale. All cited portions remain the intellectual property of the respected authors. Please view the original documents: on Acid (boilerplate ology) C&A2011 Guide (majority of body text full guide) EE12 - Do It - McAfee - HTML Design (1999 header - full guide) eroi Design and Style Guide (1999 Column full guide) Definitive Results Definitive Results is dedicated to driving your company's marketing success.
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016
Email Campaign Guidelines and Best Practices
epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
GUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
How to Properly Compose E-Mail HTML Code : 1
How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail
Coding HTML Email: Tips, Tricks and Best Practices
Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.
Creative Guidelines for Emails
Version 2.1 Contents 1 Introduction... 3 1.1 Document Aim and Target Audience... 3 1.2 WYSIWYG editors... 3 1.3 Outlook Overview... 3 2 Quick Reference... 4 3 CSS and Styling... 5 3.1 Positioning... 5
Web Authoring CSS. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
Designing HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
How To Design An Email In Html (Html) And Html (Mailbox) Safely
24 WAYS to impress your friends At some stage in your career, it s likely you ll be asked by a client to design a HTML email. Before you rush to explain that all the cool kids are using social media, keep
Table of Contents Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Desktop PC and Apple Mac email applications... 4 Web and mobile device email readers... 5 Creating your
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
Fast track to HTML & CSS 101 (Web Design)
Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of
HTML Fails: What No One Tells You About Email HTML
HTML Fails: What No One Tells You About Email HTML 2 Today s Webinar Presenter Kate McDonough Campaign Manager at PostUp Worked with various ESPs: Constant Contact, Campaign Monitor, ExactTarget, Distribion
customer community Getting started Visual Editor Guide! www.pure360community.co.uk
Getting started! 1 Contents Introduction... 3 Visual Editor Options... 3-5 Advanced Tips... 6-7 Do s and Don ts... 7-9 Testing Messages... 10 2 Welcome The Visual Editor tool is the ideal resource for
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Emailmovers Limited, Pindar House, Thornburgh Road Scarborough, North Yorkshire, YO11 3UY Tel: 0845 226 7181 Fax: 0845 226 7183 Email: enquiries@emailmovers.com
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
MCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Guide to B2B email marketing. Part Three: Building great emails
Guide to B2B email marketing Part Three: Building great emails Executive Summary of Recommendations Take a look at our guidelines for building great emails in this quick, at-a-glance format Technical Email
8 STEPS TO CODE KILLER RESPONSIVE EMAILS
8 STEPS TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 BUILD RESPONSIVE EMAIL STEP BY STEP Steps to create a simple responsive email template. (fluid image, main content, two
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.
Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,
This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
Looking Good! Troubleshooting Email Display Problems
E-mail Direct Mail Digital Marketing Sales Tools Funding Data Creative Services Looking Good! Troubleshooting Email Display Problems November 19, 2014 Today s Speaker Geoff Phillips Senior Editor & Email
Email Creator Coding Guidelines Toolbox
Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
HTML Creative Design Guidelines
HTML Creative Design Guidelines An effective design should do more than look nice. It should support the message and render correctly. When a design is properly executed, it really is worth a thousand
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
Mobile Portal Optimization
IBM Mobile Portal Accelerator Mobile Portal Optimization Approach & Techniques Version 0.3 KRISHNA C KUMAR, PRINCIPAL SOFTWARE ENGINEER, IBM MPA DEVELOPMENT/L3 SUPPORT, INDIA SOFTWARE LABS, BANGALORE HIGH
CHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
Creating Effective HTML Email Campaigns
Creating Effective HTML Email Campaigns This event is being recorded. You will receive a copy of the audio/video at the end of the presentation. 701 South Broad Street, Lititz, PA 17543 www.listrak.com
Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
EMAIL MARKETING BEST PRACTICES GUIDE
EMAIL MARKETING BEST PRACTICES GUIDE V12 Group s Best Practices Guidelines and recommendations were implemented to help clients create clean looking emails that improve delivery and overall performance
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define:
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: body, div, p, h1 - h6, hr, table, thead, tr, th, td, blockquote, address, ol, ul, dl, dt, dd span, a, font class e.g..stylename
Chapter 1: Outlook Isn t Going Anywhere... 2. Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3
Table of Contents Chapter 1: Outlook Isn t Going Anywhere... 2 Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3 Chapter 3: 3 Way to Remove Unwanted Gaps Between Tables... 12 Chapter 4:
Table of Contents Desktop PC and Apple Mac email applications Web and mobile device email readers Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Quick look-up overview... 4 Desktop PC and Apple Mac email applications... 5 Outlook 2007-2016... 6 Content
HTML EMAIL MARKETING GUIDE
@ HTML EMAIL MARKETING GUIDE LET S GET STARTED! Many email marketing products like Pinpointe include a WYSIWYG + HTML editor and templates so you can easily design cool-looking HTML Emails. Before getting
A GUIDE TO MOBILE EMAIL
A GUIDE TO MOBILE EMAIL UNDERSTANDING THE WHAT, HOW & WHY TABLE OF CONTENTS EMAILS OPENED ON MOBILE? 1 Email open market share 2011-2013 WHAT DOES THIS MEAN? 2 FIRST THINGS FIRST 2 From and Subject Lines
Rocketseed Signature Guide
Rocketseed Signature Guide We have created this signature guide to ensure that your signature displays correctly across various mail clients. The points discussed below will help you make the right design
JJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
TEMPLATE GUIDELINES OCTOBER 2013
TEMPLATE GUIDELINES OCTOBER 2013 CONTENTS Introduction... 4 Creative... 5 Template Dimensions & Image Headers... 5 Preview Pane & Positioning... 5 Graphics... 6 Optimization and File Size... 6 Background
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
Converting Prospects to Purchasers.
Email Template Guide LASSO EMAIL TEMPLATE EDITOR... 2 ABOUT LASSO EMAIL TEMPLATE EDITOR... 2 CREATING AN EMAIL TEMPLATE... 2 ACCESSING EMAIL TEMPLATES... 2 ADDING AN EMAIL TEMPLATE FOLDER... 3 BASIC PRINCIPLES
Best Practices in Email Marketing 33 Tips to Improve Your HTML Email Design
Best Practices in Email Marketing 33 Tips to Improve Your HTML Email Design Page 0 of 12 Introduction Many email marketing products like Pinpointe include a WYSIWYG + HTML editor and templates so you can
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
Level 1 - Clients and Markup
Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML
RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR
RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR RESPONSIVE EMAIL DESIGN According to stats from Litmus, in 2014 at least 53% of emails were opened on a mobile device. That is a huge increase from 2011 when the
Email Guidelines. The following guidelines are for companies who develop email HTML design/creative and copy.
The following guidelines are for companies who develop email HTML design/creative and copy. In today s email environment it is imperative that mailers consider the limitations presented by email readers
BlueHornet Whitepaper
BlueHornet Whitepaper Best Practices for HTML Email Rendering BlueHornet.com Page Page 1 1 2007 Inc. A wholly owned subsidiary of Digital River, Inc. (619) 295-1856 2150 W. Washington Street #110 San Diego,
Making Textual Webpage Content Responsive
Making Textual Webpage Content Responsive Web page content can be quickly broken down into the following categories: 1) Textual Information 2) Image based information 3) Video information i.e. videocasts
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
Table of Contents Recommendation Summary... 3 Introduction... 4 Formatting Recommendations... 5 Creative:... 7 Deliverability & Infrastructure:...
Table of Contents Recommendation Summary... 3 Technical:... 3 Creative:... 3 Introduction... 4 Formatting Recommendations... 5 JavaScript:... 5 Forms:... 5 Background Tags and Colors:... 5 Html Text:...
Responsive Email Design
Responsive Email Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013 Responsive Email Design There has been a lot of chatter in recent months in regards to Responsive
RESPONSIVE DESIGN FOR MOBILE RENDERING
WHITEPAPER RESPONSIVE DESIGN FOR MOBILE RENDERING DELIVER MOBILE-SPECIFIC CONTENT USING MEDIA QUERIES EXECUTIVE SUMMARY With the widespread adoption of smartphones and tablets, proper email rendering in
Style & Layout in the web: CSS and Bootstrap
Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts
DESIGNING MOBILE FRIENDLY EMAILS
DESIGNING MOBILE FRIENDLY EMAILS MAKING MOBILE EMAILERS SELECT PLAN CONTEXT CONTENT DESIGN DELIVERY Before you go mobile For optimal usage PICTURES OF DESKTOP VS MOBILE SAME SAME BUT DIFFERENT EMAIL CLIENTS
Bullseye Interactive Group / Mobile Sports Group
RESOURCE EMAIL MARKETING BEST PRACTICES GUIDELINES Bullseye Interactive Group/Mobile Sports Group (BIG-MSG) & its Data Partners Best Practices, Guidelines, and Recommendations were implemented to help
In this chapter, you will learn how to...
LEARNING OUTCOMES In this chapter, you will learn how to... Create a table on a web page Apply attributes to format tables, table rows, and table cells Increase the accessibility of a table Style an HTML
NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK
Nursing 3225 Web Dev Manual Page 1 NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK Nursing 3225 Web Dev Manual Page 2 N3225: Nursing Inquiry Student Created Group Website Addresses (1 of 2)
HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk
HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
Email Design Specifications & Guidelines
Email Design Specifications & Guidelines Updated January 2010 Contents 1 Introduction Introduction A Note on Email Design 2 Standard HTML Emails Tables Are Your Best Friend Handle Your Images Gently CSS
CLEAN CODE FOR COMPLEX EMAILS
CLEAN CODE FOR COMPLEX EMAILS With the increased popularity of mobile devices, good email development has become more important than ever. Design studios are working hard to keep up with trends and deliver
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
The Da Vinci Coding: The Art of HTML
The Da Vinci Coding: The Art of HTML The Da Vinci Coding: The Art of HTML Design Author Graham Gnall LiveIntent Senior Platform Solutions Manager Contributing Editor Nick Dujnic Editors Julia Rieger Dave
Intro to Web Design. ACM Webmonkeys @ UIUC
Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML
Making Responsive Emails
Making Responsive Emails Who Am I? Justine Jordan Wearer of Many Hats, Litmus @meladorri @litmusapp #CSSsummit litmus.com/lp/csssummit Sample HTML, slides, templates, frameworks, and other goodies. Disclaimer:
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
WEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7
Version 4.0.1 Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7 HOW THE SYSTEM WORKS... 7 THE TWO MAIN HTML EMAIL DESIGN OPTIONS FOR NEWZAPP...
Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6
Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration
Your Success Is MTD s Success!
Your Success Is MTD s Success! These guides and requirements have been created by MTD to help ensure greater success in your email campaigns. Please have all team members read their relevant section below:
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
![HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL](/thumbs/40/20611446.jpg "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL")
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL
An Emailcenter briefing: Can your customers read your email newsletters? An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL November, 2004 Emailcenter research has shown
University of Colorado Boulder Colorado Springs Denver Anschutz Medical Campus. CU ecomm Program Email Marketing Best Practices
University of Colorado Boulder Colorado Springs Denver Anschutz Medical Campus CU ecomm Program Email Marketing Best Practices What is ecomm?... 2 Why use ecomm?... 3 Legal Considerations... 4 Email Marketing
Introduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
A Rough Guide to E-newsletter Marketing
A Rough Guide to E-newsletter Marketing Content 1 2 3 4 5 6 7 8 Why use email marketing What email marketing can deliver It all starts with data How to design effective email Writing great email Wait!
Full report on all 24 clients
1 of 6 3/15/2011 11:05 AM Campaign Monitor - Home Features Pricing Customers Resources Support Our Story Blog Sign Up Login Create an Account Tips & Resources Designing and building emails Designing an
Advanced Editor User s Guide
Advanced Editor User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication
Introduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
Web Authoring. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
A quick guide to... Effective HTML Messages
A quick guide to... Effective HTML Messages In this guide... Learn easy and effective ways to engage your subscribers, increase your click-through ratio (CTR), and get better results from your email marketing.
White Paper Using PHP Site Assistant to create sites for mobile devices
White Paper Using PHP Site Assistant to create sites for mobile devices Overview In the last few years, a major shift has occurred in the number and capabilities of mobile devices. Improvements in processor
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
Web Development I & II*
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE
SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE COURSE TITLE: Introduction to Web Development CODE NO. : SEMESTER: 1 PROGRAM: AUTHOR: IT Studies Dennis Ochoski DATE:
Responsive Web Design Creative License
Responsive Web Design Creative License Level: Introduction - Advanced Duration: 16 Days Time: 9:30 AM - 4:30 PM Cost: 2197 Overview Web design today is no longer just about cross-browser compatibility.
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure
CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?
CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types
CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining
Creating Web Pages with HTML Simplified. 3rd Edition
Brochure More information from http://www.researchandmarkets.com/reports/2248215/ Creating Web Pages with HTML Simplified. 3rd Edition Description: Are you new to computers? Does new technology make you
Responsive Design for Email
Good to Know Guide: Responsive Design for Email INSIDE YOU LL FIND... Responsive Design Overview Media Queries Explained Best Practices How It Works Samples of Design Approach Responsive vs. Predictive
CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28
CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline