Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7
|
|
|
- Lisa McKinney
- 8 years ago
- Views:
Transcription
1 Version 4.0.1
2 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 DESIGN OPTIONS FOR NEWZAPP... 8 BASIC STRUCTURE OF A NEWZAPP HTML TEMPLATE... 9 WRITING AND EDITING HTML FOR NEWZAPP... 9 NAMING OF HTML FILES AT THE START OF THE HTML CODE USING <META> TAGS CSS STYLE FORMATTING IN S HTML BODY ATTRIBUTES DISPLAY ON MOBILE DEVICES BUILDING TEMPLATES USING HTML TABLES SHOULD YOU USE AN HTML <TABLE> OR <DIV> LAYOUT? THE <TABLE> TAG THE TABLE ROW <TR> TAG THE TABLE CELL <TD> TAG STRETCHING BACKGROUND COLOUR FILLS USING TABLE CELL PADDING/SPACING SETTING TABLE BORDERS SETTING INLINE STYLE BORDERS AVOIDING GAPS APPEARING IN OUTLOOK AVOIDING GREY BACKGROUND COLOUR SHOWING THROUGH ON ANDROID MOBILE DEVICES AVOIDING UNWANTED COLOURED BORDERS ON IOS MOBILE DEVICES CREATING A NEWZAPP HTML EDITABLE TEMPLATE DECLARING A NEWZAPP EDITABLE HTML TEMPLATE NEWZAPP CUSTOM VIEW ONLINE LINK NEWZAPP CUSTOM UNSUBSCRIBE LINK
3 THE NEWZAPP FORWARD TO A FRIEND FUNCTION DEFINING FIXED DROP ZONES FOR INSERTING BLOCKS INTO A NEWZAPP HTML TEMPLATE PERSONALISATION CREATING A NON-EDITABLE HTML TEMPLATE USING COLOURS IN HTML TEMPLATES ADDING COLOURS TO HTML S THE NEWZAPP COLOUR PICKER SETTING CELL BACKGROUND COLOUR FILL SETTING TEXT COLOUR ENSURING TEXT HAS SUFFICIENT CONTRAST AGAINST A BACKGROUND COLOUR SETTING FONT STYLES IN HTML TEMPLATES TEXT FORMATTING COMMONLY USED WEB-FRIENDLY FONTS ENSURING ARIAL BLACK DISPLAYS IN ALL READERS COMMONLY USED WEB-FRIENDLY FONT SIZES CHANGING TEXT ATTRIBUTES WITHIN A SENTENCE PREVENTING MOBILE DEVICES FROM ENLARGING YOUR TEXT IMAGES IN HTML TEMPLATES RECOMMENDED IMAGE FILE FORMATS SOURCING IMAGES FROM WITHIN SYSTEM.NEWZAPP.CO.UK SOURCING IMAGES FROM A LOCATION OUTSIDE SYSTEM.NEWZAPP.CO.UK CORRECT IMAGE DIMENSIONS TABLES AND IMAGE PLACEMENT AVOIDING GAPS APPEARING ABOVE AND BELOW IMAGES IMAGES FOR USE IN EDITABLE AREAS BACKGROUND FILLS AND IMAGES SETTING A FLAT BACKGROUND COLOUR FILL USING BACKGROUND IMAGES IN HTML S SETTING A SINGLE OVERALL BACKGROUND IMAGE IN A HTML SETTING EXTERNAL LINKS ON TEXT AND IMAGES
4 SETTING LINK STYLING ON TEXT CONTENT SETTING LINK STYLING ON DYNAMIC CONTENT PREVENTING LINKS FROM APPEARING ON TELEPHONE NUMBERS LINK BORDERS AROUND IMAGES LINKS CREATED USING IMAGE MAPS ADDING INTERNAL LINKS TO TEXT AND IMAGES INCLUDING A JOHNSON BOX ABOVE YOUR TEMPLATE DESIGN ADDING SOCIAL MEDIA BUTTONS TWITTER TWEET BUTTON OR LINK FACEBOOK SHARE BUTTON OR LINK LINKEDIN SHARE BUTTON OR LINK GOOGLE+ SHARE BUTTON OR LINK ADDING AN HTML UNSUBSCRIBE FOOTER UPLOADING AND TESTING TEMPLATES IN A NEWZAPP ACCOUNT UPLOADING S TESTING YOUR TEMPLATES - IMPORTANT GUIDELINES READER TESTING ACCOUNTS CREATING A TEST EDITABLE SENDING TEST S CODE EXAMPLES FOR TYPICAL NEWZAPP HTML TEMPLATES NEWZAPP TEMPLATE TYPICAL <HEAD> CODE NEWZAPP HTML TEMPLATE TYPICAL VIEW ONLINE CODE NEWZAPP TEMPLATE TYPICAL [FORWARDTEXT] CODE TYPICAL WEB-FRIENDLY FONT-FAMILIES FONTS COMMONLY INSTALLED ON CURRENT OPERATING SYSTEMS MOBILE DEVICE INLINE CSS FOR STOPPING TEXT-SIZE ADJUSTMENT FONT SIZES COMMONLY USED IN TEMPLATES TYPICAL INLINE STYLE FOR HTML TEXT
5 TYPICAL INLINE STYLE FOR HTML TEXT LINKS INTERNAL ANCHOR LINKS NEWZAPP FORWARD TO A FRIEND LINK URL COPY AND PASTE AS REQUIRED NEWZAPP UNSUBSCRIBE LINK URL TYPICAL INLINE STYLE FOR BORDER CAMPAIGN DYNAMIC TWITTER TWEET LINK CAMPAIGN DYNAMIC FACEBOOK SHARE LINK CAMPAIGN DYNAMIC LINKEDIN SHARE LINK CAMPAIGN DYNAMIC GOOGLE+ SHARE LINK NEWZAPP COLOUR PICKER HEXADECIMAL VALUES
6 Overview The Designer s Guide to creating NewZapp Drag and Drop templates This guide is aimed primarily at anyone wanting to create an template that will be delivered using the NewZapp Drag and Drop editor. A good understanding of hand-coding in HTML and CSS is assumed as well as a good understanding of image editing. Before you start, it is a good idea to download these 4 example templates and have them open in your HTML code editor to refer back to they will make the Designers Guide easier to understand. Because readers and mail filters are constantly changing, this document is subject to ongoing updates. To be sure that you are using the latest version, please visit: 6
7 The NewZapp System How the system works NewZapp is designed to allow users to create and send campaigns using editable.html templates. The.html template file contains the design, structure, fixed and editable content. 7
8 The HTML Template Structure Your s will be handled by readers using their own proprietary display software. They will likely be opened on machines running antivirus scanners and mail filters operating behind secure client firewalls. Simple text and RGB Colour Mode graphics should be used in HTML s. The CMYK Colour Mode is designed for print use, and is incompatible with digital output. We recommend images are either.jpg,.gif or.png format. Other formats are not widely supported by all readers. Please note that.png images are not supported in some legacy readers. Animated.gif images will work as expected in all readers except Outlook and Windows Phone, which display just the first frame. They also tend to have large file sizes, so optimise as much as possible if creating them. Dynamically coded elements such as JavaScript, Java, Flash, Shockwave etc will cause s to be rejected by most readers, and therefore should not be used. <form> elements also do not work in HTML s. The two main HTML design options for NewZapp The first option is to create a re-usable NewZapp template with pre-defined editable areas. This can then be used to create new s within a NewZapp account which are filled with content using the editing tools and sent to multiple recipients via the NewZapp delivery system. The second option is to create a non-editable with fixed content, which may then be uploaded into a NewZapp account and sent to multiple recipients via the NewZapp delivery system. The choice is entirely yours. In the following sections we offer guidance on creating both editable and non-editable templates for use with the NewZapp system. 8
9 Basic structure of a NewZapp HTML template In the following sections we will discuss how to build a NewZapp-ready HTML template using simple <table> elements, images, inline CSS, and CSS in the <head> of the . Writing and editing HTML for NewZapp it is recommended that you use a code editor that does not add any additional formatting or proprietary code of its own to yours. The simplest HTML editor would be something like Notepad (Windows) or SimpleText (Mac). These are also useful for simple code cleaning formatted text can be converted back to plain text just by pasting into Notepad or SimpleText, then selecting and copying again. There are many other purpose-built HTML editors available that have additional useful features such as line-numbering, syntax colouring, code hinting, design previewing, automatic file managing and so forth. Complex Microsoft products (such as Word or FrontPage) are not recommended for designing your HTML as these introduce unwanted extra code that causes issues both in NewZapp and many readers. You can design the HTML template in a similar way to a simple HTML page. It is important that you decide on the areas and elements that need to be editable and which need to be fixed. You will have little control over the vertical size that editable areas will grow to, so keep this in mind and design a layout that will look good with varying amounts and sizes of content in each area. In areas such as editable titles, date fields, taglines, contact details, product images etc, if you need to set a limit on the size a field grows to, ensure the end user is aware of this and make it as easy as possible to keep within these limits. Design s to be between px wide to fit comfortably onto most screens. The main part of the is typically centre-aligned, although you can just as easily set it to be left or right-aligned as required. Please download and refer to these 4 example templates 9
10 Naming of HTML files Normal web file extension naming procedures apply when creating an HTML template. Do not use any spaces in the names of files or folders. At the start of the HTML code Many commonly used standard HTML declarations can cause issues in different readers, for example the <!DOCTYPE > declaration, extra attributes within the <html> tag, <link> or <script> etc. For the doctype we advise you simply use <!doctype html> Within the <head> tag we recommend everything is removed apart from the <meta>, <title> and <style> tags specified below. <form> tags will be stripped out by most readers and will not work at all in any of the others. Using <meta> tags You should include the Content-Type <meta> tag as shown here: <meta http-equiv="content-type" content="text/html; charset=utf-8"> This ensures the correct character set is displayed in all readers. Mail filters also commonly require that this <meta> tag should be in place. Only include one Content-Type <meta> tag otherwise there will be problems displaying Special Characters e.g., For mobile device rendering we advise you use a <meta> tag to reset initial scaling where necessary: <meta name="viewport" content="initial-scale=1.0, width=device-width" /> And an important addition for Windows Phone devices: <meta http-equiv="x-ua-compatible" content="ie=edge" /> Should you wish to suppress ios detection of telephone numbers, include this ios-specific Format-Detection <meta> tag as below: 10
11 <meta name="format-detection" content="telephone=no" /> This will prevent ios devices turning phone numbers into instant-dial links and thus displaying them in the ios Mail default link style. see Setting external links on text and images CSS style formatting in s HTML s cannot have links to external stylesheets, and most desktop or web-based readers either remove or will only use a limited subset of CSS when placed in the <style> declaration in the <head>. There are some CSS workarounds that have been found worth including in templates to target specific readers whilst having no adverse effects on others. These will be mentioned in the pertinent sections. For example, single-cell tables with 100% widths are recommended for use where a stretching background colour fill is required for your . In order for this to work in Outlook.com webmail, it is recommended the following style declaration is placed in the <head> of the - otherwise, tables set to have 100% widths will collapse: <style type= text/css >.ReadMsgBody { width: 100%;}.ExternalClass { width: 100%;} </style> - see Adding background fills and images Another CSS style worth including: the following overrides most (but not all) readers default link colours: <style type= text/css > td a, td a:link, td a:visited, td a:hover, td a:active, div a, div a:link, div a:visited, div a:hover, div a:active {color:# } </style> 11
12 - see next and Setting external links on text and images Most mobile or handheld devices, however, do recognise CSS styles in the <head> and the use of these along with media queries are key to creating a responsive layout. - see display on mobile devices For consistent formatting of text and other content across all readers, though, we recommend the use of inline CSS styles directly around content as standard. - see Setting font styles in HTML templates HTML body attributes It is recommended that all default margins are set to 0 i.e. leftmargin= 0 topmargin= 0 marginwidth= 0 marginheight= 0 You should also set your s default text and link colours here. We recommend that all link variants (link=, vlink= and alink=) should be set to the same colour, as different link states are not recognised by all readers. Be careful that you do not set your default link colour to be the same as the background colour anywhere an automatically-generated fixed text link is likely to appear. For example if the view online or unsubscribe link is on a white background, setting white as a default link colour means that the recipient will not be able to see them. Any text hidden this way may cause the to be flagged as spam. Note that some online readers impose their own default link and text colours regardless. see Setting external links on text and images It is also useful to set a default font-family and font-size in the <body> as a fall-back for where tables are inserted that have no font styling set on them e.g. style="font-family:arial, Helvetica, sans-serif; font-size:13px;" 12
13 display on mobile devices If you are not designing your to be responsive on narrower viewports, it is recommended that a mobile shim graphic is used in the HTML template to ensure s scale correctly on mobile devices such as smartphones and tablets. NewZapp-designed templates commonly use a transparent 12px high.gif file set to be slightly wider than the width of the main . In the 4 example templates they are in the foot of the code and called Mobile_Placeholder_640px.gif. 12px high images are used as a minimum to avoid nasty gaps appearing in certain readers. see Images in HTML templates Mobile device readers then use this mobile shim as a minimum width when scaling your to fit on the screen. The ability to zoom in or out of the is not affected. If you are creating a responsive layout, it is recommended you see this series of blog articles on Essential responsive code and refer to the code used in the <head> of the 4 example templates. 13
14 Building templates using HTML tables Should you use an HTML <table> or <div> layout? Although <div> tags are required in several places for the NewZapp system, the overall structure must be created in tables. The simpler the table structure the better. Do not use merged cells. The <table> tag Each <table> tag needs to contain the following HTML attributes: width border (set to 0 - see later) cellpadding (set to 0 see later) cellspacing (set to 0 see later) e.g. <table width="650" border="0" cellpadding="0" cellspacing="0"> The align= attribute on a <table> tag should not be required when using 100% width singlecell tables for backgrounds, as the alignment should be set on the stretching table cell. Please note that support for inline styles placed inside the <table> tag is inconsistent in most desktop and web readers. The table row <tr> tag You can use as many rows as you like, but it is good practice to use as few columns within each table as possible, as some readers expand table widths uncontrollably when multiple columns are used. The table cell <td> tag For non-responsive s it is recommended that table cell widths (and heights where required) should be clearly defined in pixels. For responsive s it is only necessary to define pixel widths on tables and table-cells that require them for desktop layouts. On narrower mobile layouts generally reverting table widths to percentages and leaving widths off table cells gives best results. All table cells that contain a HTML element and/or text should have clearly defined horizontal align= and vertical valign= alignments set. Do not rely on the default alignment setting, as this varies from reader to reader. 14
15 Stretching background colour fills Where a stretching background colour fill is required behind or above/below your , use 100% width single-cell tables rather than placing a bgcolor= in the <body> tag, which can cause problems or be ignored altogether by many readers see Using colours in HTML templates Using table cell padding/spacing We do not advise the use of either HTML or CSS table padding or spacing these either give unpredictable results or are ignored in many readers. It is recommended that for consistent results, the following methods are used for creating padding within your layout: Empty rows with set heights for vertical padding - To work best across all readers we recommend using table rows by setting heights in the <td>. For best display in Outlook 2013, you also need to: o o o use in the cell <td> to help prop it open for rows 19px high or less you need to add an inline style with font-size and lineheight set to be the same as the cell height you also need to use -webkit-text-size-adjust:none; and -ms-text-sizeadjust:none; to prevent browsers from adjusting the font-size and line-height e.g. <td height= 12 align= left valign= top style= -webkittext-size-adjust:none; -ms-text-size-adjust:none; font-size:12px; line-height:12px; > </td> Please note that the inside the <td> is required for this technique to work. Also, the space in front of -webkit-text-size-adjust:none; is important. Empty columns with set widths for horizontal padding - Set-width graphics called shims may be required inside these instead of the non-breaking space in order to maintain thinner column widths where editable content may crush them down. Setting table borders HTML table border= attributes display unpredictably in many readers. 15
16 It is recommended that a combination of empty cells with background fills and nested tables are used if possible. e.g. to create a 3px purple border all round as shown: <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="150" align="center" valign="top" bgcolor="#663399"> <table width="144" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="144" height="3" align="center" valign="middle" style= -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-size:3px; line-height:3px; > </td> </tr> <tr> <td width="144" align="center" valign="top" bgcolor="#ffffff"> <table width="124" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="124" height="10" align="center" valign="middle" style= -webkit-text-size-adjust:none; -ms-text-size-adjust:none; fontsize:10px; line-height:10px; > </td> </tr> <tr> <td width="124" align="center" valign="top">text and image content here</td> </tr> <tr> <td width="124" height="10" align="center" valign="middle" style= -webkit-text-size-adjust:none; -ms-text-size-adjust:none; fontsize:10px; line-height:10px; > </td> </tr> </table> </td> </tr> <tr> <td width="144" height="3" align="center" valign="middle" style= - webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-size:3px; lineheight:3px; > </td> </tr> 16
17 </table> </td> </tr> </table> Setting inline style borders It is possible to use inline style borders on table cells provided it is a full border of a single colour and thickness. Please note that some readers may show a slightly different colour or revert the border colour to black. The border thickness must also be taken into account when calculating the cell width as part of the overall table width. This avoids issues in readers such as Outlook 07+. Style borders work best on single-cell tables. This is one instance where a shorthand style declaration seems to work correctly e.g. to create a 4px red border all round as shown: <table width="264" border="0" cellspacing="0" cellpadding="0" > <tr> <td width="256" align="center" valign="top" bgcolor="#f1f1f1" style="border:4px solid #FF0000;"> <table width="216" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="216" height="20" align="center" valign="top"> </td> </tr> <tr> <td width="216" align="center" valign="top">text and image content here</td> </tr> <tr> <td width="216" height="20" align="center" valign="top"> </td> </tr> </table> </td> </tr> </table> 17
18 Avoiding gaps appearing in Outlook 07+ This issue affects campaigns that have an unusually large amount of content. The Microsoft Word rendering engine used by Outlook 07+ places a limit on the height of content within each table and can insert ugly blank spaces where this limit is exceeded. With this in mind, using several tables one under the other to break up content makes it easier to avoid any one table getting overly long. Please note that this may conflict with another issue in ios mobile devices see below Avoiding grey background colour showing through on Android mobile devices The default background colour for the body of an in Android is a light grey rather than white. This colour will show through any table cells that do not have a colour set on them. It is recommended that a 100% width single-cell table is used as a container for the rest of the layout, with a cell background colour set of white #FFFFFF. Android s default grey background will show through uncoloured table cells Cell colours in ios will show through as border colours when a multi-cell table is placed on top. Avoiding unwanted coloured borders on ios mobile devices An additional issue is that the internal borders on multi-cell tables in an can show in ios devices. 18
19 These will be the colour of the background the table is sitting on, even if the border is set to zero. The only solution is to ensure that tables containing multiple cells that are meant to be the same colour are placed on an appropriately-coloured cell background. You may need to create a singlecell table for the purpose. There is no need to apply colour to the table s individual cells. 19
20 Creating a NewZapp HTML editable template If you are creating a NewZapp HTML editable template, the next step is to add the NewZapp custom tags and URLs to your layout. These will enable the template to have editable areas, advanced functionality and dynamic content once it is within and sent from the NewZapp account. Please download and refer to these 4 example templates Declaring a NewZapp editable HTML template At the very start of the code you need to add <!--editorversion_3--> for the NewZapp system to recognise the file as an editable template. Your structure should be contained in a 100% wide wrapping <table> with a single <tr> and single 100% wide <td> inside that. The100% wide wrapping table requires the following attributes: id="pagecontainer" class="editor_content" The 100% wide <td> inside requires the background colour to be specified (i.e. bgcolor="#ffffff"). This sets the background colour for the background and can be edited in the NewZapp system. You also need a <div> inside this <td> with the background colour repeated in CSS in the style attribute and id="page" i.e. <div id="page" style="background-color:#ffffff;"> The rest of your <table> based structure sits inside this <div> NewZapp custom view online link The NewZapp system offers a hosted online copy of each campaign for recipients who experience difficulties seeing it in their viewers. The link to this online copy is inserted wherever the [link] placeholder tag is placed. NewZappdesigned templates generally have these at the top of the design e.g. To view this online, [link]. 20
21 NewZapp will convert the [link] tag as the is sent to the words follow this link with a dynamically generated link to the online version of the . Please note the hyperlink text will always say follow this link but the text around it can be whatever you choose. NewZapp custom unsubscribe link By law all commercial campaigns must provide the recipient with a clear means of unsubscribing from the sender. The NewZapp system creates an automatic means of unsubscribing from the sending account using the following URL: custom placeholder tag ensures that the unsubscriber is removed from the correct NewZapp account. see Adding an HTML unsubscribe footer This URL can be used on fixed content in the HTML and Text version templates, or on editable text or image content with the NewZapp account. The NewZapp Forward to a Friend function The NewZapp system gives you the option of including a link in HTML s which allows recipients to forward a copy of the campaign to other addresses, along with a short text message. The forwarded also gives the new recipients the chance to subscribe to the sender s NewZapp account. These forwarded s are sent directly from the senders account as additional sends on the original campaign and are tracked in Track > Reports, however the forward recipient s address is kept anonymous until they subscribe. The link URL is: 21
22 The custom placeholder tag ensures that the recipient receives the correct campaign from the correct account. This URL can be used on fixed content, editable text or image content with the NewZapp account. This link works in conjunction with the [forwardtext] custom placeholder tag. Normally unseen, the [forwardtext] tag is only activated in forwarded s, and is used to show details of: the address of the forwarder, a short message from the forwarder, and a link to subscribe to the NewZapp account that sent the campaign The [forwardtext] tag must always be surrounded by a <div> or other element with the following class set in it: class="forward-text" Even if a Forward to a Friend link isn t fixed in an HTML template, it is a good idea to include the [forwardtext] custom placeholder tag somewhere in the HTML template so that you have the option of adding the link to editable text or image content if required later on. Defining fixed drop zones for inserting Blocks into a NewZapp HTML template The use of specific <div> tags define drop zones for all elements that you expect to change per campaign, such as: Date/Issue number Taglines/slogans Title A list of contents Headings and body content Contact information Specific hyperlinks Logos and images Adverts The drop zone <div> tag is placed inside a <td> - we recommend that inline styles should be set in case text content is added to this area in the NewZapp editor. see Setting font styles in HTML templates 22
23 The structure for a drop zone is as follows: <div class="editor_block_area"> <div class="editor_block_area_defaulttext"> </div> </div> You don t need to add anything inside the <div> tag. You only need one set of these <div> tags per drop zone you will then be able to drag and drop an unlimited number of Blocks into this area from the default selection in the Blocks panel - or you can create your own in the then save them to the Custom Blocks panel. Unless your design dictates otherwise, each editable area on a template will accommodate Layout Blocks, Text Content Blocks and Image Content Blocks to suit your campaign. For further ideas, see the NewZapp Portfolio and these 4 example templates. personalisation Particular details about each recipient may be included in the HTML and Text templates using the following standard NewZapp custom placeholder tags: [ address] includes the recipient s address [firstname] includes the recipient s first name [lastname] includes the recipient s last name [companyname] includes the recipient s company s name These details are derived from the subscriber database in the NewZapp account. Personalisation can be included in your design as a fixed element, or it can be added by the account user to an editable field within a template. Personalisation also works in the subject line of an campaign, can be passed along in link URL queries, and can even appear in ALT tags. If any of the recipient s details are not available, the custom tag will be replaced in their with a dash - by default. You can, however, define different default values for each personalisation tag in the NewZapp account s Settings > Preferences section. 23
24 It is also possible to create your own custom personalisation tags to insert additional data associated with your subscribers in Settings > Custom Fields. Creating a non-editable HTML template Rather than create dynamic areas for editable content, you can skip this step altogether and insert fixed text and image content instead. This means you can place text directly inside cells without using the <div> tags required for the NewZapp drag and drop editor. Depending on the complexity of your design it may actually be quicker to setup the basic structure of your in HTML, then create the entire body content from a single editable area using NewZapp. Experiment with an existing Basic template within NewZapp and decide which approach best suits your purpose. It is recommended that you retain the elements that use these other custom placeholder [link], [ address] All the personalisation tags may be fixed where required too. All other design advice stands for getting best results in all readers. - see also Testing your templates important guidelines 24
25 Using colours in HTML templates Adding colours to HTML s It is recommended that colour values themselves are defined using either the RGB standard or the Hexadecimal standard e.g. for Websafe Basic Red: Hexadecimal = #FF0000 RGB = rgb(255, 0, 0) NewZapp-designed HTML s and the NewZapp system use the Hexadecimal standard. The NewZapp colour picker Colours within the NewZapp editor are applied directly to text, as a highlight, or to table and image borders using the colour picker (right). The colours are defined using Hexadecimal ( Hex ). It is often useful when creating a HTML template to use the hexadecimal values of these 220 web-safe colours as a basis when setting colours. see NewZapp colour picker hexadecimal values Setting cell background colour fill Default colours for cell backgrounds are best set as the cells own HTML bgcolor= attribute e.g. bgcolor="#990000" - see Background fills and images Setting Text colour Default colours for both fixed and editable text may be set using the inline CSS color: attribute e.g. color:#ff0000; - see Setting font styles in HTML templates 25
26 Ensuring text has sufficient contrast against a background colour Web Accessibility Standards require a minimum level of contrast between the text and background colour, which may be enforced by some readers. With certain tonally similar colour combinations, the reader may change text colour to either white or black for better readability. One way to ensure you pick a colour combination with sufficient contrast is to use a contrast checking tool such as WebAIM. Setting font styles in HTML templates You cannot include links to external stylesheets in HTML s and only a handful of desktop readers (web readers are better but have a few notable absences) will recognise an internal stylesheet in the <head> of your document. It is recommended that Inline CSS styles are used within <td>, <a>, <span> or <font> tags only. Text formatting In most instances you will need to insert an inline style declaration within a table cell <td> to define the text formatting e.g. <td width= 300 align="left" valign="top" style= font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#336699; font-weight: bold; font-style: italic; > Do ensure all required style attributes are included, such as font-family color font-size font-weight text-decoration Many readers will otherwise replace any missing attributes with their own defaults. All HTML and CSS attributes must use double quotes ( ) rather than single quotes ( ) around their values. Any nested styles that need them should then use single quotes 26
27 e.g. style= font-family: Lucida Grande, Arial, Helvetica, sans-serif; font-size:13px; color:#336699; not style= font-family: Lucida Grande, Arial, Helvetica, sans-serif; fontsize:13px; color:#336699; Commonly used web-friendly fonts Although any font can technically be added to a CSS inline style, it cannot be guaranteed that all recipients will have it installed on their computer or mobile device. In addition, it should be noted that some readers (e.g. Yahoo! webmail) won t necessarily display fonts correctly even when the font in question is actually available on the recipient s machine, instead substituting their own font. see Advanced rendering issues It is recommended that inline CSS font-family: declarations should use web-friendly fonts that are commonly installed on all web devices. NewZapp currently has the following set of standard web fonts available on the editor toolbar for the styling of content when creating an campaign with an editable template. These are a good starting point for font families used in HTML s: Arial Arial Black *see special note below Comic Sans MS Courier New Georgia Impact Tahoma Times New Roman Verdana - see also Typical web-friendly font--families, Fonts commonly installed on current operating systems At the very least, the style declaration should always have web-friendly fallback fonts included so that you can be sure of how the text will display to all recipients e.g. style= font-family: Helvetica, Arial, sans-serif; 27
28 or style= font-family: Georgia, 'Times New Roman', Times, serif; Note that fonts with one or more spaces in their name must be contained within single quotes. Ensuring Arial Black displays in all readers Some readers will not display the Arial Black font, instead reverting back to Arial Regular. It is therefore recommended that Arial Black should be generally avoided as a default font. However, if Arial Black is really needed a good workaround is to also set font-weight:900; in the CSS inline style so that Arial Regular will become as bold as possible if shown e.g. style= font-family: Arial Black, Arial, Helvetica, sans serif; fontsize: 18px; font-weight:900; Where Arial Black is shown, the extra font-weight is barely noticeable. Commonly used web-friendly font sizes Whilst you can technically set the font-size to be anything you like, for consistency, deliverability and readability you should be aware of the following: A font-size of 10px or under is liable to have inconsistent formatting in different readers many adjust letter spacing or line-height, some even increase the size to 11px by default. With font-sizes above 18px, spam filters can score negatively if they think you are using shouting text, so it d a good idea to restrict any use of larger sizes to shorter headings if possible. It is recommended that inline CSS fonts should be defined in pixel units, as other units can give inconsistent results. The NewZapp editor currently offers the following standard web-friendly font sizes on the toolbar for text added to editable areas. It is recommended that these are followed when setting default font-sizes for fixed and editable text areas in your HTML template. 8px 9px 10px 11px 12px 13px 14px 16px 18px 20px 22px 24px 30px 36px 48px 72px 28
29 Please note that certain font-sizes are omitted from the list - experience has shown that these do not render consistently across all readers. In NewZapp, you can always reset any formatting applied to editable content back to default values by using the remove formatting button. Changing text attributes within a sentence To change text attributes mid-sentence, it is recommended to use <span> or <font> tags e.g. <td width= 300 align="left" valign="top" style= font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#336699; >Lorem ipsum dolor <span style= color:#ff6600; font-weight: bold; >sit amet</span>, consetetur sadipscing elitr</td> - See also Setting external links on text and images for applying inline styles to anchor tags. Preventing mobile devices from enlarging your text Mobile devices, especially smartphones, will often increase the size of text in s to make them easier to read. If it is crucial to your design that this should not happen, for example if increased text size in particular fields would break apart the design, you should also include these attributes in the inline style: -webkit-text-size-adjust:none; -ms-text-size-adjust:none; e.g. style= -webkit-text-size-adjust:none; -ms-text-size-adjust:none; fontfamily: Arial, Helvetica, sans-serif; font-size:13px; color:#336699; Please note that these style rules need to be listed first and have a space before each hyphen to work correctly. 29
30 Images in HTML templates Recommended image file formats Web-standard 72dpi.jpg,.gif or.png image file formats should be used for best results in all readers. Other file types (e.g..bmp or.tiff) are not supported by all readers. Please ensure the Colour Mode for images is set to RGB rather than CMYK. Images using the CMYK colour mode will still work but may show colours inconsistently as this mode is for print use. To avoid long image download times, it is advisable to optimise your images to the smallest possible file size whilst still maintaining a good quality. Typically the.gif format is best for images containing text and areas of flat and crisp-edged colour e.g. logos, vector graphics. The.jpg format is best for images with smooth and subtle graduations in colour e.g. photographic imagery, 3D models. The.png format is best for images that would otherwise have been created in.gif format, but that use transparency, e.g. drop shadows, rounded corners. Do not use spaces in image names as the images will then not display at all in some readers. Sourcing images from within system.newzapp.co.uk Every NewZapp account comes with hosted space to store images and it is highly recommended that this is taken advantage of when building HTML templates. When creating your template simply save all the images in the same folder as your HTML file and upload these at the same time. Within your template you need to use relative paths for your images as the template upload system will automatically save your images in your account and create the correct paths to them in your template. e.g. src="example.jpg" Sourcing images from a location outside system.newzapp.co.uk It is possible to source fixed template imagery (i.e. not for use in editable areas) from an online location of your choice. 30
31 Be aware, however, that will you need to ensure the images remain there for as long as they are needed and you need the full URL to use as the image source path. Correct image dimensions When inserting fixed template images ensure that the image has the correct HTML width= and height= attributes e.g. <img src= example.jpg width= 100 height= 100 /> Having the correct width and height attributes set on each image prevents long ALT text content from distorting image placeholders in the preview pane of some readers (e.g. Outlook 07+). Always ensure your images are used at their correct original dimensions. Resizing an image by altering the dimensions in the HTML code will not be recognised by some readers. Many will revert back to their original size by default, thus breaking your layout. Tables and image placement For best results, each image within a NewZapp HTML template should always be contained within its own individual HTML table cell, particularly if they are part of a group of images that need to be flush and without gaps. Avoid placing several images in the same cell, as wrapping onto the next line may occur. Avoiding gaps appearing above and below images In Outlook 2013 if an image is 19px tall or less then the height of the table cell it is placed in will be increased to be at least 19px, placing space above the image. Additionally in readers like Lotus Notes if an image placed in a table cell is less than 12px tall, a gap will be added underneath or above it to make the height of that cell up to 12px. The best way to allow images with heights of 19px or less to display consistently in all readers is to: always ensure your images are at least 12px high use the method as outlined below: o set the image height in the <td> 31
32 o add an inline style with font-size and line-height set to be the same as the cell height e.g. <td height= 12 align= left valign= bottom style= fontsize:12px; line-height:12px; ><img src= example.jpg hspace="0" vspace="0" border="0" width= 600 height= 12 /></td> Other readers (e.g. Gmail, Hotmail) require an inline style fix to be added to each <img /> tag within a <td> to prevent white gaps appearing below them: style= display:block e.g. <td with= 100 height= 100 align= center valign= top ><img src= example.jpg width= 100 height= 100 style= display:block /></td> This is particularly important if you are slicing up an image in order to incorporate separate hyperlinks on each slice and you need the finished group of images to be flush and without gaps. Images for use in editable areas If you are designing the template to be used by one of your clients, you may wish to consider your client s image editing expertise. It may be useful to provide the client with stock images e.g. horizontal and vertical separators or buttons designed as calls to action. Upload these stock images directly into the client s NewZapp account Image Manager. Try to name images so they are easily found in the Image Manager e.g. banner_01.jpg or button-more-info.gif Do not use spaces in image names as they will not be displayed in some readers - see Testing your templates important guidelines 32
33 Background fills and images Background fill colours and images are as essential a part of any HTML design as fixed images and text content. They allow you to make the much easier to read and help direct attention to specific messages you want to get across. Whilst flat colour fills set in tables <table> and table cells <td> are supported in most readers, the support for colour fills set in any other HTML element is patchy. The same is true of background images - some readers do not display them at all, or will display them in only one element. Setting a flat background colour fill It is recommended colour fills are set in the <table> or <td> for best results rather than any other tags e.g. <body>, <div> or <tr> Many readers ignore background colours defined in the <body> tag, and some even apply their own default colours (e.g. mobile devices). If you need to have an overall background fill colour for your , using a 100% width stretching single-cell table as a container gives the most consistent results. Use the HTML bgcolor= attribute in <table> or <td> tags rather than the inline CSS background-color: attribute. In <div> tags you can use the inline CSS background-color: attribute, but be aware this is not supported in all readers. It is recommended the colour is set as a Hexadecimal value (e.g. #FF6600, #CCCCCC). Do not use the shorthand version (e.g. #F60, #CCC) as many readers will not recognise it. You can set any colour, but be aware that some shades are not supported by some readers - see NewZapp colour picker hexadecimal values for a list of the standard web colours used in NewZapp editor colour pickers. 33
34 Using background images in HTML s As mentioned, you need to bear in mind that readers (including Outlook 07+ and Lotus Notes) do not support background images set in <table>, <tr> or <td> tags. Even more readers do not support background images set in the <body> tag. Where possible, it is recommended to use fixed images and graphics inserted into table cells instead. see Images in HTML templates If you need to use background images in tables, always insert them into a <td> tag. Think carefully about using them in cells that are expected to change in size (e.g. in an editable field). It may be necessary to use an extra-long image that is gradually revealed, or a shorter image that will repeat vertically or horizontally. Set the image in the HTML background= attribute for the <td> tag. The inline CSS background: is not supported in many readers. Bear in mind also that inline CSS attributes that control how background images repeat e.g. style= background-repeat: repeat-y; are not widely supported either. In all cases always set a suitable flat background colour fill for each table cell to fall back to if images are not displayed. Setting a single overall background image in a HTML Bearing in mind the above, it is still possible to set a single overall large or repeating background image effect so it appears in Outlook 07+ and Lotus Notes as well as other readers. In the first instance, set an image as the background of the <td> for a single-cell 100% width stretching table. This will be displayed by the majority of readers but ignored by Outlook 07+ and Lotus Notes. Set a similar image as the background of the <body> tag. This will tend to be ignored by most readers but shown by Outlook 07+ and Lotus Notes. 34
35 Please note however that there are some readers that will show both images, with the background image in the table <td> sitting on top of the one in the <body>. Background image in table cell <td> You will therefore need to adjust one of the background image versions slightly to allow for any slight mismatch between the two methods that tends to occur. Background image in <body> tag Test thoroughly in multiple readers to make sure you are happy with the results see Testing your templates important guidelines 35
36 Setting external links on text and images The default link colour for the whole is set in the <body> tag. This means that any fixed or editable text or images that have links applied to them will use this colour in the first instance to colour the link text, link text underlines and image link borders. However, many readers will try to override any text link characteristics that may be defined in the <body> tag and use their own formatting (e.g. blue underlined text, different font-size, different font-family etc). This is in effect what the Colour Picker does for editable text within the NewZapp editor. see Using colours in HTML templates Setting link styling on text content For text links it is recommended that full inline CSS styles should be applied on the <a> tag around each fixed or editable piece of text too, even if it is already set on the <td> for that content. The inline CSS for text links is the same as that for any other formatted text area, except that it is placed within the <a> tag itself and has an extra text-decoration: attribute to define whether or not the link has an underline e.g. <a href= style= font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #0000FF; font-weight: bold; text-decoration: underline; target= _blank >example link</a> It is important to include all the attributes within the style declaration to prevent readers inserting their own. Setting text-decoration:underline; keeps the link underline the same colour as the link text. You can of course also set this to be text-decoration:none;. It is recommended that all links to external web pages have a target= _blank attribute. This is not really necessary for links (mailto:). Setting link styling on dynamic content You cannot set a fixed text style on for custom placeholder tags like 36
37 [ address], [forwardtext] using the above method as they don t actually have an <a> tag until they are replaced by a dynamically-generated link on sending. One workaround that works for most readers is to place this <style> declaration in the <head> of the HTML template: <style type="text/css"> td a, td a:link, td a:visited, td a:hover, td a:active, div a, div a:link, div a:visited, div a:hover, div a:active {color:#808080} </style> You will need to update the color:# with the hex value of the link colours in the <body> tag. This style declaration targets any links that lie within a <td> or a <div>, but be aware that this does not work for all readers. Preventing links from appearing on telephone numbers A growing trend amongst readers that are also aimed at smartphones and other mobile devices is that they now detect and convert telephone numbers into hyperlinks that can be used for instant dialling. These are formatted the same way as a text link using the default link styling. If you do not wish telephone numbers to display as underlined links in this way, setting an empty (un-linked) <a> tag (no href= ) around the telephone number often works. The full inline CSS styling will then need to be inserted as previously described for within the <td> e.g. <a style= font-family: Verdana, Arial, Helvetica, sans-serif; fontsize: 13px; color: #0000FF; font-weight: bold; text-decoration: none; > </a> The text-decoration:none; is important to stop the telephone number appearing to be an underlined link. However, in many mobile devices it will still actually be a smart link when clicked on. 37
38 You will also need to have this style in the containing table cell <td>, otherwise readers like Outlook will revert to using default font styles e.g. Times New Roman e.g. <td align= right valign= top style= font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #0000FF; font-weight: bold;><a style= font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #0000FF; font-weight: bold; text-decoration: none; > </a></td> Mobile devices using ios also detect and convert telephone numbers into hyperlinks that can then be used for instant dialling. However, the solution shown above does not work for these. As mentioned in previous sections a slightly different workaround is required in this case - you will need to also insert this Mac-specific <meta> tag into the <head> of the template: <meta name="format-detection" content="telephone=no" /> 38
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
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
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
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
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
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
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
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
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
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
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
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.
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...
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
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
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,
{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:
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
Caldes CM2: Marketing Emails Support Document v1.12
Caldes CM2: Marketing Emails Support Document v1.12 Caldes Enterprise software can be used to send out marketing email. Due to the nature of these being bespoke designs, Caldes make a one off charge to
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,
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
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
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 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
Code View User s Guide
Code View 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
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
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
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
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
WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
Smartphones and tablets: If you have a data plan, use the SMTP server setting for the company that provides this service.
ARTSPHERE USER MANUAL Hosting for versions 5.0 and 5.1 The hosting control panel is where your website is located. We refer to this as the cpanel. To access the cpanel add /cpanel to your domain name (for
Create Your own Company s Design Theme
Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to
Sage Accountants Business Cloud EasyEditor Quick Start Guide
Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing
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
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
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
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
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
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
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
Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
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
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
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
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
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
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
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
A send-a-friend application with ASP Smart Mailer
A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick email about
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
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 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
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
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
Creating, Installing & Using Email Signatures Technical Considerations By Rex Weston
Creating, Installing & Using Email Signatures Technical Considerations By Rex Weston There are three approaches typically taken to creating an email signature: 1. Create it in Microsoft Word, and then
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
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:
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:
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
Interspire Website Publisher Developer Documentation. Template Customization Guide
Interspire Website Publisher Developer Documentation Template Customization Guide Table of Contents Introduction... 1 Template Directory Structure... 2 The Style Guide File... 4 Blocks... 4 What are blocks?...
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
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?
Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint
Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint While it is, of course, possible to create a Research Day poster using a graphics editing programme such as Adobe
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,
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...
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. 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.
Digital Marketing EasyEditor Guide Dynamic
Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury
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
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.
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
KOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
The Birth of Responsive Email Templates
The Birth of Responsive Email Templates The Birth of Responsive Email Templates The adoption of mobility solution at the enterprise level is simply becoming more relentless in order to engage more and
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
Basic Excel Handbook
2 5 2 7 1 1 0 4 3 9 8 1 Basic Excel Handbook Version 3.6 May 6, 2008 Contents Contents... 1 Part I: Background Information...3 About This Handbook... 4 Excel Terminology... 5 Excel Terminology (cont.)...
Creating an Email with Constant Contact. A step-by-step guide
Creating an Email with Constant Contact A step-by-step guide About this Manual Once your Constant Contact account is established, use this manual as a guide to help you create your email campaign Here
File types There are certain image file types that can be used in a web page. They are:
Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner
Tips and tricks with Text boxes in Mahara
Tips and tricks with Text boxes in Mahara This tutorial assumes that you know how to drag a Text box block down to your page content area. Contents 1. The parts of a Text box... 2 2. What each of the buttons
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
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:
On the Email Marketing home page, click the arrow to expand the Admin Tools area. Admin Tools
Email Marketing How-To Document November 2010 Email Marketing Admin Tools On the Email Marketing home page, click the arrow to expand the Admin Tools area. Admin Tools Global Email Settings Design Templates
HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout
CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading
Creating an Email with Constant Contact. A step-by-step guide
Creating an Email with Constant Contact A step-by-step guide About this Manual Once your Constant Contact account is established, use this manual as a guide to help you create your email campaign Here
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
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
Slicing and Coding the Navigation Background in CSS
CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step
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
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 joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
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
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver
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
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK
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 & DEVELOPMENT THE WHAT, WHY & HOW
RESPONSIVE EMAIL DESIGN & DEVELOPMENT THE WHAT, WHY & HOW December 2014 SUSANNA OLIVER Web Developer Denver Fargo Minneapolis 701.235.5525 888.9.sundog FAX: 701.235.8941 www.sundoginteractive.com Overview
Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots
Updated version September 2015 All Creative Designs Cascading Style Sheet (CSS) Tutorial Using Notepad Step by step instructions with full color screen shots What is (CSS) Cascading Style Sheets and why
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...
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
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.
How To Create A Campaign On Facebook.Com
Seriously powerful email marketing, made easy Table of Contents DOTMAILER QUICK START GUIDE... 3 Main Screen... 4 Getting Started... 6 STEP 1: CAMPAIGN SETTINGS... 7 STEP 2: CAMPAIGN CONTENT... 8 Editing