HTML Fails: What No One Tells You About HTML

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "HTML Fails: What No One Tells You About Email HTML"

Transcription

1 HTML Fails: What No One Tells You About HTML

2 2 Today s Webinar Presenter Kate McDonough Campaign Manager at PostUp Worked with various ESPs: Constant Contact, Campaign Monitor, ExactTarget, Distribion Questions from today s webinar will be held at the end.

3 3 Today s Agenda Some basic tips and pitfalls to avoid: The Anatomy of an DOCTYPES Table Properties Tags and Capitalization Alt Text & Which Clients Display Images by Default Misuse of <center> and <br> Tags Copying & Pasting HTML

4 The Anatomy of an 4

5 5 The Anatomy of an All s have a basic skeletal structure Ignoring the structure and misplacing the bones can lead to rendering problems Not all elements of the skeleton must be used, but they should be in the same order

6 6 The Anatomy of an <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">

7 7 The Anatomy of an <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">

8 8 The Anatomy of an <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">

9 9 The Anatomy of an <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">

10 10 The Anatomy of an <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">

11 11 The Anatomy of an <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">

12 12 The Anatomy of an <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">

13 13 The Anatomy of an <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this is the title of your document, when viewed as a webpage some browsers will show this</title> <style type="text/css"> * { padding: 0px; border: none; line-height: normal; outline: none; list-style: none; -webkit-text-size-adjust: none; } </style> </head> <body marginwidth="0" marginheight="0" style="width: 100%!important;-webkit-textsize-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; " offset="0" topmargin="0" leftmargin="0" bgcolor="#ffffff"> <table align="center" border="0" cellpadding="0" cellspacing"0">

14 DOCTYPES 14

15 15 Why Use a DOCTYPE? DOCTYPES should be used in all s and be placed before the <html> tag Some web clients will strip out the DOCTYPES Subtle differences in how clients render HTML s with different DOCTYPES 8 variations

16 16 The Best DOCTYPE for XHTML 1.0 transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> Proven to be most reliable

17 17 Effects of Not Having a DOCTYPE No DOCTYPES = no paragraph margin This can be seen in clients like: Gmail Apple Mail ipad iphone Symbian S60 (Nokia)

18 18 Effects of Not Having a DOCTYPE No DOCTYPES = Some special characters not supported Problems in IE browsers with rendering margins and padding as specified

19 Table Properties 19

20 20 Not Setting Table Properties Specifically cellpadding and cellspacing Why this matters: Affects the alignment of your Breaks with multiple tables If not set to 0 Outlook will add 2 pixels of padding between all cells in a table

21 21 Not Setting Table Properties <table width="600" cellpadding="0" cellspacing="0">

22 Tags & Capitalization 22

23 Capitalizing Tags 23

24 24 Capitalizing Tags s are in XHTML format Case sensitive, requires all tags to be lowercase Capitalized tags should be kept to web design only

25 Alt Text & Default Display Image 25

26 26 Not Including Alt Text Spam filters & scoring Alt text can function as CTAs for s that are image heavy

27 27 Not Including Alt Text Desktop clients that enable images, support alt text:

28 28 Not Including Alt Text Webmail clients that enable images, support alt text:

29 29 Not Including Alt Text Mobile clients that enable images, support alt text:

30 Misuse of <center> and <br> Tags 30

31 31 Using the Tag <center> to Center-Align Commonly used to center align text <center> can display differently in certain browsers Purely presentational rather than structural

32 Using the Tag <center> to Center-Align 32

33 33 Using the Tag <center> to Center-Align <center> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#ebebeb"> <tr> <td align="center"> <table> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#ebebeb align="center"> <tr> <td align="center"> <table> content content </table> </td> </tr> </table> </center> BEFORE </table> </td> </tr> </table> AFTER

34 34 Misuse of the Break <br /> Tag Written multiple ways: <br> <br/> <br /> Preferred variation is <br />. If your doctype is specified using HTML you can use the <br> tag. In XHTML, you must close the tag with a final slash (e.g. <br />) Most s use XHTML Using break tags; in place of rows with fixed heights in place of lists

35 Copying & Pasting HTML 35

