Here's a basic guide on the basics of HTML and CSS, how designs works on the website and online campaigns and the do's and dont's in creating responsive designs.

2.  - HTML /CSS basics
 - How images behave in the website
 - Keypoints in coding your design into a
newsletter campaign
 - Quality Assurance

3. A website is consisted of multiple HTML files and
any other supporting documents (CSS, Java.. etc)
 1. Basic structure and parts
 Viewsource:clozette.co
 2. Codes
 A command that tells how the elements in the page
are structure
 each tag that open must be closed before the end of
the document : opening tag = <b> | closing tag = </b>
ex. <b> Hello World! </b> result: Hello World!

4. any media(images, audio, images, etc) in the website are not
part of the HTML file itself, but separate documents.
 hence, <img src="clozette.com/media/this-is-the-image.jpg"
"alt="the image">
tag attributes
The <img> tag
 <img src="clozette.com/media/this-is-the-image.jpg"
width="728 height="90" alt="the image">
considerations: while src is the mandatory , you can
control the how the image is shown by specifying the
width and height, alt tag on the other hand, tells the
search engine what the image is.
-this tag is self-closed

5. Linking an image
 <a href="www.clozette.co/the-image"> <img
src="clozette.com/media/this-is-the-image.jpg"
width="728 height="90" alt="the image"> </a>

6.  Contains the rules for the presentation of
HTML
 w/o CSS, every pages must specify how the
elements will be presented – tedious task
 CSS is made to address webpage views in
different browser and screen resolution
 Here are the list of all the CSS codes

9.  Responsive design are built around a fluid
grid, Adaptive design is based on fixed grid.
 Best way to check: Resize the browser or use
emulator (F12+Esc)
If the site continuously reflows: it’s
responsive. If the site stays the same and
then jumps to different layouts at certain
points: it’s adaptive.
 Activity: w/c is responsive, w/c is adaptive

10.  is a CSS3 module allowing content rendering to
adapt to conditions such as screen resolution
(e.g. smartphone screen vs. computer screen).
 Which clients support media queries?
https://litmus.com/help/email-clients/media-query-
support/
<style type="text/css">
/* mobile-specific CSS styles go here */
@media only screen and (max-device-width: 480px) {
}
</style>

12.  Code with Tables; Always go for the simplest layout
 Always specify; font families, image sizes, table and
cell sizes, and colors (even bg color)
 Never go <600px in width
 Don’t assume that the image will load, use alt tags
 Don’t attach video, flash, .gif
 Don’t use bg image
 Don’t use 1 image – it usually marked as SPAM
 Stick to web safe fonts
 Take into consideration the mail clients – QA
 Email Mktg ethics: Unsubscribe link, Browser version
link, Text-only version, CTA button
 Lastly, TEST!

13.  Set the width in each cell, not the table
<table cellspacing="0" cellpadding="10"
border="0"> <tr> <td width="80"></td> <td
width="280"></td> </tr> </table>
 Set the width in each cell, not the table
<table cellspacing="0" cellpadding="10"
border="0"> <tr> <td width="80"></td> <td
width="280"></td> </tr> </table>

14.  Nesting tables instead of <div>

15.  Use a container table for body background
colors
 <table cellspacing="0" cellpadding="0" border="0"
width="100%"> <tr> <td bgcolor=”#000000”> Your
email code goes here. </td> </tr> </table>
 For Images: don’t use floats, use align tags
 <img src="image.jpg" align="right">

16.  Avoid shorthand for fonts and hex notation
 Ex:
p { font:bold 1em/1.2em georgia,times,serif; }
 p { font-weight: bold; font-size: 1em; line-height:
1.2em; font-family: georgia,times,serif; }
 Paragraphs
 p { margin: 0 0 1.6em 0; }
 Links
 <a href="http://somesite.com/"
style="color:#ff00ff"><span style="color:#ff00ff">this
is a link</span></a>

19.  Emulator (on chrome, F12 + ESC)
 Cross browser check
 Code Validator: http://validator.w3.org/
 http://inlinestyler.torchboxapps.com/styler/
convert/

20.  Testing tools:
 Litmus email testing
 Campaign Monitor design and spam testing
 MailChimp’s Inbox Inspector
 CSS code command supported by Email client
 https://i3.campaignmonitor.com/assets/files/css
/campaign-monitor-guide-to-css-in-email-may-
2014.pdf?ver=2647&_ga=1.205946576.215658182.
1406837740

21.  CSS and HTML -
http://www.slideshare.net/webdevninja/how-css-
works
 List of all CSS codes -
http://www.w3schools.com/css/css_examples.as
p
 Understanding Adaptive, Responsive and Fluid
designs -
http://www.slideshare.net/riamorgan/responsiv
e-32177981
 Web Safe Fonts:
http://www.w3schools.com/cssref/css_websafe
_fonts.asp
 Designing multiple screens:
http://www.slideshare.net/janinewarner/multip
le-design-strategies-for-multiple-screens