Testing Standards

Code Structure

Why is it important?

Apart from building a fantastic website or amazing emails, it is also important to have good coding structure, in order for developers to understand and to access certain code when updating the website.

How to display code correctly

Brackets has a beautify tool that will automatically indent code in the correct position. Sublime Text also has the tool to indent the code accurately. Brackets has great plugins called HTMLLint, CSSLint and SASSLint and JavascriptLint that will assess the code and will give you syntax errors if the code is not correct.

Commenting

When you are creating a website involving HTML, CSS, JavaScript and PHP, it is a good idea to comment each step of code of what is happening. This would make sense to other developers that would want to look at the code.

Webpage Code Structure

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    <script type="text/javascript" src="page_script.js"></script>
  </head>
  <body>
    <div id="accordion" class="accordion">
      <h3>Heading 1</h3>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis cursus lectus. Curabitur condimentum nisl non nisl molestie mollis. Aenean at ullamcorper turpis.</div>
      <h3>Heading 2</h3>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis cursus lectus. Curabitur condimentum nisl non nisl molestie mollis. Aenean at ullamcorper turpis.</div>
    </div>
    <br>
  </body>
</html>

CSS

body {
  background-color: #eeeeee;
  font-family: Arial;
}

/* ACCORDION */
.accordion {
  clear: both;
  position: relative;
  top: 10px;
}

JavaScript

/* ACCORDION */
$(function () {
  'use strict';
  $("#accordion").accordion();
});

Email Code Structure

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="fullWidthSection" bgcolor="#ffffff" style="margin: 0 auto; width: 600px;">
  <tbody>
    <tr>
      <td style="padding: 40px 40px 40px 40px;">
        <table width="520" class="fullWidthSection" border="0" cellpadding="0" cellspacing="0" align="center" style="margin: 0 auto; width: 520px;">
          <tbody>
            <tr>
              <td class="fullWidthContent" style="font-size: 22px; color: #4d4d4d; font-weight: bold; text-align: left; font-family: Arial, Sans-serif; line-height: 24px; vertical-align: top; padding: 0 0 0 0;">Event summary</td>
            </tr>
            <tr>
              <td class="fullWidthContent" style="font-size: 18px; color: #4d4d4d; font-weight: normal; text-align: left; font-family: Arial, Sans-serif; line-height: 21px; vertical-align: top;"><span style="height: 20px; display: block;"> </span></td>
            </tr>
            <tr>
              <td class="fullWidthContent" style="font-size: 15px; color: #4d4d4d; font-weight: normal; text-align:left; font-family: Arial, Sans-serif; line-height: 21px; vertical-align: top; padding: 0 0 0 0;" bgcolor="#ffffff">For this sessions, Trevor will look at, as the session title suggests, less familiar but useful indicators. Examples of these are Williams %R, Commodity Channel Index, and Aroon. Trevor will also talk about volume indicators beyond On Balance Volume (OBV).</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

HTML Email - Do's and Don'ts

Do	Don't
All of your styling via inline style of the elements in the body of the document Use tables for your layout Hand-code your own design or use our Canvas Editor. Link to forms that are hosted on your website Link recipients to the video on your site Follow the 80/20 rule for balancing images with other content	Link to an external .css file Use CSS within the <style> section unless it is a responsive email Use divs to manage your layout. This will break the layout. Rely on graphical editors like Dreamweaver. They generally default to use external CSS. Post forms, such as opt-in forms or surveys, within your emails Include videos within your email Rely on an image-only / image-heavy design as email programs turn images off by default, requiring the recipient to enable it Use Flash elements or Javascript in your design. Most email programs ignore and might be a security risk.

Don't

All of your styling via inline style of the elements in the body of the document
Use tables for your layout
Hand-code your own design or use our Canvas Editor.
Link to forms that are hosted on your website
Link recipients to the video on your site
Follow the 80/20 rule for balancing images with other content

Link to an external .css file
Use CSS within the <style> section unless it is a responsive email
Use divs to manage your layout. This will break the layout.
Rely on graphical editors like Dreamweaver. They generally default to use external CSS.
Post forms, such as opt-in forms or surveys, within your emails
Include videos within your email
Rely on an image-only / image-heavy design as email programs turn images off by default, requiring the recipient to enable it
Use Flash elements or Javascript in your design. Most email programs ignore and might be a security risk.