36 36 Copying & Pasting from a Microsoft Product Never keep your HTML in a Word doc Never copy and paste from a Microsoft Product Copying and pasting from a Microsoft program can cause damage Microsoft products embed unseen code

37 37 Copying & Pasting from a Microsoft Product

38 Questions? 38

39 Thank You! Find me on 39

XHTML/CSS Module in 2 parts

XHTML/CSS Module in 2 parts XHTML/CSS Module in 2 parts So as to familiarize yourself with the basics of XHTML and CSS, I want you to walk through the following module. This will be due at the end of class today. Please save the

More information

8 STEPS TO CODE KILLER RESPONSIVE EMAILS

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

More information

The Essential Guide to HTML Email Design

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

More information

Email Campaign Guidelines and Best Practices

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

More information

HTML Standards & Compliance

HTML Standards & Compliance Minimum Required HTML tags: HTML Standards & Compliance (must go in this order!) 1 2 HTML document An HTML document can be created in any plain

More information

Creative Guidelines for Emails

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

More information

GUIDE TO CODE KILLER RESPONSIVE EMAILS

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

More information

Eloqua Email 101. What is this and why should I read it?

Eloqua Email 101. What is this and why should I read it? 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

More information

Designing HTML Emails for Use in the Advanced Editor

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

More information

CSS SUPPORT IN EMAIL THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIXEMAIL

CSS SUPPORT IN EMAIL THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIXEMAIL CSS SUPPORT IN EMAIL THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIXEMAIL Standards are not usually standard 2 Standards are not usually standard 3 it can be funny. but not always. 4 on our panel ROS HODGEKISS

More information

RESPONSIVE EMAIL DESIGN

RESPONSIVE EMAIL DESIGN RESPONSIVE EMAIL DESIGN SELLIGENT The contents of this manual cover material copyrighted by Selligent. This manual cannot be reproduced, in part or in whole, or distributed or transferred by means electronic

More information

Web Design Course. Home Page. Join in. Home. Objectives. Course Content. Assignments & Discussion. Grades. Help. Contact Me aab43@uakron.

Web Design Course. Home Page. Join in. Home. Objectives. Course Content. Assignments & Discussion. Grades. Help. Contact Me aab43@uakron. Home Page Web Design Course Join in Navigation Bar: Home Objectives Course Content Assignments & Discussion Grades Help Contact Me aab43@uakron.edu Welcome to web design course., This course is designed

More information

How to Properly Compose E-Mail HTML Code : 1

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

More information

Open a new file in notepad/textedit Save it with a.css extension (I will call mine tutorial.css, but you can call it whatever you like)

Open a new file in notepad/textedit Save it with a.css extension (I will call mine tutorial.css, but you can call it whatever you like) CSS Tutorial Part 1: First: Create a separate CSS file. Open a new file in notepad/textedit Save it with a.css extension (I will call mine tutorial.css, but you can call it whatever you like) Second: Download

More information

CS134 Web Site Design & Development. Quiz1

CS134 Web Site Design & Development. Quiz1 CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov

More information

Agenda. 1. ZAPms Konzept. 2. Benutzer-Kontroller. 3. Laout-Aufbau. 4. Template-Aufbau. 6. Konfiguration. 7. Module.

Agenda. 1. ZAPms Konzept. 2. Benutzer-Kontroller. 3. Laout-Aufbau. 4. Template-Aufbau. 6. Konfiguration. 7. Module. Agenda. ZAPms Konzept.. Benutzer-Kontroller.. Laout-Aufbau.. Template-Aufbau. 5. Bildergalerie (Beispiel). 6. Konfiguration. 7. Module. . ZAPms Konzept Benutzer Web Server Benutzer-Kontroller www.domain/index.php

More information

Interactive Web Sites

Interactive Web Sites 0. HTML5 Interactive Web Sites CS 50.12 :: Fall 2013 Instructor: Corrine Haverinen Santa Rosa Junior College Slideshow template and some content adapted from Tantek Çelik 1. Why HTML5? We're betting big

More information

Coding HTML Email: Tips, Tricks and Best Practices

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.

More information

File Naming and Coding

