At first glance the ‘fixed’ and ‘absolute’ positioning values in CSS appear to be identicle.  However, there is an important distinction that must be made.

Absolute positions take an element (such as a box) away from the normal flow of the webpage layout.  They are assigned a specific and exact location via x/y co-ordinates.  Values assigned in absolute positioning move the element away from the exact top and left portion of the page.

Fixed positions also move an element away from the normal flow and place it according to x/y co-ordinates away from the top left point (0,0).  But in this case it positions the element away from the top left point of the viewed area (viewport) of the page, not the top left point of the page in whole.

Let’s assume we took two elements and assigned both positioning values as follows:

top: 5px;

left: 44 px;

If the elements were the same size, they would be exactly overlapped near the top of the page, inset from left by 44 pixels.  If we scrolled down a long page however, the absolute positioned element would stay in place while the fixed element would continue to display in the top of our viewing area.

You can currently see fixed positioning in use in some annoying advertising on websites.  Of greater benefit however, is the potential for fixed navigation on sites.

There is a drawback to fixed positioning.  IE 6 and earlier do not support it.

One of the most common questions I hear when building a new site for a customer relates to domain extensions.

Someone needing a website in Vancouver, for instance, will often ask whether they should be using a .com extension or .ca (the canadian domain extension).

Here’s how it all works:

.ca .uk .au and other 2 letter extensions are ccTLDs.  Or, ‘country code top-level domains’  the rules for registering one of these domains vary by country but they are generally reserved for companies or individuals who are citizens of that particular country.

It used to be that registering one of these domains helped ensure that Google gave regional preference to your site.  For example, having a .ca domain meant that google.ca would weigh your site heavier in search results.  This was in addition to server location, page language and inbound links from other sites.

However, this changed last year with the addition of Google’s Geographic Target tool.   This component of their webmaster tools allows site owners with any domain extension (.com, .org, etc) to specify a particular region or country to be associated with.

If you own a ccTLD you cannot specify a geographical preference.  However, for those with .com or other classic domain extensions this feature helps you give your site a bump without the need to purchase localized or regional hosting.

The most exciting part is the ability to set a preference to a sub-domain.  What this means is that you could own one site, let’s say yourname.com.  You could build a regional preference into unlimited sub-domains and target each towards a different country.  For example, france.yourname.com , england.yourname.com, canada.yourname.com.  Each subdomain could hold pages specific to a particular country with all files being hosted on one hosting plan in one location.  This is a tremendous time-saver for international organizations.

There still appears to be a preference for server location built into the search ‘pages from…’ option on Google that will look toward server location.  This is still worth considering for highly competitive areas.

The downside? Once you have a ccTLD you are locked into the region represented.

The paperless office is a mythical creature.  In fact, I’m fairly certain I saw it in the background of the final scene in the Lord of the Rings movie.  It appeared to be eating a treant.

The fact is that offices and individuals still use a massive amount of paper in their daily business.  The internet, while cutting down on vast paper resources used for directories, advertising and records, has also created an increase in on-demand printing.  People still print information found on the web for records, for later perusal, or to stick on the fridge at work (generally to harass fellow employees while maintaining plausible deniability).  However, nothing is worse that broken paragraphs or misplaced headings (the next section heading being the last line on a page).

Our issue then becomes one of ensuring that information on our web pages is printed in a manner that allows for proper layout and readability.  We can accomplish this using either (or both) of the following methods:

Page Breaks
Apply page breaks to your html tags (They MUST be in the html tags of the page itself) using styles.

style=”page-break-before: always;”

style=”page-break-after: always;”

As you can guess, the first style forces a page break after the current tag closes.  The second forces a page break before the current tag opened.  Here’s two examples:

<h2 style=”page-break-before: always;”>My Section Heading</h2> This creates a page break prior to the heading “My Section Heading” on the document.

<p style=”page-break-after: always;”>blah blah blah </p> This creates a page break after the current paragraph ends (closes)

Murdering Orphans
For this example you will need some cotton candy and a baseball bat wrapped in barbed wire.  haha?

No, seriously, we just need our stylesheet.

‘Orphans’ are the first line of a paragraph that appears at the bottom of a page.  It is the opposite of a ‘widow’ which is the last line of a paragraph at the top of a page.

To solve these problems, edit the style of  your p tags by adding something like the following on your style sheet:

p {
widows:5;
orphans:10;
}

This will force 5 or more lines of text at the top of a page and at least 10 lines of text at the bottom of a page.  If the printer cannot provide these then the entire paragraph is shifted.

