HTML/CSS @ Company X (Not guaranteed to be 100% current but a comprehensive overview.)

1) HTML Overview 2) HTML that is common to all components (Component shell) 3) CSS 4) LESS 5) Procedures for Integrating New Newsletter Variation and Designs 6) Image Specifications

(1) HTML Overview The HTML/CSS at CompanyX is particularly complex because of the way it is pulled out of our unique .NET web app, combined with data items from our Content Management System and then delivered to the ~20 various email clients it has to be rendered in. Add to that the CSS schema for choosing between 15+ color variations per theme, and it can be difficult to manage, especially considering that each change should be visually checked in 3 browsers and ~20 email clients (via Litmuss or similar service) AND that has to be done for the Flags variation and at least 2 non-Flags variations (the CSS is vastly different for Flags and fairly different for Tundra/RedWhiteBlue). We currently support about 15 different landing pages for each client so in order to truly test a global component, those 15 pages should be set to Flags and opened in IE, FF, & Chrome. THEN, set to Tundra and done again. Then another variation like Tundra and done again. That is a minimum of 135 visual impressions, not counting the litmus tests. Most components share class names for common elements like Header & Subheader. The default CSS just addresses .Boxes2 .Header{color:#ff0000;} ( like H1 might normally used.) The definitive source for how newsletter HTML works in email clients is CampaignMonitor.com. In short, our HTML has these characteristics:

● Stucture is built with nested tables ● Divs are used only for designating sections for style classes and the like. In other

words, the Divs don’t have 2 spacial properties assigned. ● All cells have absolute widths assigned and some have heights if they are spacers.

(Careful where borders are used as they take up pixels.) ● For background images to work, a bunch of IE exception hack-code is added for

Outlook as documented on CampaignMonitor. Currently, we only use background images for the overall email. Because we need vertically gradient bg

images, but we can’t use ‘no-repeat’ we have to use very tall bg images…..taller than a newsletter could possibly be. The images are ~10px wide and ~4000px high!

● There is a similar solution for using BG images in table cells, but I haven’t been able to get it to work yet.

● FLAGS is a bastard theme that requires a lot of overrides in the CSS to make a Boxes2 variation look like that. The component HTML is also punctuated by ASP conditional statements that say ‘If Flags, then use this html snippet, else use this’. This is not a desirable solution but it works until Flags is killed.

● Occasionally we use regular HTML comments but since they take up valuable file size, we use ASP comments that are not rendered in the Output. <%-- --%>

● File Size: Gmail only renders the first 100k of an email, then it breaks the newsletter and starts displaying html code…so some of the less desirable traits of the html (like extreme nesting) are due to trying to save file size.

●

(2) Component Shell HTML

Most components are encased in similar code that writes the top cap, side borders, and bottom cap. The whole thing is surrounded by a div with component name as class. The image URL has an ASP variable in it that gets replaced by the variation name at run time. Here is a diagram and code samples below:

Here is an example: <div class="ComponentName"> <%-- Top Cap --%> <table border="0" cellspacing="0" cellpadding="0">

<tr> <td width="10" class="ShellMarginLeft"> </td> <td width="180" class="ShellCapTop">

<img

src="http://static2.CompanyX.com/Images/Themes/Boxes2/<%= WebApplication.Utils.AcmUtils.getStyleSheet() %>/CapTop180.gif"

width="180" height="10" style="display:block;"/>

</td> <td width="10" class="ShellMarginRight"> </td>

</tr> </table> <table cellpadding="0" cellspacing="0" border="0">

<tr> <td width="10" class="ShellMarginLeft"> </td> <td width="1" class="ShellBorderOuter"> </td> <td width="1" class="ShellBorderInner"> </td> <td width="8" class="ShellContentPadding"> </td> <td width="160" class="ShellContentArea">

<!-- Table 160 wide goes here with component content-->

</td>

<td width="8" class="ShellContentPadding"> </td> <td width="1" class="ShellBorderInner"> </td> <td width="1" class="ShellBorderOuter"> </td> <td width="10" class="ShellMarginRight"> </td>

</tr> </table> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" class="ShellMarginLeft">

</td> <td width="180" class="ShellCapBottom"> <img src="http://static2.CompanyX.com/Images/Themes/Boxes2/<%= WebApplication.Utils.AcmUtils.getStyleSheet() %>/CapBottom180.gif" width="180" height="10" style="display:block;"/> </td>

<td width="10" class="ShellMarginRight"> </td> </tr> </table> </div>

(3) CSS- See CampaignMonitor.com/support for what CSS works in email clients. CSS is used to style everything. CSS works best in emails if it’s all put inline, so we use a program called Premailer that moves styles inline…that way you can develop one big stylesheet in the normal manner, then have it automatically put inline just before sending. We also allow for the possibility that a dealer may want to use a certain variation but with a few exceptions (i.e., ‘I like the DarkBlue variation but I want my headers green’ CSS API- Sometimes the art dept or clients make pages that appear inside our templates. They can use these class names to pull in colors that will match the Variation:

//These FONT class names also have size and fonts associated so you might have to overwrite certain properties with CSS. .Header .Header a .Subheader .Subheader a .BodyText .BodyText p .BodyText li .BodyText a .BodyText a:hover .MainImage ………. ( border-color!) .FontDefault ……………… (font-family: Arial;) .BackgroundImageEmail …………..(this is a bg image) .BackgroundImageWeb .apiNLBackgroundColor .apiNLBackgroundColorBG .apiPrimaryLight //NL overall Background

.apiPrimaryLightBG //NL overall Background

.apiPrimaryMedium //top banner

.apiPrimaryMediumBG //top banner

.apiPrimaryDark

.apiPrimaryDarkBG .apiSecondaryLight .apiSecondaryLightBG .apiSecondaryMedium .apiSecondaryMediumBG .apiSecondaryDark .apiSecondaryDarkBG .apiTertiaryDark .apiTertiaryDarkBG .apiTertiaryMedium .apiTertiaryMediumBG .apiTertiaryLight .apiTertiaryLightBG .apiAccent //Bullets and coupon price, etc. .apiAccentBG //Bullets and coupon price, etc. .apiGreyDark .apiGreyDarkBG .apiGreyMedium .apiGreyMediumBG .apiGreyLight .apiGreyLightBG //VeryBright usually means white so far & dark is black. .apiVeryBrightBackground .apiVeryBrightBackgroundBG .apiVeryBrightText .apiVeryBrightTextBG .apiVeryBrightBorder .apiVeryBrightBorderBG .apiVeryDarkBackground .apiVeryDarkBackgroundBG .apiVeryDarkText .apiVeryDarkTextBG .apiVeryDarkBorder .apiVeryDarkBorderBG

(4) LESS LESS is a CSS compiler that allows you to get slightly object-oriented when designing CSS. It allows operators too so many of our gradient colors are calculated from a single input color value. All the rules set forth in the LESS files are compiled by the developer into one single CSS file for use on the web and emails. So we don’t actually write CSS! We write LESS code, which is similar but more involved, and the LESS compiler puts out CSS. Some parts are for reading only and some parts are able to be changed. See the LESS diagram below for a detailed description. (Diagram is also available as a more readable Visio drawing.)

(See Diagram on page 2)

(4) Procedures for Integrating New Newsletter Designs in the CompanyX System (The documentation below is helpful but basically, if you want to make a new variation you must: - Create a folder with the new name under Boxes2 in CME -Create 2 .less files in that folder named ColorDeclarations.less & ColorCSSOverrides.less and - immediately go to Advanced Save Options and select US-ASCII… less files must be set to this in order to work. -Copy the code from some other (similar) ColorDeclarations file and paste into the new file and repeat with the other new file. The Declarations file is where you input hex values for your new Variation and change the BG image, etc. You can also override a less variable and all its instances here, at the top. This file becomes the 1st part of the combined less file that is compiled. The ColorCSSOverrides.less file is where you can put either straight CSS or less code to override ANY assignments made by the rest of the code. This file becomes the 3rd part of the combined less file that gets compiled. (The ColorCommonUses.less file is located in the Common folder and becomes the 2nd / middle part of the combined less file that gets compiled. This part should not be changed…it is the constant that makes new variations automatic.) -NOW, compile the LESS files for your new variation and that will automatically create a CSS file with correct name in the Boxes2 folder and is ready to be used locally. (You must check in your changes and Lance must publish those changes in order for them to work on live sites. HOWEVER, the newly created CSS file may not show up in the app/project since it was created outside the app by Premailer So, Right-Click on the theme folder (Boxes2) and click Add…Add existing Item, browse to the AppThemes folder and find the CSS file that was just created when you compiled the Less file. Now it will be included in the project. click the Show All Files button. Then find the file and Right Click to ‘Include In Project’. Then you can check it in.)

-Theme Graphics- create a new folder with the Variation name on the static2 server via FTP. Start by copying all the files in another variation folder into this new folder. Then you will see all the skin-graphics show up on the page. The may be the wrong color though, so you know what to do from there. -Finally, once you have created a new variation, a dealer might want to use it but hacve a couple of things changed… like they might want different Header colors. ) An additional, dealer/variation specific stylesheet can be added to the app inside each variation folder in a folder called DealerOverrides. The name of the CSS file MUST be exactly as the dealerID in CME (the top field in DealerInfo) i.e., hondaelcerrito.css . It is linked to AFTER the main stylesheet in the HTML but, more importantly, the Premailer adds the dealer’s overrides into the process so they make it into the inline styles. Definitions : Master Page- The outer shell of a design that holds everything together. The header and footer blocks are included here as well as the middle-Template grid which, in turn, will hold the content Components . Template- (aka, Middle Template)- typically a 1, 2, or 3 column grid that lives inside the Master Page and contains the content Components . Components- Small blocks of content, such as a coupon, article preview, or promo, that live inside one of the spaces available in the Template . Theme- A term used to describe the overall design from a structural perspective. A new Theme will always have its own unique Master Page , Template and Component set... a ‘whole package’, if you will. A new design does not necessarily dictate a new Theme. Conversely, new designs should try to use existing themes. (A Theme may have several Variation s.) Examples: Ribbons Galore, or Boxes. Even if existing components would work in the new design, we will make copies of them to go into folders pertaining to the Theme . Variation- A Variation is applied via CSS stylesheet and is similar to a color-scheme or ‘skin’ except for it can contain other information such as minor width adjustments and image swapping info. It is a variation of the Theme . Examples: Sunset Ribbons, Blue Steel ribbons, Mardi Gras boxes, Christmas boxes. Wire-Frame- An initial block-level diagram or mock-up of a new design, typically created by artists. Email vs. Web version- The web version of the newsletter typically has 1 or 2 additional columns added to the email version. The email version is exactly the same as the inside of the web version, (with the exception of the table of contents, or ‘in This Issue’ component, which migrates from the inner email-columns to one of the outside

columns in the web version which, incidentally, significantly shortens the column that it escaped.) Design, Designer- Art by artists. A design may be a mock-up at any stage of a Theme or Variation . Coders, Coding, Code – HTML (front-end) and C# (back-end) programmers writing code. Build, Builder- The marketing dept ‘builds’ newsletters by uploading content and relating the all the parts. A ‘Build’ is a completed newsletter that’s ready to send.

1) Predesign- Artist embarks on creating a new design with these considerations in mind:

a- New Templates needed? Is there an existing template/schema that is close enough to what I want to design that I might be able to use that template rather than forcing the need for all new components, etc? (after 6-10 NL designs, we expect the demand for new HTML to slow down as there are only so many ‘wireframe’ structures possible in email. After that, artists will probably try to be creative within existing wireframes. This is just an educated guess though.)

b- Use Existing Image Sizes? When possible, artists should try to keep image sizes consistent with what assets are already available. (i.e., coupon thumbnails are 145x145, or 225 x 225.) Otherwise, a new image storage folder is need and artists need to fill it with properly sized versions of existing (& future) inventory.

c- HTML or graphic-based components? When possible, content blocks should separate text from images so text can come from a field in CME. If the design is too fancy, the content block has to be a graphic in its entirety.

2) Stage I Mock-Up Delivered- A very basic mockup/wireframe should be delivered in conference with HTML person. An Email version AND a Web version should be developed in tandem to minimize conflicts between the two that are systemically impossible to resolve. The overall structure is the concern here because there are 3 layers of nesting involved to achieve one whole design and the designer needs to keep these in mind from the start. Based on the Stage I mock-up, this information should be delivered to the designer: a- The widths of the outer master page, middle template, and inner components. b- The scope of flexibility within these widths that might be affected by the Variation . c- The various image sizes already available to the artist for headers, and coupons, etc.