File Naming and Coding File Naming and Coding What is the file name of the first page of a website? index.html What are best practices for naming files? naming conventions File names: No spaces, 8 characters or less, 3 or 4

More information

Chapter 6 Standards, compliance, and all that jazz

Chapter 6 Standards, compliance, and all that jazz Chapter 6 Standards, compliance, and all that jazz Minimum Required HTML tags: (Not case sensitive in older HTML, but must go in this order!)

More information

On Page Optimization Part I. Copyright 2009, All Rights Reserved Attraction Marketing Formula, LLC

On Page Optimization Part I. Copyright 2009, All Rights Reserved Attraction Marketing Formula, LLC On Page Optimization Part I 1 Purposes On Page Optimization Lets Google Know You are Worthy Helps Get Off Page Optimization (see below) Off Page Optimization Establishing Authority Getting Human Votes

More information

TEMPLATE GUIDELINES OCTOBER 2013

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

More information

Web Application Report

Web Application Report Web Application Report Security Report This report was created by IBM Rational AppScan 7.8.0.0 2/11/2009 5:25:03 PM 2/11/2009 5:25:03 PM 1/28 Copyright IBM Corp. 2000, 2009. All Rights Reserved. Report

More information

24 WAYS to impress your friends

24 WAYS to impress your friends 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

More information

Chapter 1: Outlook Isn t Going Anywhere... 2. Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3

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:

More information

MCH Strategic Data Best Practices Review

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

More information

Looking Good! Troubleshooting Email Display Problems

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

More information

Email Marketing 101 Maximizing Email Results

Email Marketing 101 Maximizing Email Results Email Marketing 101 Maximizing Email Results Craig Stouffer Pinpointe On-Demand cstouffer@pinpointe.com (408) 834-7577 x125 Mark Feldman NetProspex VP Marketing mfeldman@netprospex.com (781) 290-5714 www.twitter.com/pinpointe

More information

This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.

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

More information

HTML Email Power Tips. HTML messages improve your CTR. World s Easiest Email Marketing.

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

More information

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS 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

More information

AMA Digital/Web Advertising Placements - Banner Sizes

AMA Digital/Web Advertising Placements - Banner Sizes American Medical Association - Digital/Web Advertising Material Spec Sheet AMA Digital/Web Advertising Contacts Sales - Display / Online (New Jersey) Sales - Classified / Online (Chicago) Production /

More information

A quick guide to... Effective HTML Messages

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.

More information

Table of Contents Find out more about NewZapp

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

More information

Basic HTML. Part 1: Basic Web Page Production. Basic Web page creation. Basic HTML tags. Heading tags. By Kathy Schrock

Basic HTML. Part 1: Basic Web Page Production. Basic Web page creation. Basic HTML tags. Heading tags. By Kathy Schrock Basic HTML Part 1: Basic Web Page Production By Kathy Schrock 1 2 Basic Web page creation Basic HTML tags Basic HTML tags Heading tags Paragraph and break tags Text alignment Background color Text color

More information

HTML TIPS FOR DESIGNING

HTML TIPS FOR DESIGNING This is the first column. Look at me, I m the second column.

More information

Email Creator Coding Guidelines Toolbox

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

More information

Monday + Wednesday 12:00-1:50pm. CompThink ARTS Andrew Ilnicki

Monday + Wednesday 12:00-1:50pm. CompThink ARTS Andrew Ilnicki Monday + Wednesday 12:00-1:50pm CompThink ARTS 291 001 Andrew Ilnicki ilnickiap@vcu.edu Course Website VCUarts CompThink http://arts.vcu.edu/compthink Software Design Software - Adobe Creative Suite Text

More information

Level 1 - Clients and Markup

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

More information

The Da Vinci Coding: The Art of HTML

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

More information

CLEAN CODE FOR COMPLEX EMAILS

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

More information

Secure Testing Service

Secure Testing Service Secure Testing Service Overview and pre-release use Authors: Andrej Sokoll Matthew Loewengart Revisions: 2011 Version 1.0 Page 2 Contents Overview... 3 Background... 3 How does the secure testing service

More information

RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR

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

More information

