Category: HTML

Categories
CSS General HTML

HTML and CSS: general site architecture and good practices

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

if the text is really to be used as a paragraph.

Categories
Compatibility issues HTML

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

Categories
HTML

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

Widget roles include:

  • alert
  • alertdialog
  • checkbox
  • combobox
  • dialog
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • progressbar
  • radio
  • scrollbar
  • slider
  • spinbutton
  • status
  • tab
  • tabpanel
  • textbox
  • timer
  • tooltip
  • treeitem

Landmark Roles

Landmark roles include:

  • banner
  • complementary
  • contentinfo
  • main
  • navigation
  • search

Document Structure Roles

Document structure roles include:

  • article
  • group
  • heading
  • list
  • listitem
  • note
  • presentation
  • separator
Categories
Compatibility issues HTML HTML5

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">
Categories
CSS HTML

Web design: Standard screen resolution

1024×768, at least 20% users have this one, and lots of users have above that.

Categories
CSS HTML HTML Templates

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>

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

keyword: auto-height
Categories
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.

Categories
Compatibility issues HTML

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]–>

Categories
HTML Web Servers

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/

 

 

 

 

 

Categories
Compatibility issues CSS HTML

Browsers: IE problems and browser compatibility issues with IE

  1. 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
  2. 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; }
  3. 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
  4. 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”
  5. 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