I once had a t-shirt that was quite possibly my favorite thing in the world.  Now, in retrospect, I realize that this was a period in my life during which my mother had hired an 18 year old Swedish girl as a nanny while she was at work, but I was 4. I can be forgiven for slipping the presence of an attractive woman who entertained and fed me far, far down the list of what was important to me.  But I digress…

Being that I was prone to what everyone considered excessive sulking (I should point out that this is merely my neutral expression and has been all my life), I was given a t-shirt that said “the Incredible Sulk.”

At this point in my life I was a huuuuuge Incredible Hulk fan.  4 year olds are smart enough to know when adults are taking the piss.  However, this is the closest thing I had ever gotten to an ‘Incredible Hulk’ t-shirt so I was happy enough.

Long story short, 4 year olds grow.  1970′s cotten t-shirts do not.  I wore that shirt until it was full of patched holes and so tight that my 5 year old belly hung below the seam.  Sadly, I had outgrown it.  It was time for it to go.

HTML is now that t-shirt.  Unlike my t-shirt (and eventually my nanny) I won’t be overly sad to see it leave.

HTML served a solid purpose in the early days of the Internet.  It provided structure to files (which were little more than digitized documents) that people wanted to share from computer to computer.  It was never originally designed for style and graphical layout.

As the web grew into what it is today, web designers improved what was possible with HTML by adding features that allowed for web sites to be divided up into smaller, manageable pieces.  More and more control over multiple files became possible and the original structural controls became more complex.

The web had a problem though.  The Internet has fast become a vibrant, graphically pleasing portal for entertainment, information and socialization.  HTML could never escape the fact that it was a framework for organizing documents.  Sure, HTML was given life support by a huge number of talented designers who broke up image files to give the illusion of free-form graphical interfaces but it was an illusion.

Along came CSS (Cascading Style Sheets).  Orginally, CSS allowed only basic controls over things such as fonts and margins.  But the idea was solid.  A style sheet would indicate the formatting for a section of a web page.  Web pages would reference the same ‘style’ by name, rather than typing in the html for each desired piece of formatting.

The natural extension to CSS was to allow it to control not just text but open elements on a page.  This meant elements of the page could be configured for visual style as well as positioning.  Even more exciting was the ability to position elements over-top of each other, overlapping when necessary to create striking graphical effects easily and to further seperate design from content.

The seperation of page design from page content is easily the biggest step forward in the recent history of web design.

CSS has now been around for over a decade, with the most recent major revision being released just before the millenium.  It is widely (although still not perfectly) supported by all major internet browsers and has energized web design to an enormous degree.  No longer are web pages boring clones dependant on the same tags for simple formatting effects.  Now web designers have 100% control over the look and feel of any element including the standard html tags for things like tables, font effects such as bold, etc.

The next generation of CSS (CSS3) will increase control over object behavior, additional font control and include upgrades to static layout that is meant to replace the old table design element being misused.   HTML 5 looks like it may make  a stand on a few issues that may be useful, but it is now resigned to be an accessory.

It is well passed the time then that every web designer should be thinking of web sites as being CSS driven, and HTML as being a tool for elements and structure within the more flexible and capable style sheets.

Unfortunately, there is still far too many sites being driven by HTML with very little use of CSS.  Why is that?  A quick survey of my friends and the online community shows that some are simply unaware of the power of css.  This is a result of the huge volume of HTML resources on the web that make little or no mention of style sheets.  Another reason is often time constraints.  Tools like Dreamweaver and Photoshop make it quick and easy to create sites using chopped graphical elements over simple table designs.

And yet there is a far more unfortunate reason.  Our browsers continue to fail to achieve 100% accurate rendering of CSS.  For the average web designer, projects must be completed quickly to earn money in a competitive marketplace.  Having to compare rendering of CSS elements in Internet Explore, Firefox, and Opera can be a time-consuming process.  Worse yet is the time spent trying to cheat the CSS elements so that multiple broswers will show that element the same way.  It can be tempting to just chuck the CSS on a tightly budgeted site and go back to HTML tables to ensure simplicity and speed of project completion.

The Browser manufacturers must do a better job of rendering CSS accurately and consistently.  Web designers are currently holding an amazing tool in their hands that they cannot always use due to the failure of browsers to be compliant with standards set by the web community.  This is an unacceptable failure on their part.

It appears that the browser developers are being more pro-active for the CSS3 release in the near future.  They are pre-building compliance for some standards that have yet to be released officially.  If this commitment to the CSS standard continues, it would seem that we can finally let HTML (at least as a guide to design) die a more dignified death.

There will always be a place for HTML in displaying data or one-time, non-essential variances, but when it comes to layout and standardization of sites… it can go the way of the Incredible Sulk.