GEMFIND. We Handle The Journey. So You Can Focus On The Destination. WEB TECHNOLOGIES FOR THE JEWELRY INDUSTRY - Est. 1999

GEMFIND. We Handle The Journey. So You Can Focus On The Destination. WEB TECHNOLOGIES FOR THE JEWELRY INDUSTRY - Est. 1999 GEMFIND WEB TECHNOLOGIES FOR THE JEWELRY INDUSTRY - Est. 1999 We Handle The Journey So You Can Focus On The Destination COMPANY Your Jewelry Technology Team We Handle Your Entire Digital Experience WEB

More information

POV: DODGING THE PITFALLS OF IMAGES IN EMAIL MARKETING

POV: DODGING THE PITFALLS OF IMAGES IN EMAIL MARKETING POV: DODGING THE PITFALLS OF IMAGES IN EMAIL MARKETING JANUARY 2015 DODGING THE PITFALLS OF IMAGES IN EMAIL MARKETING: ENSURING SUCCESS WITH AN IMAGES-OFF APPROACH EXECUTIVE SUMMARY It s no secret that,

More information

Multiple Choice (2 points each).

Multiple Choice (2 points each). Internet Design and Development Test Points available: 170 NAME: DATE: Multiple Choice (2 points each). 1. Choose the organization listed below that takes a proactive role in developing recommendations

More information

Mobile Optimise your Emails. Code & examples to make your email campaigns mobile friendly

Mobile Optimise your Emails. Code & examples to make your email campaigns mobile friendly Mobile Optimise your Emails Code & examples to make your email campaigns mobile friendly Email Marketing Guide June 2013 CONTENTS Introduction...01 The Growing Importance of Mobile...02 Key Mobile Devices...03

More information

Setting up Web Material. An introduction

Setting up Web Material. An introduction Setting up Web Material An introduction How to publish on the web Everyone with an Aberystwyth University account can publish material on the web http://users.aber.ac.uk/you9/ The URL of your home page

More information

HTML Lesson 7. Your assignment:

HTML Lesson 7. Your assignment: HTML Lesson 7 Tables are one of the biggest tools Web developers use to present data wherever they want data to go on the page. Like spreadsheets, rows go across (left to right) and columns go up and down.

More information

Connecting To Avenista Web Reservations v2

Connecting To Avenista Web Reservations v2 Connecting To Avenista Web Reservations v2 Tony Ball KB Logic Ltd 2013 All Rights Reserved No lending, copying, or reproduction of this document of any kind whether in part or of the whole is allowed without

More information

How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012

How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 How to craft a modern, mobile-optimized HTML email template Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 Our old email template Pros Simple Lightweight Worked as plain-text Rendered OK

More information

Making Responsive Emails

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:

More information

Informz for Mobile Devices: Making Your Emails PDA and Phone-Friendly

Informz for Mobile Devices: Making Your Emails PDA and Phone-Friendly Informz for Mobile Devices: Making Your Emails PDA and Phone-Friendly The use of personal digital assistants (PDAs) has increased exponentially since the early days of rudimentary Palm Pilots and similar

More information

Make a Joomla Template in 5 Easy Steps A Beginners Guide

Make a Joomla Template in 5 Easy Steps A Beginners Guide Make a Joomla Template in 5 Easy Steps A Beginners Guide By Gary Reid http://clubtvk.com Copyright 2006 Gary Reid. All Rights Reserved. No part of this book may be used or reproduced in any manner whatsoever

More information

The Essential Guide to HTML Email Design

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

More information

Web Viewer Reports: Using the Data URI. FMUG June 6, 2008

Web Viewer Reports: Using the Data URI. FMUG June 6, 2008 Web Viewer Reports: Using the Data URI FMUG June 6, 2008 Skills you should have Familiarity with the Web Viewer object HTML Scripting and calculations What is the Web Viewer? A object introduced in v8.5

More information

HTML and Style Sheets

HTML and Style Sheets HTML and Style Sheets A style sheet is used to define overall formatting information - formatting that can apply to each web page in web site that you are constructing Advantages: saves time - imagine

More information

Cascading Style Sheets. An Introduction

