Month: February 2006
February 6, 2006
INTRODUCTION
Following the Web Standards makes perfect sense when it allows you to build easy to mantain websites that work with the major browsers. It doesn’t make sense when using Web Standards forces you to use hacks, prevents you from taking advantage of a great technology/feature or makes your job as a web designer or developer more difficult.
Let’s take a look at 3 very useful technologies that are not in the Web Standards, but do not have any of the negative consequences associated with browser specific code:
- IE conditional comments: for cross-browser CSS layouts.
- AJAX – using the XMLHTTPobject: for behind the scenes browser to server communication.
- The innerHTML property: for quick and easy DOM manipulation.
Though each of the above are not part of the Web Standards, they provide terrifically useful functionality without any hangups.
IE CONDITIONAL COMMENTS
Though IE conditional comments only work in IE, it makes great sense to use them when you want to isolate code. Since all other browsers will see IE conditional comments as being only HTML comments, there can never be a down side to IE conditional comments. It is the proper way of dealing with IE 6’s problems with CSS code.
Example:
<head>
<link href="standardStyle.css" rel="stylesheet" type="text/css" media=screen>
<!–[if IE 6]>
<link href="ie_style.css" rel="stylesheet" type="text/css" media=screen>
<![endif]–>
</head>
In the above example, we use IE conditional comments to hide IE specific CSS from all other browsers. Spefically, the IE conditional comments:
(<!–[if IE 6]> and <![endif]–>)
is loading the ‘ie_style.css’ style sheet only if the browser reading the page is IE6.
IE conditional comments are a replacement for dangerous CSS hacks that are commonly used to deal with IE’s occasional problems with standard CSS.
AJAX
The heart of AJAX is in the XMLHTTPObject – a JavaScript function built into every major browser but is NOT part of the Web Standards. Given how powerful AJAX is, and given how popular it has become, you can be sure that every major browser will continue to support it.
So as a Web Standards zealot, you have to ask yourself whether blind adhereance to the Web standards is worth missing out on this important tool? That is to say, if you’re a web standards zealot, you couldn’t/shouldn’t use AJAX since it is not part of the official Web standards … it’s your choice.
INNER HTML PROPERTY
InnerHTML is an easy to use property supported by all the major browsers that allows you to dynamically update/change web pages without having to do a page refresh.
Example using innerHTML:
var targetDiv = document.getElementById("targetDiv");
targetDiv.innerHTML = "<p>innerHTML is fast and easy!</p>"
Example using DOM methods:
var para = document.createElement("p");
var targetDiv = document.getElementById("targetDiv");
targetDiv.appendChild(para);
var txt = document.createTextNode("Dom methods are much longer than innerHTML");
para.appendChild(txt);
As you can see with the above examples, to insert text with DOM methods takes a lot more code than innerHTML. So, should you use innerHTML?
The answer: Browser makers typically don’t remove functionality, and given that innerHTML is supported by all the browsers and is easy to use, this is yet another example where I will break from the standards and feel comfortable about it.
read more
February 5, 2006
I recently was surfing the web and found myself on a popular web standards zealot website. The featured article referred to 3 column CSS based page layout as being the ‘Holy Grail’! My first reaction to this was: geez, how silly this is!
…
Indeed, a simple thing like a 3 column layout is a challenge – when you don’t use tables. As such, you can find many articles on many web standards zealot websites that attempt to solve this problem. All of them falling short, all of them requiring the use of hacks – hacks that can break and WILL break.
IRRESPONSIBLE ‘EXPERTS’
The article in question, though recent, still advocates/demonstrates the use of a hack to get it to work with the most popular browsers … they don’t learn, do they?
I say this because a few months ago, it was discovered by the web community that many commonly used CSS hacks will break in the new, fully standards compliant IE7 … thus breaking countless web standards zealot website’s. So much for saving time and the myth of forward compatibility.
PEOPLE SHOULDN’T USE HACKS TO MAKE THEIR CSS WORK!
It gets me ‘hot under the collar’ when I see articles that promote the use of CSS hacks – this is bad practice for obvious reasons.
I’ve been warning about this for some time before the IE7 problem. None of these web standards zealots payed me much attention before the IE7 problem came to light; and now after this problem has been well publicized, it seems that these people still have their heads in the sand!
CSS FOR PAGE-LEVEL LAYOUT IS WEAK
Even in a perfect world, where all the browsers supported the standards perfectly, CSS page-level layout capabilities suck for many types of layouts … HTML tables are much easier to use.
That said, there is a CSS tables specification that works like HTML tables, but no browsers support it! There should be a ‘call to action’ to force browser makers to implement CSS tables.
Note:
Tables are grids, and grids are a proven tool for page layout that are used in programming languages (like Java) to create user interfaces. It’s about time that we web-nerds have access to this powerful and flexible system of page layout in CSS. For now, we can use HTML tables.
HTML tables may not be semantically correct, and they may bind your formatting to your page structure, but they will work in all browsers without the need for fragile hacks and they are really easy to use.
CONCLUSION
Web standards were created to make web design easier for web developers by having the browser makers build their browsers according to a standard specification – the web standards.
As soon as you have to work harder, and have to jump through hoops (use hacks) to make your pages work – the point of the web standards is lost. It makes no sense to try and force web standards (in ultra-strict terms,) unless the browsers properly support the web standards – they don’t right now.
read more
February 4, 2006
One of the fundamental problems people have with CSS page-level layout is matching CSS div heights. Others might call this ‘matching column heights’ in web pages.
In this article/video (see below,) we are going to solve this problem using a lesser known JavaScript method: the Matching Columns Script.
Let’s start out by checking out a diagram that illustrates the problem:
People have come out with different solutions including the ‘Faux columns’ hack: using a vertically tiled background image to create the illusion of a column.
The ‘Faux columns’ hack/trick works, but it does have some limitations:
- You have to mess around with background images when creating the fake/faux columns effect – there is even more mucking about when you have liquid layouts.
- You won’t be able to use CSS border styling (on your div’s that create the columns) because it would reveal the hack.
THE BETTER WAY TO HANDLE THIS PROBLEM: DOM SCRIPTING (JavaScript)
JavaScript (sometimes called ECMA script,) is the programming language built into all the browsers that allow geeks/nerds, to have practically total control over how things appear in a web page – it’s very powerful.
Note: DOM scripting (the term,) is a quick way to describe using JavaScript to control a web page’s structure. If this makes no sense, don’t worry about it as you need no programming knowledge to use the technique that is covered here.
WHY IS THE JAVASCRIPT METHOD BETTER?
You are better off with the JavaScript method (rather than the ‘Faux columns’ hack, ) because:
- Once it is applied, you don’t have to worry about it as it automatically adjust itself to change with your page(s).
- It is much easier/faster to apply than the ‘Faux columns’ hack.
GETTING STARTED
Attached with this article you will find the files you need to apply the script:
- The Javascipt file.
- The CSS document.
- A sample web page that puts it altogether.
Now it’s time to watch the video to learn how to use it.
MATCHING DIV HEIGHTS VIDEO
CONCLUSION
There is one downside to this technique:
It won’t work if people have JavaScript turned off. Fortunately, the vast majority of people out there have it on. Last time I checked my own stats, nobody had JavaScript disabled.
That said, though it looks a lot better when your columns heights match, I would not consider it mission-critical to a website. That is to say; people will still be able to use the website, so I am willing to accept that for some rare (paranoid) individuals, the columns will not match.
Source Files
read more
February 3, 2006
I get emails all the time from people asking all kinds of interesting questions; once in a while I post them on the blog or in my newsletter.
This time around someone wanted to know about earning ad revenue with a website:
Me and my business partner have currently set up a new site and we are wondering if you have any advice as to how we should start to make it earn us money. Do we build up the trafic first? or do we get the paid for links & ads first?
MY ANSWER:
The life-blood of any site (that those that depend on ad revenue,) is the the traffic. I’ll even go a step further: the value of a site is the traffic and the quality of the traffic. I think you guessed the answer by now … but just in case, you need traffic first.
Once you have traffic, people will contact you to buy ad space. I get lots of request and refuse the vast majority. Why? Killersites.com gets over 1 million+ pageviews a month of very high quality traffic.
Hope that helps,
Stefan Mischook (The Web Design Heretic)
read more
February 1, 2006
In this podcast I discuss podcasting. I give a few tips on podcasting and touch on why podcasting is something that web designers need to pay attention to.
Podcast running time: 8:19
[audio:https://www.killersites.com/blog/audio/podcasting.mp3]
Download this discussion in MP3 format
Thanks,
Stefan Mischook
read more
