HTML and CSS basics for graphic designers

HTML/CSS WORKSHOP

TOPIC OUTLINE - HTML /CSS basics - How images behave in the website - Keypoints in coding your design into a

newsletter campaign - Quality Assurance

HTML – HYPERTEXT MARKUP LANGUAGEA 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!

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

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>

CSS – CASCADING STYLE SHEETS

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

HTML AND CSS AT WORK

HOW IMAGES BEHAVES IN THE

WEBSITE

RESPONSIVE VS ADAPTIVE 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

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

DESIGN TO CODE

KEY POINTS 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!

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

Nesting tables instead of <div>

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

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

QUALITY ASSURANCE

TOP EMAIL CLIENT

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

styler/convert/

EMAIL CAMPAIGN Testing tools:

Litmus email testingCampaign Monitor design and spam testingMailChimp’s Inbox Inspector

CSS code command supported by Email clienthttps://i3.campaignmonitor.com/assets/

files/css/campaign-monitor-guide-to-css-in-email-may-2014.pdf?ver=2647&_ga=1.205946576.215658182.1406837740

REFERENCE CSS and HTML -

http://www.slideshare.net/webdevninja/how-css-works

List of all CSS codes - http://www.w3schools.com/css/css_examples.asp

Understanding Adaptive, Responsive and Fluid designs - http://www.slideshare.net/riamorgan/responsive-32177981

Web Safe Fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp

Designing multiple screens: http://www.slideshare.net/janinewarner/multiple-design-strategies-for-multiple-screens