Cascading Style Sheets. An Introduction Cascading Style Sheets An Introduction WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION... 1 Why Use CSS? 1 How Do They Cascade? 2 INTERNAL AND EXTERNAL STYLE SHEETS... 2

More information

Creating Effective HTML Email Campaigns

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

More information

Apple URL Scheme Reference

Apple URL Scheme Reference Apple URL Scheme Reference Contents About Apple URL Schemes 4 At a Glance 4 Composing Items Using Mail 4 Starting a Phone or FaceTime Conversation 4 Specifying Text Messages 5 Opening Locations in Maps

More information

Responsive HTML email and Drupal

Responsive HTML email and Drupal Responsive HTML email and Drupal Mobile + Email + Drupal Drew Gorton Drew Gorton Founder gortonstudios.com Responsive HTML email Why? ~19% of email messages are read on smartphones or tablets. Source:

More information

The CSS Box Model. Practical Exercises

The CSS Box Model. Practical Exercises Practical Exercises Overview The CSS Box Model is fundamental to understanding how to use the range of page layout tools that CSS has to offer. By treating all page elements as boxes with dimensions, borders,

More information

Language (HTML) Designing Documents for the World Wide Web

Language (HTML) Designing Documents for the World Wide Web 2009 Marty Hall HyperText Markup Language (HTML) Designing Documents for the World Wide Web 2 Customized Java EE Training: http://courses.coreservlets.com/ Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

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.

More information

6-part Lunch Learning Series

6-part Lunch Learning Series Lunch & Learn: Mobile Email 101 Thursday, January 17, 2013 12:00pm 12:30pm EST #asaewebinar Presented by: Ronald McGrath Chief Technology Officer, HighRoad Solution Lydia Roberts Professional Services,

More information

customer community Getting started Visual Editor Guide! www.pure360community.co.uk

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

More information

Item Authoring Tool PDF Tables

Item Authoring Tool PDF Tables Item Authoring Tool PDF Tables The PDF engine supports tables in all areas of a printed test (questions, responses, passages, answers, other tables, etc.). The supported functionality is as close to HTML

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

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...

More information

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 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

More information

Advanced Web Design. Zac Van Note. www.design-link.org

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

More information

In this chapter, you will learn how to...

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

More information

Responsive Email Design. Our guide to helping you get started. March 2013 Version 0.4

Responsive Email Design. Our guide to helping you get started. March 2013 Version 0.4 Responsive Email Design Our guide to helping you get started March 2013 Version 0.4 Contents Introduction... 3 What is Responsive Design?... 4 What about email?... 5 So what are the pros and cons?... 6

More information

Introduction to Drupal

Introduction to Drupal Introduction to Drupal Login 2 Create a Page 2 Title 2 Body 2 Editor 2 Menu Settings 5 Attached Images 5 Authoring Information 6 Revision Information 6 Publishing Options 6 File Attachments 6 URL Path

More information

Web Editing Basics 2: Reference

Web Editing Basics 2: Reference Web Editing Basics 2: Reference We will be using the sample pages as a reference point for this training. They can be found on the Web Policy site: http://www.umkc.edu/web-policy/downloads.asp TOPICS 1.

More information

Guide to B2B email marketing. Part Three: Building great emails

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

More information

Table of Contents. CSS Instant Results byrichard York Wrox Press 2006 (408 pages)

Table of Contents. CSS Instant Results byrichard York Wrox Press 2006 (408 pages) Table of Contents CSS Instant Results byrichard York Wrox Press 2006 (408 pages) ISBN:047175126X Helping you to quickly master and implement the diverse web applications CSS enables for web designers,

More information

Links Getting Started with Widgets, Gadgets and Mobile Apps

Links Getting Started with Widgets, Gadgets and Mobile Apps Widgets, Gadgets, and Mobile Apps for Libraries: Tips, Code Samples, Explanations, and Downloads Michael Sauers Technology Innovation Librarian Nebraska Library Commission msauers@nlc.state.ne.us Jason

More information

Joomla Article Advanced Topics: Table Layouts

Joomla Article Advanced Topics: Table Layouts Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand

More information

Dreamweaver CS6 Manual

