CSS organization:
Base/
– reset.css (or normalize.css)
– layout.css (any grid system you are throwing in goes here)
– typography.css (your fonts stuff)
– utilities.css (OOCSS stuff, things that may be easier to just define a class for instead of rules below, like .left { float: left}, or .mtl { margin-top: 20px } See this and pic and choose the ones not cover in other sections that you may need.
– zindexmap.css (this file does not contain any css, just a commented out section where you specify all the elements using zindex, and the values), it is quite useful to avoid the z-index wars
Components/
– buttons.css
-forms.css
– list.css (and so on, you get the idea)
Modules/
– footer.css
– header.css
– navbar.css (you get the idea, not atomic components like buttons, but more general sections.
Overrides/
– aboutus.css (page specific stuff, one offs, overrides to generic rules, themes)
Make sure your production scripts are making all of these files into one.
Other tips:
1) Inside each file, at the top, put a CSS map, so you know if a section you are adding / modifying is already there. Something like:
/* Contents
– Header
– some section
– some other section
– footer stuff
*/
And then, make sure the sections correspond with the headers above. That will help you keep bloat out
2) Avoid long selectors! Favor specificity by classes. For example, instead of:
#my_container section div p a.my_link
try
#my_container .my link (or just plain .my_link)
It is easier to fall in this trap specially if you are using css precompilers like sass. The reason you should be mindful of this:
– Better performance of your CSS
– You avoid specificity wars. Protect via container ids, not long strings of HTML elements
3) Always aim to reuse. Try to drive your work off a designer’s stylesheet, so you don’t have to “recreate” styles per pages / sections. If one is not provided, ask for one. If not possible, avoid the temptation to create “one offs” everywhere to accomplish stuff, constantly go back to your base classes and look for what you need, or what you don’t anymore.
4) At coding time: make the HTML do as much of the Layout / styling as possible. For example, as basic as it sounds, put content in
instead of a more generic
HTML: coding email newsletters
Golden rules:
1) Make sure width and height is set in each td and img tags in the email: not on the table! but on each cell.
2) Every image is set to display:block. Also, if relevant, put an alt attribute as 40% of email readers won’t download the actual image. Also, whenever possible, user https:// for the links to avoid being flagged as spam.
3) Every link is set to have no border and no outline. target=”_blank” all of them. Also, whenever possible, user https:// for the links to avoid being flagged as spam.
4) Cell padding and cellspacing is removed from each table as much as possible:
5) The layout is broken up in a series of rows, and each row with complex images / data will also be a nested table 6) All styling is done inline. It is a pain, agree. Here’s a tool to make it easier: http://premailer.dialect.ca/ 7) Margin and padding are inconsistently applied across email clients: again, your best friend are tables and cells with widths and heights defined. 8) Background color for the entire email can be set if you put it as follows:
| [other nested tables with your content here] |
9) Whitespace does matter! If you have spaces or line spaces between rows and cells, they may be interpreted funky by some email clients, avoid them!
If you don’t want to “reinvent the wheel”, and spend lots of time and effort on the emails yourself, use already built and already tested templates:
http://mailchimp.com/resources/html-email-templates/
http://www.campaignmonitor.com/templates/
Troubleshooting:
Outlook 2007 / Outlook 2010: You see only background color where there is supposed to be content. Solution: remove bgcolor=”#[color]” property.
IOS: Avoid auto-formatting of dates and phones:
If your HTML looks like this:
will cease<br> operations <span class=’ios-avoid-format’>on June 1, 2012</span><span></span>.
The CSS that will make this ok in iphone / ipad is:
@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-avoid-format{
display:none;
}
span.ios-avoid-format + span:after{
content:”on June 1, 2012″;
}
}
Great resources for your email needs:
litmus.com — Essencial for testing
Mailchimp — Great and free for certain number of users on your list
http://premailer.dialect.ca/ — Inline your CSS styles, fast and easy
HTML role attributes
Introduced as part of XHTML, they mark the functionality or orientation of a give content. Used by WAI-ARIA capable screen readers to deduct content from the page. Example:
<div role=”banner”>This is my banner</div>
This is supposed to be more semantic than <div class=”banner”>
There are a bunch of roles that can be used (you can’t make them up):
banner- This is a region that contains the prime heading or internal title of a page. Most of the content of a banner is site-oriented, rather than being page-specific. Site-oriented content typically includes elements such as the logo of the site sponsor, the main heading for the page, and the site-specific search tool. This typically appears at the top of the page, spanning the full width.
complementary- This is any section of the document that supports but is separable from the main content, yet is semantically meaningful on its own even when separated. There are various types of content that conform to this role. For example, take the case of a portal—this may include but not be limited to show times, current weather, related articles, or stocks to watch. The content should be relevant to the main content; if it is completely separable, a more general role should be favored.
contentinfo- This is meta information about the content on the page, or the page as a whole. For example, footnotes, copyrights, links to privacy statements, and suchlike would belong here.
main- As the name suggests, this is the main content in a document. It marks the content that is directly related to or expands upon the central topic of the page.
navigation- This refers to the collection of links suitable for use when navigating the document or related documents.
note- This denotes content parenthetic or ancillary to the main content of the resource.
search- The search tool of a web document, this is typically a form used to submit search requests about the site or to a more general internet search service.
A quick glance at these values shows considerable overlap between many of the new HTML5 elements; the banner role and header element, complementary role and aside element, navigation role and nav element, all seem very closely related. Indeed, the complementary and note roles in combination cover the purpose of the aside element. We saw that the aside element has been stretched to include two quite different purposes; arguably having two separate roles (or elements, in HTML5 ) would make more sense.
The main role also arguably provides a purpose for which HTML5 does not have an element—the main content block of a page.
Now, unlike with class or id, you can’t simply invent your own role values. It is possible to define your own role values formally, though in most instances this will be of no practical value as browsers and other software won’t have any idea of what to do with it, and in any case it’s beyond the scope of this course. However, as you might have guessed, ARIA defines a number of additional values in addition to the standard role values defined in XHTML 1.1. ARIA roles can be quite complex, so let’s focus on some of the most immediately useful ones. Note also that simply adding a role value to an element (for example, role="button" to a span element) doesn’t make that element a button. Rather, role is for describing the purpose for which you are using the element. It’s up to the developer to make the span behave like a button.
ARIA defines several types of role, among these widget roles (we saw earlier that a widget is what ARIA calls controls), landmark roles (regions of the page intended as navigational landmarks) and document structure roles (structures that organize content in a page). Next up, let’s run through a quick overview of the most common ARIA roles.
Widget roles include:
alert
alertdialog
checkbox
combobox
dialog
menuitem
menuitemcheckbox
menuitemradio
progressbar
radio
scrollbar
slider
spinbutton
status
tab
tabpanel
textbox
timer
tooltip
treeitem
On Charsets and other strange black sciences
This is basically the software representation of a given map of language characters. The English language, not having lots of different letters, can be represented by 8 byte construct, which give you about 256 characters. Enough to cover all the letters and punctuation signs. Most browsers and computer systems would default to this if not specified.
In HTML4, it is specified as:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
In HTML5, the specification is:
<meta charset="utf-8">
Web design: Standard screen resolution
1024×768, at least 20% users have this one, and lots of users have above that.
CSS: make divs auto adjust automatically to different heights on the container div
Basically you put a clear:both at the bottom of the floated elements, to pull the height of the container div down:
<html>
<head>
<style type=”text/css” media=”screen”>
#container {
background-color:#CCCC99;
width:50%;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”left” style=”float:left;background-color:#CCCCCC; width: 40px;”>Too much content it goes off the background of the container div, how do I fix this? Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?</div>
<div id=”right” style=”float:right;background-color:#DDDDDD;”>THis is right floated div</div>
<div style=”clear:both”>This will make the size of container ok, no matter what is the content size of the floating divs</div>
</div>
</body>
</html>
DOM (Document Object Model)
It is an abstract, internal representation browsers keep of the page loaded, with all the elements integrating it and the order they were loaded, so it is disposable to JavaScript for further manipulation. It is a convention of the World Wide Web Consortium (W3C) that browsers follow.
CSS Browser conditionals for IE
Example of how IE support conditionals that narrow the code to only a specific browser and version:
<!–[if gte IE 5]> <style type=”text/css”>
Your code here
<![endif]–>
favicon.ico
It shows as an image on the browser address bar. The ico image needs to be on the root server directory.
Note that this file is really sticky when it comes to cache, meaning that if you hit your site and then edit and upload a new version, the old version will display even after you have clear cache and close the browser. It happens to me in chrome and firefox. The best way to get the new version is to actually hit the icon directly: http://yoursite/favicon.ico It looks like after that the browser realize there is a new version, and updates itself. Hope it helps some out there where changes in the icon don’t seem to translate in changes in the displayed icon. It drove me nuts for awhile…
This site does an excellent job creating icons online on-the-fly with some customization: http://favicon.htmlkit.com/favicon/
Browsers: IE problems and browser compatibility issues with IE
- IE 6 floating elements that touch each other with a div border, the border of the container get double margin. If you specify 10 for each, you will get 20).
- The solution: zoom:1 or display:inline – floated elements will behave as blocks, even if you specify display:inline, but nonetheless it will at least fix this problem
- IE 6 there is a 3 pixes gap between floated and non-floated elements
- float all elements, or
- * html #mainColumn { margin-left: 0; } �
* html #sidebar { margin-right: -3px; }
- IE 6 sometimes missplaces elements that are positioned using the right and bottom properties
- zoom:1 on the element that is the predecesor of the elements that have the problem
- IE in general: one of your element’s margin is knocked out as soon as users mouseover other elements of the page, so the element is knock out of place.
- Make this element position:relative, even if you don’t add top or left properties to it, it will make it “behave”
- You need to specify code for IE 6 and under.
- You can use the * key, only understood by those browsers: * html h1 { … your css here …}
- All other more modern browsers will ignore this