3) Stage II Mock-Up Delivered- Decision time. Is this new design simply a Variation on an existing Theme , or does it dictate a new Theme ?….there is no in-between…. There will either be a completely new Theme (including all new Master Page, Template, & Components) or the designer will use the stylesheet to alter an existing Theme’s colors and decorative images, thus creating a new Variation . Decisions made at this point include: a- Will there be a need for a new Theme ? If so, what is its name and what is the name of the initial Variation ? b- What are the overall width dimensions of each nested layer? c- Are their any conflicts between the outer edges of the email version and the inner edges of the containing web version that need to be addressed? (This stage is a good opportunity for cross-training dialog regarding CSS constraints in email.) 4) Stage III- ‘Webify’ the final Mock-Up- If a new theme is being created: a- The artist delivers the ‘final’ mock-ups for both email & web versions of the newsletter, as well as properly sized images. b- The front-end team begins to build the Visio blueprint (see diagram) that represents the html table structure that needs to be created for all the parts. Final widths are calculated in this blueprint as accurately as possible before coding begins. c- HTML / CSS Code is written. d- Art Department is made aware of an need to create new image standards or folders full of newly sized inventory. 5) Marketing review/briefing. Any special implications are discussed with the marketing team that will be building the newsletters in case there is anything that might require procedures outside the norm. Design notes can be compared at this time. (i.e., size of headers, color of links.) 6) Testing. An email should be sent from CME with the new design and tested in all clients, etc. Then, marketing should feel free to build and send newsletters with the design. 7) Artists can create new Variations at will by changing the CSS stylesheet and creating any decorative images.

