Help killing Internet Explorer 6

Help killing Internet Explorer 6 using the banner provided on the linked website.

Most of you certainly know that there are huge differences between different browsers and a lot of people still use Internet Explorer 6 which was released back in 2001. And 8 years are quite a long time for the ever changing internet. It’s time to help people to realize that they have to upgrade. Web developers can not just keep on hacking around the bugs of IE6. In order to improve the internet (and probably help yourself) add this banner on your website.

During the browser wars, IE became the spearhear of innovation. Microsoft introduced a lot of useful features like the XMLHttpRequest which is used for AJAX. However most of the features were not changed to be compilant to the recent standards and therefore cause a lot of troubles for webdevelopers.

With the IE6 becoming the most widespread browser and clearly winning the browser wars, Microsoft stopped investing into browser technology since browsers become more and more capable of being a platform for  crossplatform application development. Innovation stalled until the rise of the open source browser firefox, the “grandson” of netscape navigator.

Advertisements

Save the pixel, Save your message

What if you could make your website more successful just by tweaking it a little bit here and there instead of doing a complete makeover?

In his book “Save the Pixel” Ben Hunt explains why web design is much more then simply adding fancy images to an website, showing that design has more then one side. Focusing on the information architecture perspective Ben suggests that web designers should bring the “I’m in the right place to get what I want” message across effectively by simplifying the sites design. As a measure of success designers can use the formula “Success = Attention / Stuff” as a guideline.

The more stuff (pictures, gradients or any other kind of visual elements) you have on each page, the lower the chance that visitors feel like they’re in the right place. Every element should justify it’s existence by providing useful and succinct information, direct his/her attention or create a feeling that communicates the goals of the site. Designer should get rid of any unnecessary stuff that doesn’t serve that purpose.

Ben gives excellent tips on structuring website, be sure to visit his blog (webdesign from scratch) for high quality tips free of charge.

Improve your websites first load performance

If you are a serious webdeveloper the chances are good that you are already using one of the famous javascript-libraries like jQuery, Prototype/script.aculo.us, MooTools, YUI or others. These libraries can be a big part of the content that needs to be send to the visitor of your website. This however don’t need to be the case as long as the site is not limit to a companies intranet.

So if you are using a piece of code like the following:

<script type="text/javascript" src="/js/jQuery.min.js"></script>

consider using the Google AJAX Libraries like this instead:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Doing so, you are reaping 4 benefits (decreased latency, increased parallelism, better caching and less traffic) from it:

Decreased Latency:
By using the CDN (Content Delivery Network) of google you make sure that the visitor downloads the script from the closed available server belonging to google. Therefore the download might be faster and the response time shorter.

Increased parallelism:
Browsers limit the number of simultaneous connections per hostname. Depending on the browser, this limit is usually 2 or with newer browsers 6. This means for some users that while downloading 2 scripts, images, or stylesheets from your server they still can download the javascript library of your choice from google. In some cases the difference is noticeable.

Better caching:
Probably the greatest benefit of using a CDN like e.g. the Google AJAX Libraries is that your visitors may not need to download jQuery at all even on the first visit. If the visitor have ever surfed an website also using the Google AJAX Libraries, it’s highly likely that it’s already in the browsers cache. This is also a big benefit for the user, since he/she doesn’t need to have dozens of identical copies of jQuery in their browser’s cache. Also the caching is optimally configured and browser can cache the file for up to one year.

Less Traffic:
For smaller websites another benefits might be that less of the valuable traffic is actually send on sending “website internals” to the visitor. Nothing send, nothing paid.

Make your life easier with event delegation

Event delegation is a simple javascript idom that spares you from a lot of hard work. In case you have a list of items (like <table> or <li>) there is no need to start to add an event handler like onclick to every single row/list item. Instead it is enough to just add a single handler on the table/list itself.

If you ever used javascript (especially if you are using a library like JQuery) maybe you already added elements to your page retrieved by an ajax call and notice that nothing happens then you click them since you need to manually add an event handler to them. In this respect Javascript is very different to CSS. In CSS all styles get applied automatically even if an element gets added to the page later (more on the great tutorial on learning jquery). However “behaviour stylesheets” would be a really nice feature to write unobstrusive javascript.

Things get easier then using event delegation. Every time you click on a row of your table your event handling function will be invoked. The event information will be passed as an argument to it. The nice thing is that the event handling will work automatically even on newly added rows. For cross browser event handling, you might take a look at quirksmode or simply use one of the major javascript libraries. The following examples uses JQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>js test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"> </script>
<script type="text/javascript">

$(function(){
  $('#tlist').bind("click", function(event) {
    rowClicked(event.target.parentNode);
  });
});

function rowClicked(r) {
  alert(r.innerHTML);
}

</script>
</head>

<body>
<table id='tlist' border="0">
  <tr>
    <th>id</th><th>value</th>
  </tr>
  <tr>
    <td>1</td><td>One</td>
  </tr>
  <tr>
    <td>2</td><td>Two</td>
  </tr>
  <tr>
    <td>3</td><td>Three</td>
  </tr>
</table>
</body>
</html>

One of the libraries leveraging event delegation is reglib. Another option might be the JQuery plugin LiveQuery and others. Starting from version 1.3 JQuery offers the methods “live” and “die” that provide some simple event delegation features.

These libraries attach event handlers to the document itself (since every element bubbles up there eventually) that choose the function to call based on the selector the event.target fits too. Even if this is not the optimal solution for every application, I hope you consider the use of event delegation on <tables> and <li> instead of attaching an eventhandler to every single row.

REST rescues HTTP from violent developers

Then I started web development (using PHP) one of the first things I learned was the differences between GET and POST. Back then (in 1999) GET was usually described as bookmarkable, parameter-length/payload-size is limited  and post as arbitrary sized payload (parameters), not bookmarkable.

It seems that as time passed by many developers eigther completely forgot or never learned about the other verbs HTTP is offering (PUT, DELETE, HEAD, TRACE, OPTIONS, CONNECT). Instead of using HTTP as indent by the it’s makers, we added new layers on top (e.g. XML-RPC and SOAP) to practically duplicate the already build in functionality.

With the current strive for simplicity (using JSON instead of XML, Ruby on Rails instead of JSP) some developers rediscovered the Representational State Transfer (REST) architectural style. The basic ideas are simple and most of the time this functionality is exactly what we need:

  • An URI describes the location of a resource.
  • By using the correct verb in an HTTP-Request, resources can be retrieved (GET = read ) and manipulated (POST = create ,PUT = update, DELETE = delete)
  • A resource have one or more representations (e.g. formatted as JSON, XML or HTML)

Now it’s your turn to rescue the web! Use REST, use GET if you want to retrieve resources without changing it’s state and make sure that you don’t use POST, PUT, DELETE to retrieve data. Oh, and it might also help to take a closer look an HTTP itself. Try to log some of your HTTP-traffic while surfing using a tool like wireshark and see yourself what is actually send. Some of the information (e.g. Content-Type, Cache-Control, Content-Language) might be really useful then developing a nice web application.

Further reading on this topic: