BlueHornet Whitepaper
|
|
|
- Kristian Kelly
- 9 years ago
- Views:
Transcription
1 BlueHornet Whitepaper Best Practices for HTML Rendering BlueHornet.com Page Page Inc. A wholly owned subsidiary of Digital River, Inc. (619) W. Washington Street #110 San Diego, CA BlueHornet Networks, Inc. A wholly owned subsidiary of Digital River, Inc. (619)
2 Table of Contents Coding Your HTML for Defining Your CSS Styles <link> & <style> tags Shorthand or longhand CSS styles? Tags Outside of the Body <html>, <meta>, <doctype> & <head> tags Establishing Your Layout Limited <div> tag support Colspan & rowspan attributes CSS Attributes for Layouts Float, clear, position, display, overflow & visible Defining Background Colors Background color on <body> tags Background color on <div>tags Defining Background Images Background image on <body> tags CSS attribute background-image Most clients will block images by default Defining Padding & Margins <table> cellpading attribute Padding applied to <div> <td> padding in Outlook Defining Borders HTML border attribute Styling Text & Fonts Recommended text formatting client s CSS styling your content! Yahoo Classic <p> tag bug Hotmail in Firefox line-height bug Styling Links Links assuming styles defined in CSS of client Styling Bullet Lists Bullet lists in Outlook Images as bullets Images Image blocking Image compression Image sizes and slices Image maps Margins on images Animated GIFs Design Don ts Code to Avoid Test Your Message Desktop Clients Hosted Clients Conclusion Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 1
3 BlueHornet Best Practices for Rendering Purpose Every popular client (for example: Windows Live Hotmail, Yahoo! Mail, AOL mail, Google Gmail, Microsoft Outlook, etc ) will display HTML content sent in . The problem arises for designers, tasked with delivering consistently branded HTML designs, in that not every client has a Web Standards compliant HTML rendering engine. There are still many discrepancies between clients when it comes to support for various CSS selectors, style attributes, HTML attributes, JavaScript, Flash, forms and various HTML tags. Due to these discrepancies, developing an HTML that renders consistently across all (or at least most) major clients can be a challenging task, but is achievable. The purpose of this document it to provide relevant information for designers, coders, and non-designers alike on how to build a successful that will render well in all clients. Who Is This For? For those of you who aren t familiar with HTML, we hope this document will help you communicate with designers when attempting to identify problems with rendering and layout. If you outsource your creative design, we hope you can use this document as a way of transferring information about the idiosyncratic rendering issues specific to HTML to your design agency in order to maximize your design investment. For designers and HTML coders the document will be a deep dive into best practices for structuring HTML and CSS code for maximized consistency in design rendering. How Did We Arrive at Our Conclusions? Our best practices are derived from years of experience designing and coding marketing messages. The everchanging landscape of support offered by clients as they go through updates and revisions creates a very moving target for designers. In order to keep track of the various degrees of support for HTML, we created a series of test templates, which contain over 75 rendering tests. On a recurring basis, we run these through the BlueHornet rendering tool. Our best practices for coding HTML s are based on these results. 2
4 Coding Your HTML for After you have made all the considerations regarding your in the design phase, then begins the task of coding the design in HTML. Because there are many ways to achieve the same results when working with HTML and CSS, it is necessary to choose a method that will be supported by the greatest number of clients. As you will see in each of the test-result tables below, not every client offers the full breadth of compliance with HTML and CSS standards that we have become accustomed to with modern browsers. However, by applying a careful combination of supported HTML attributes with inline CSS attributes, successful rendering is achievable. Legend Fully Supported Not Supported Partially Supported Defining Your CSS Styles Issue: <link> & <style> tags Support for <link> and <style> is varied across most major clients (see matrix above). Define all styles inline using the style attribute in combination with standard HTML attributes. The style attribute allows you to place CSS attributes inline in any HTML element. Example: <td style= font-size:12px; color:# > or <table bgcolor= #CCCCCC style= font-size:12px; color:# > Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 3
5 Defining Your CSS Styles (continued) Issue: Shorthand or longhand CSS styles? There are scattered cases where the shorthand method of defining your inline style attributes is unsupported. Use the longhand method of defining your inline style attributes Example: Longhand Style Writing <td style= font-family:verdana; font-size:12px; font-weight:bold; > vs. shorthand (Not Recommended): <td style= font:bold 12px verdana; > Tags Outside of the Body Issue: <html>, <meta>, <doctype> & <head> tags The <html>, <meta>, <doctype> and <head> are all valid tags for publishing W3C standards compliant HTML. These tags live outside of the <body> tag and are designed to deliver information about your document to the browser. Since a web-based client is a web page itself, these tags are already defined, which means your HTML content cannot redundantly define this information. The result is that these tags are usually stripped out or rewritten with proprietary tags by the ISP. Don t rely on <html>, <meta>, <doctype> and <head> tags for rendering elements of your design and leave them out of the markup that you deliver. 4
6 Establishing Your Layout Due to the lack of HTML and CSS standards compliance in major client software, it is recommended that you achieve your design layouts using <table> tags and not with <div> tags. Most modern web designers would argue that the use of tables should be reserved for the purpose of displaying tabular data as opposed to building multicolumn layouts. But with the varied support for the <div> element and CSS floats and positioning, using <table> tags with a combination of CSS padding, or explicit widths and alignment, is the safest way to ensure your design will render as desired across all clients. Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 5
7 Establishing Your Layout (continued) Issue: Limited <div> tag support There are some cases of limited support for the <div> tag style attributes width and height. Without the ability to define a width, the <div> element becomes less useful as a box or container for creating a layout. Use tables with nested <table> in order to create complex layouts, and avoid using <div> tags that require width definitions for your design to render correctly. With Outlook 2007, the <div> tag has been relegated to the status of a <p> or <span> tag. Example of Nesting Tables for Complex Layout: <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td>content</td> </tr> <tr> <td><table border="0" cellspacing="0" cellpadding="0"> <tr> <td>content</td> <td>content</td> </tr> </table></td> </tr> <tr> <td><table border="0" cellspacing="0" cellpadding="0"> <tr> <td>content</td> <td>content</td> </tr> </table></td> </tr> </table> Parent table contains 3 rows. Nested tables (black) contain 2 columns. No need for floating <div> elements with explicit widths. 6
8 Establishing Your Layout (Continued) Issue: Colspan & rowspan attributes In Lotus Notes, there is limited support for the <td> tag attributes colspan and rowspan. Use <table> tags to layout your content, and nest <table> tags to avoid using colspan and rowspan. Example of Nesting Tables to Avoid Colspan and Rowspan: <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td>content</td> </tr> <tr> <td><table border="0" cellspacing="0" cellpadding="0"> <tr> <td>content</td> <td>content</td> </tr> </table></td> </tr> </table> Single table contains 2 rows. The top row defined as colspan= 2 Parent table contains 2 rows. Nested table contains 2 columns. No need for rowspan or colspan attributes with this approach. Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 7
9 CSS Attributes for Layouts Issues: Float, clear, position, display, overflow & visible Some clients offer limited support of the style attributes float, clear, position, display, overflow and visible. Do not rely on the above CSS attributes for layout purposes. If you need multiple box elements to line up vertically or horizontally in a specific pattern, it is best to use a combination of tables and/or nested tables. Example of Nesting Tables for Complex Layout: Parent table contains 3 rows. Nested tables (black) contain 2 columns. No need for floating <div> elements with explicit widths. 8
10 Defining Background Colors Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 9
11 Defining Background Colors (continued) Issues: Background color on <body> tags 1. Using the <body> tag to create a background color for an entire is not reliable as different clients will break, strip, or rewrite the <body> tag. 2. If the background color defined in a <body> tag works correctly (in Outlook for example), there is often the unfriendly side effect of trying to forward an (perhaps with a note to a colleague) with the background color rendering in the forwarded message. This is especially annoying when the background color is dark or has limited contrast with the color of the text. Affected clients: Gmail, Hotmail, Mac Mail, Yahoo Classic, Yahoo Mail Simulate a body background by creating a 100% wide table with a background color defined using either HTML or CSS attributes. Then nest the content table inside. Example of Nesting Tables for Simulated Body Background: <table width= 100% > <tr> <td style= background:# > <table width= 600 > <tr> <td style= background:# >Content</td> </tr> </table> </td> </tr> </table> 10
12 Defining Background Colors (continued) Issue: Background color on <div> tags Lotus Notes will not display background colors in <div> tags. Set background colors within <td> or <table> elements using either HTML or CSS attributes rather than <div>s. Example: <td bgcolor="#999999"> or <td style="background-color:#999999"> Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 11
13 Defining Background Images * Background image displays Yahoo Mail when using Internet Explorer, but not in Firefox. 12
14 Defining Background Images (continued) Issue: Background image on <body>tags Using the <body> tag to create a background image for an entire is not reliable as different clients will break, strip, or rewrite the <body> tag. Affected Clients: Gmail, Hotmail, Mac Mail, Yahoo Classic, Yahoo Mail We recommend not using the CSS attribute background-image, as many clients will not render properly. Instead, simulate a body background image by creating a 100% wide table with a background image defined with the HTML attribute background. Then nest the content table inside. Example of Nesting Tables for Simulated Body Background: <table background= width= 100% > <tr> <td> <table width= 600 ><tr><td> Content Here</td></tr></table> </td> </tr> </table> Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 13
15 Defining Background Images (continued) Issue: CSS attribute background-image Background images do not render when using the CSS attribute background-image. Affected Clients: Gmail, Hotmail, Lotus Notes, NetZero, Outlook 2007 Define the background image with the HTML attribute background on either a <table> or <td> element. Example: <td background=" bgcolor="#999999"> Note: Unfortunately by relying on the HTML background attribute, you will not be able to take advantage of the background-repeat or background-position properties that the CSS style method allows. If the CSS properties are required for your design, you may still use them and simply allow your design to degrade gracefully in the affected mail clients mentioned above. Issue: Most clients will block images by default Most hosted mail clients block images by default and both Outlook 2007 and Lotus Notes have limited background images support. If you are placing text over a background image, there is a chance your text will get lost if that image doesn t render. (For example: White text that was supposed to display over a dark image could end up printing over a white background color if the image failed to render.) Be sure to add the HTML attribute bgcolor similar to the color of the background image applied to the element. That way, if the client either blocks or fails to render the image, any contrasting text or links will still be visible. Example: <td background=" bgcolor="#999999"> 14
16 Defining Padding & Margins Issue: <table> cellpading attribute There is no support for the <table> tag attribute cellpadding in Gmail. Set padding by using CSS attributes on desired <TD> tags, rather than relying on cellpadding applied to the table. Example: <td style="padding:25px"> Issue: Padding applied to <div> There is limited support for the style attribute padding for <div> tags. Avoid using <div> tags to set padding. Instead, use <td> CSS padding attributes for desired result. Example: <td style="padding:25px"> Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 15
17 Defining Padding & Margins (continued) Issue: <td>padding in Outlook 2007 We have found that <td> cells will inherit the padding values of adjacent (sibling) <td> cells in Outlook The easiest fix here is to simply make sure adjacent cells have the same padding values applied. If, for some design reason, they need unique padding, you will need to nest a <table> in the adjacent cells and apply unique padding to each of the nested table cells. Example of Nesting Tables With Different Padding in Adjacent Cells: <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><table border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding:5px">content</td> </tr> </table></td> <td><table border="0" cellspacing="0" cellpadding="0"> <tr> <td style="padding:10px">content</td> </tr> </table></td> </tr> </table> Note: 2 separate tables (black & blue) nested inside each of the grey parent table s cells. Each nested table has unique padding (shaded area) applied to its cell. 16
18 Defining Borders Issue: HTML border attribute Border colors do not render when written with HTML attributes. Affected Clients: AOL.com, Gmail, Lotus Notes, NetZero, Yahoo Classic, Yahoo Mail Designate borders using CSS attributes. Example: <td style="border-style:solid; border-color:#cccccc; border-width:1px;"> Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 17
19 Styling Text & Fonts When it comes to text styling, there are several ways to achieve the desired font face/family, font size, color and decoration. Our recommendation is to use CSS attributes in the parent <td> to style your text. Recommended text formatting If there is a block of text within the <td> that requires a different font attribute, you can create the inline CSS within a <font> or <span> tag for that specific span of text. Example: <td style="font-family:arial, Helvetica, sans-serif; font-size:12px; color:#666666"> Quisque et erat sed eros tempus ultricies. <font style= color:#e7e7e7 >Curabitur suscipit</font> Sed lacus erat</td> Note: Be sure to use a # before the color hex code. Outlook and Lotus Notes will not render the color without it. Example: <td style= color:#666666"> 18
20 Styling Text & Fonts (continued) Issue: client s CSS styling your content! Some clients will default to their own styles if all attributes are not specified in your HTML. Affected Clients: Gmail, Hotmail, Yahoo Mail Designate all font properties (at least family, size and color) in the <td> or <font> tag using CSS attributes. Example: <td style="font-family:arial, Helvetica, sans-serif; font-size:12px; color:#666666"> Issue: Yahoo Classic <p> tag bug In Yahoo Classic, <p> tags lose their default margin specification and collapse the usual hard return spacing between paragraphs. Recommendation 1: Use two <br /> tags tag to separate paragraphs. Recommendation 2: Write the desired margin using CSS attributes within every <p> tag instance. Example 1: Line 1 of text<br /><br /> Line 2 of text Example 2: <p style="margin-bottom:20px"> Line 1 of text</p> <p style="margin-bottom:20px"> Line 2 of text</p> Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 19
21 Styling Text & Fonts (continued) Issue: Hotmail in Firefox line-height bug There appears to be a rendering issue in Hotmail when using the Firefox browser, where a vertical space appears between images separated by a <br> in the same <td>. Recommendation 1: You can write a CSS attribute of line-height=0px within the <td> where the images are placed, assuming there is no text in the <td> that will be adversely affected. Recommendation 2: Place each image in its own <td>. Example 1: <td style="line-height:0px"><img src=" /> <img src=" /></td> Example 2: <td><img src=" <td><img src=" /></td> 20
22 Styling Links Issue: Links assuming styles defined in CSS of client Some clients will override font attributes in links if not specified with inline CSS. Affected Clients: AOL, Gmail, Hotmail, Lotus, Mac Mail, NetZero, Yahoo Classic Designate all font properties in the <a> tag using CSS attributes. Having these styles defined in the element itself will ensure that your links don t inherit the client s styles. As tedious as it can be, we recommend setting these values on every link instance. Example: <a href="#" style="font-family:arial, Helvetica, sans-serif; fontsize:12px; color:#cccccc; text-decoration:underline;">link</a> Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 21
23 Styling Bullet Lists Issue: Bullet lists in Outlook 2007 In Outlook 2007, lists with inline CSS margins do not render properly when defined explicitly using CSS attributes. If you need to explicitly define a margin for your list <ul>, Outlook 2007 will interpret those margins differently than other clients. Here is a solution: Define the margin of the ul element in a style tag (This will work almost everywhere except Gmail & NetZero, which will revert to their defaults due to lack of style tag support.) Outlook 2007 can then be handled conditionally, by using a conditional comment hack. (See if gte mso 9 example below. This means Greater than or equal to Microsoft Office 9 ) Inside the comments you can set unique definitions for Outlook The trade off here is you get control over Outlook 2007, but you get the default style in Gmail due to Gmail s lack of support for style tags. Example: <style type="text/css"> ul { } margin: 0px; </style> padding: 0px; } <![endif]--> </style> <!--[if gte mso 9]> <style> ul { margin: 0px 0px 0px 24px; padding: 0px;} </style> <![endif]--> 22
24 Styling Bullet Lists (continued) Issue: Images as bullets The List-style-image attribute will not always render correctly. Affected Clients: Hotmail, Lotus Notes, Mac Mail, NetZero, Outlook 2007 Recommendation 1 (preferred): Avoid List Images. Recommendation 2: If your bullet list absolutely needs custom bullets then it is best to set up your bullet list as a nested table, using a 2 column row per each item with the custom image bullets in the first column and the item text in the second. This is tedious and can be difficult to update and manage, and the other caveat to this solution is that your custom image bullets will be blocked by default in most clients. Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 23
25 Images Issue: Image blocking Most clients (see table above) will block images by default, forcing the subscriber to click a button to show the images. Recommendation 1: Be sure to make as much of your pertinent message content (call to action, links, price point, offer value etc ) available as formatted HTML text. Recommendation 2: If the images convey important content, use alt tags to give a brief description for each image. 24
26 Images (continued) Issue: Image compression Even with today s fast internet connections, there still may be a concern with load time of large images. This is especially true if the subscriber is using a slow connection. Images should be saved as either.gif or.jpg depending on the type of image. Logos and illustrations should normally be saved as.gif with a maximum color count of 64. Photos or other pictures should generally be saved as.jpg with a compression between 60 and 70. Issue: Image sizes and slices If the is going to contain large images, some would argue that it is better to slice these images into smaller pieces to facilitate faster load times for slow connections whereas others would argue that fewer requests for larger images can be more efficient for load times on faster connections. If you would like separate parts of one image to have different links, it is better to slice the images and assign links to those pieces. Issue: Image maps Image maps do not render correctly when using Gmail in the Safari browser. Avoid image maps. Instead, slice the image into multiple parts and assign links to each desired part. Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 25
27 Images (continued) Issue: Margins on images Margins applied to the <img> tag using the CSS margins attribute do not render correctly. Also Outlook 2007 doesn t support the hspace or vspace attributes. Create the negative space around the image itself when cropping it in your image editing program. Issue: Animated GIFs In Outlook 2007, animated GIFs do not render and show only the first frame of the animation. Make sure the first frame of the animation displays all of the critical content the image is conveying since Outlook 2007 will load the first frame only. Any subsequent frames should be considered a nice to have. Animation can be a great way to enhance an message if used tastefully and sparingly. 26
28 Design Don ts In addition to the above recommendations, there is code that should be avoided all together due to the limited support in clients. Code to Avoid: Flash Forms JavaScript I-Frames These code elements present a multitude of problems when rendered in clients. It is best to direct a subscriber to a web page where these elements can be used successfully. Test Your Message Check your template by launching test campaigns to as many clients as possible. When it comes to proofreading, sharing the responsibility with more than one person is a good idea as well. It s usually not the best idea for the person who created the to be responsible for the proofing! Be sure to take advantage of both the HTML Design Consultant and the SureSend Message Rendering Reports in the BlueHornet application. A few clients to consider when creating test accounts: Desktop Clients AOL Outlook 2007 Lotus Notes Version 6 and newer has mixed results with HTML. (Version 5 and older will get pretty poor rendering results) Hosted Clients Windows Live/Hotmail Yahoo! Mail Yahoo! Mail beta Gmail AOL NetZero.Mac (MobileMe) Published October 1, BlueHornet Networks Inc. A wholly owned subsidiary of Digital River Inc. 27
29 Conclusion We hope that by following these recommendations you are able to achieve consistent design rendering across all of the major clients. Remember, the key to your success is testing! Also remember, that sometimes there can be give and take with rendering. In order to get your design to render exactly as you wish, you might have to accept perfect results in most of the clients, and really good results in the rest. With patience, practice and diligence you should be able to arrive at a design methodology that will work best for your brand. This document is a work in progress and will be updated regularly, as the level of support for HTML in clients evolves. 28
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
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
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
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
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
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
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
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.
MCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services [email protected] Lindsey McFadden Manager, Campaign Production Services [email protected] 2 Creative
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
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
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
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
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
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
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
Caldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
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
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
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
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
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
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: [email protected]
Introduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
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
WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com [email protected]. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com [email protected] INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
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...
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
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
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.
Advanced Drupal Features and Techniques
Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount
New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts
A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
HTML Tables. IT 3203 Introduction to Web Development
IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing
{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:
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library [email protected] @joegilbert Why Learn the Building Blocks? The idea
Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...
Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...
Creating HTML authored webpages using a text editor
GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353
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
How To Write An Email From An Ipad To An Email Address In India
A Designer's Guide to HTML Emails There are a whole host of ingredients that contribute to a good email marketing campaign. Permission, relevance, timeliness and engaging content are all important. Even
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
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:
Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think
CS412 Interactive Lab Creating a Simple Web Form
CS412 Interactive Lab Creating a Simple Web Form Introduction In this laboratory, we will create a simple web form using HTML. You have seen several examples of HTML pages and forms as you have worked
Advanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for
WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012)
WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) BY MISS. SAVITHA R LECTURER INFORMATION SCIENCE DEPTATMENT GOVERNMENT POLYTECHNIC GULBARGA FOR ANY FEEDBACK CONTACT TO EMAIL:
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
Campaign Previews AOL 9. Spam Controls Off Images Off 5/22/2008 2:39 PM
of 57 5/22/2008 2:39 PM of 57 5/22/2008 2:39 PM Campaign Previews AOL 9 Spam Controls Off Images Off of 57 5/22/2008 2:39 PM AOL 9 Spam Controls Off Images On of 57 5/22/2008 2:39 PM Comcast Spam Filter
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
About webpage creation
About webpage creation Introduction HTML stands for HyperText Markup Language. It is the predominant markup language for Web=ages. > markup language is a modern system for annota?ng a text in a way that
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
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
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
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
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
Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
The Third Screen: What Email Marketers Need to Know About Mobile Rendering
BlueHornet Whitepaper The Third Screen: What Email Marketers Need to Know About Mobile Rendering Part One: Your Marketing Message on the Third Screen Executive Summary The rapid rise in adoption of so-called
Rhetorik Email campaign - Guidelines
Rhetorik Email campaign - Guidelines 18/06/2013 Version: 1.1 Table of contents 1. INTRODUCTION... 2 2. THE PROCESS... 2 3. WHAT WE NEED TO SET UP THE EMAIL BROADCAST... 2 3.1 Email campaign set up brief...
Guidelines for Effective Email Creative
Guidelines for Effective Email Creative While the need for quality and effective design has always existed from a marketing standpoint, challenges unique to the email space require a different look at
Email Marketing Design & Rendering: The New Essentials
whitepaper Email Marketing Design & Rendering: The New Essentials Overview Design is vital to the success of your email marketing program. But what does good email design really entail? How do you ensure
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
ICT 6012: Web Programming
ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term
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
Email Marketing 101 Maximizing Email Results
Email Marketing 101 Maximizing Email Results Craig Stouffer Pinpointe On-Demand [email protected] (408) 834-7577 x125 Mark Feldman NetProspex VP Marketing [email protected] (781) 290-5714 www.twitter.com/pinpointe
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
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
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
Web Design & Development - Tutorial 04
Table of Contents Web Design & Development - Tutorial 04... 1 CSS Positioning and Layout... 1 Conventions... 2 What you need for this tutorial... 2 Common Terminology... 2 Layout with CSS... 3 Review the
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.
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements
IE Class Web Design Curriculum
Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,
Website Planning Checklist
Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even
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?
Embedding a Data View dynamic report into an existing web-page
Embedding a Data View dynamic report into an existing web-page Author: GeoWise User Support Released: 23/11/2011 Version: 6.4.4 Embedding a Data View dynamic report into an existing web-page Table of Contents
Lesson Review Answers
Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
Atable is an orderly arrangement of data distributed across a grid of rows and
7 Tables and Layout Atable is an orderly arrangement of data distributed across a grid of rows and columns similar to a spreadsheet. In printed documents, tables commonly serve a subordinate function,
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 [email protected] www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 [email protected] www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
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,
HTML Forms and CONTROLS
HTML Forms and CONTROLS Web forms also called Fill-out Forms, let a user return information to a web server for some action. The processing of incoming data is handled by a script or program written in
HTML Email Power Tips. HTML messages improve your CTR. World s Easiest Email Marketing.
A quick guide to Learn easy and effective ways to engage your subscribers, increase your click-through ratio (CTR), and get better results from your email marketing. HTML Email Power Tips Be readable get
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
Short notes on webpage programming languages
Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of
Chapter 2 HTML Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 2 HTML Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 First Web Page an opening tag... page info goes here a closing tag Head & Body Sections Head Section
![<script type=text/javascript> var _gaq = _gaq []; _gaq.push(['_setaccount', 'UA 2418840 25']); _gaq.push(['_trackpageview']);](/thumbs/39/19204685.jpg "<script type=text/javascript> var _gaq = _gaq []; _gaq.push(['_setaccount', 'UA 2418840 25']); _gaq.push(['_trackpageview']);")