(6) Image Specs These specs are not necessarily up-to-date. If the images used are too big, it will break the HTML layout and there is nothing you can do about it. Spreadsheet that accompanies this section: Z:\Marketing\Documentation\GraphicsSizes12-6.xlsx Images: Ideally, images should have their height & width in their name and image types in CME would be named after the image widths. 3 categories of image: Dealer Specific, Universal Component Content, & Theme Graphics Dealer Specific DEALER SPECIFIC IMAGES- Kept in CME in Images folder under each dealer ========================================================================================== Headers Boxes2 (and all future themes) Email: 600 px wide (around 125px height- flexible) Web: 1000 px wide (around 125 height) Has a separate TAN top cap with gradient that needs to be matched in each header! --------------- Dealer Logo Printable coupon 114 px w X 40 px high (at least, that is the dimensions of the one I looked at...need another look at the html) --------------- Maps 160, 350, 560 (EMAIL only images) Map images show up in EMAIL only as they are interactive Google maps in the web versions of the component. Widths are fixed, heights are not. (map images are shared between themes even though the html in each theme has different width-spaces available. So, the 350 map has a little extra space around it in Boxes and the 160 has some extra space around it in Ribbons. (560 is also used in printable coupon) -------------------

PromoImage & ImageMap widths 180, 380, 580 (when artists make a component that is primarily an image, they have to account for the 10px margins built into the theme, but then they can do what they want with the rest, so these sizes are 20px narrower than the components column widths. They still will need to add margins in the image content to match the theme. (Ribbons has only one PromoImage component and its width is 348 and bad style code... I suspect/suggest it is never used) Universal Component Related STATIC IMAGES- USED IN CME BY MANY DEALERS- Kept in CME at static.CompanyX.com/Static Content/Images/... =============================================================================================== Coupons, Article Preview, Newsletter Content, Promos,... 145 x 145 ( these appear everywhere) 225 x 225 (may be used in full-page versions of articles, printable coupons, etc.) Social Media Images links (thumbnail sized logos) 50 px x 50 px chicklets-- around 25px square. they're all displayed differently now. Category Separators (headers like 'Articles') Tundra has grey background colors, all other Boxes themes have Tan. 380 px wide ( 26px high ) ex. http://static.CompanyX.com/static/Images/Separators/Grey/LocationSeparator-Grey-380.jpg 580 px wide ( 26px high ) ex. http://static. CompanyX.com/static/Images/Separators/Grey/LocationSeparator-Grey-580.jpg Tiny brand logo 75 wide X 65 high (shows in printable coupon...currently a 'small' logo resized via HTML but should be exact images) Brand logo in header 112x98 (gif) I think these are incorporated (photoshopped) into header images but aren't actually used on their own. Brand logo 195h x 170w (gif) I don’t' know what these are used for. Theme Graphics

Static Images related to theme designs like component caps and background images, etc. =================================================================================================== Header caps Boxes- 600w X 9h (height is flexible) 1000w X 9h CAUTION: this web header cap has a gradient that must match the header image.... ------------ Component caps- Theses are as wide as the visible component but usually have 10 pixels of html space on either side 180w X 10h ex. http://static2. CompanyX.com/Images/Themes/Boxes2/DarkGrey/CapTop200.gif 380w X 10h ex. http://static2. CompanyX.com/Images/Themes/Boxes2/_Default/CapTop380.gif 580w X 10h ex. http://static2. CompanyX.com/Images/Themes/Boxes2/Orange/CapTop580.gif ------------ Quicklinks caps- These have gradients that fade into and out of the background color of the quicklinks. 978w X 10h (Boxes is currently 15h but that will probably change) http://static2. CompanyX.com/Images/Themes/Boxes2/Orange/nav_TopCap978.gif 582w X 10h ex. http://static2. CompanyX.com/Images/Themes/Boxes2/_Default/nav_TopCap582.gif ------------ Dealer Info bottom cap mask- a white-cornered image to force a rounded bottom on the dealer info colored field (css can't always round divs in IE & email clients) 578w X 10h ex. http://static2. CompanyX.com/Images/Themes/Boxes2/DealerInfoRoundedMask578.gif 1000 ? the web doesn't have an image mask to force rounded bottom so in some IEs, it is square. We should change this.) ------------ Coupon Speech bubble pointer MASK In order to have an odd shaped graphic whose color is styleable, this is an image mask. 180w X 20h ex. http://static2.CompanyX.com/Images/Themes/Boxes2/DarkGrey/SpeechBubbleMask178.gif 378w X 20h ex. http://static2.CompanyX.com/Images/Themes/Boxes2/DarkGrey/SpeechBubbleMask378.gif ------------ BULLETS These are image masks... GIFs with triangle shaped holes & background colors in the html actually color the bullet/arrow so they are crispy and styleable.

InThisIssue & Archive (Index) have single arrow bullets, Coupons have double arrow bullets Single bullets- 6px wide X 10 px high The hole is towards the bottom... a few extra pixels were added to the top to push the arrow down so it would match up with the text. ex. http://static2. CompanyX.com/Images/Themes/Boxes2/DarkGrey/BulletMaskSingle.gif Double Bullets - 9 X 9 The hole is towards the bottom... a few extra pixels were added to the top to push the arrows down so they would match up with the text. ex. http://static2.CompanyX.com/Images/Themes/Boxes2/DarkGrey/BulletMaskDouble.gif ------------- Media Play bar- appears under fake videos in email. 344w x 22h (this needs to be a little wider and crisper) ex. http://static2. CompanyX.com/images/common/playbar.jpg 166w X 11h