html and css basics for graphic designers
DESCRIPTION
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.TRANSCRIPT
![Page 1: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/1.jpg)
HTML/CSS WORKSHOP
![Page 2: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/2.jpg)
TOPIC OUTLINE - HTML /CSS basics - How images behave in the website - Keypoints in coding your design into a
newsletter campaign - Quality Assurance
![Page 3: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/3.jpg)
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!
![Page 4: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/4.jpg)
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
![Page 5: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/5.jpg)
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>
![Page 6: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/6.jpg)
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
![Page 7: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/7.jpg)
HTML AND CSS AT WORK
![Page 8: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/8.jpg)
HOW IMAGES BEHAVES IN THE
WEBSITE
![Page 9: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/9.jpg)
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
![Page 10: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/10.jpg)
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>
![Page 11: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/11.jpg)
DESIGN TO CODE
![Page 12: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/12.jpg)
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!
![Page 13: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/13.jpg)
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>
![Page 14: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/14.jpg)
Nesting tables instead of <div>
![Page 15: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/15.jpg)
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">
![Page 16: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/16.jpg)
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>
![Page 17: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/17.jpg)
QUALITY ASSURANCE
![Page 18: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/18.jpg)
TOP EMAIL CLIENT
![Page 19: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/19.jpg)
Emulator (on chrome, F12 + ESC) Cross browser check Code Validator: http://validator.w3.org/ http://inlinestyler.torchboxapps.com/
styler/convert/
![Page 20: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/20.jpg)
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
![Page 21: HTML and CSS basics for graphic designers](https://reader033.vdocuments.mx/reader033/viewer/2022051514/54840b2b5906b5c1158b46f0/html5/thumbnails/21.jpg)
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