html and css basics for graphic designers
Post on 06-Dec-2014
440 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related