Dreamweaver CS6 Manual Dreamweaver CS6 Manual Joan Weeks SLIS Computer Labs Mgr. March 2013 Topic 1 What is Dreamweaver CS6? Dreamweaver CS6 is a complete website development tool that gives you the ability to create multiple

More information

Email Marketing. Best Practices

Email Marketing. Best Practices Email Marketing Best Practices Introduction Within email marketing, creative design serves two very important functions. First, properly composed email creative ensure proper rendering and deliverability

More information

Creating web pages Chapter 3. HTML Basic Concepts

Creating web pages Chapter 3. HTML Basic Concepts ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA ICAI Chapter 3. HTML Basic Concepts Cristina Puente, Rafael Palacios 2009-2010 HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup

More information

Converting Prospects to Purchasers.

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

More information

CHAPTER 1 EXPLORING THE PHP ENVIRONMENT EXPLORING THE ENVIRONMENT

CHAPTER 1 EXPLORING THE PHP ENVIRONMENT EXPLORING THE ENVIRONMENT CHAPTER 1 EXPLORING THE PHP ENVIRONMENT EXPLORING THE ENVIRONMENT CHAPTER OBJECTIVE What is PHP? Download and install Apache Web Server Download and install PHP Download and install MySQL Database Ensure

More information

This paper MUST NOT BE REMOVED from the examination venue

This paper MUST NOT BE REMOVED from the examination venue Unit Code: CSE2WD Paper No: 1 Unit Name:Web Development Paper Name: Final Reading Time: 15 minutes Writing Time: 2 hours No. of Pages (including cover sheet): 9 OFFICE USE ONLY (FACULTY/SCHOOL STAFF):

More information

Understanding the Advanced Template Editor

Understanding the Advanced Template Editor Quick Start Guide to: Understanding the Advanced Template Editor The basic template editor in Swiftpage is used to create templates that began as imported templates or global advanced templates. (One function

More information

Web Development 1 A4 Project Description Web Architecture

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:

More information

Tutorial by Philemon Yalamu

Tutorial by Philemon Yalamu TUTORIAL - PART 1 Tutorial by Philemon Yalamu http://www.artech.com.pg/ 1. Introduction The internet is vast and is a rapidly growing medium of communication today. On it there are endless opportunities

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

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

More information

Die BA-CA-Phishing-Attacke

Die BA-CA-Phishing-Attacke Das MAIL: Return-Path: Received: from 144083720 ([220.87.182.132]) by mail.xxxxxxxxxxx.at (8.13.1/8.13.1) with SMTP id k0v7ewdk026091 for ; Tue, 31 Jan 2006 08:14:38

More information

HTML Notes. How HTML is structured. Sections of an HTML Document. Paired tags. Tag attributes. Page attributes

HTML Notes. How HTML is structured. Sections of an HTML Document. Paired tags. Tag attributes. Page attributes HTML Notes How HTML is structured HTML consists of standard ASCI (American Standard Character Interchange) text surrounded by html tags. Tags are instructions which tell a web browser how to display a

More information

X. Apéndice C. Listado de Códigos.

X. Apéndice C. Listado de Códigos. X. Apéndice C. Listado de Códigos. 10.1 Version2.aspx

More information

An Experimental Study on Validation Problems with Existing HTML Webpages

An Experimental Study on Validation Problems with Existing HTML Webpages An Experimental Study on Validation Problems with Existing HTML Webpages Shan Chen Dan Hong Vincent Y. Shen Department of Computer Science Hong Kong University of Science and Technology Clear Water Bay,

More information

Table of Contents Desktop PC and Apple Mac email applications Web and mobile device email readers Find out more about NewZapp

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

More information

Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7

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...

More information

FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II)

FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II) Sample Question Paper FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II) TIME : 3 Hrs MM : 80. SECTION A 1. Fill in the blanks: [10] 1.1 is the extension of an XML file. 1.2 attribute is used with

More information

RESPONSIVE DESIGN FOR MOBILE RENDERING

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

More information

Web Development Guide. Information Systems

Web Development Guide. Information Systems Web Development Guide Information Systems Gabriel Malveaux May 2013 Web Development Guide Getting Started In order to get started with your web development, you will need some basic software. In this guide

More information

Introduction to Web Development

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:

More information