Grid Based Design and AJAX 101

Feb 15, 2010
Episode 12
Nick gives an overview of grid based design and Jim breaks down the basics of AJAX.
Spotlight

Thanks to those who make Doctype possible!

Grid Based Design

Sometimes it can be difficult to figure out how you're going to lay out elements on a web page. Designing sites around a grid makes it easy though. In episode 4 of Doctype, I talked about some CSS frameworks, most of which are based on grid systems. What I didn't discuss though, is how you can use a grid system to develop the visual structure of your site.

Grids can help you create clear visual hierarchies when dealing with the usual suspects like headers, navigation bars, and sidebars. They can also help you clean up some of the visual friction on a page, especially when you're trying to guide the user's attention towards one place or another. Typically, a grid-based design is a fixed with page, and the grid is made up of columns and gutters. The gutters are the space between the columns, and they're usually not as wide as the columns are.

You don't have to use a grid, but you just have to be careful to avoid situations where the elements on your page look scattered and unrelated. When you line things up, it makes it easier for your visitors to understand how one page element relates to another.

Breaking Out

I've heard some designers say that using a grid has the potential to make your site too boring. This can sometimes happen, but it's easy to avoid if you make an effort to break the rules a little bit.

Most of your page elements will probably line up with the columns or rows in one way or another, but the grid is really just a guideline. After you've designed your basic layout, try to allow for some elements to break outside the grid. Sites that use an illustrative style or subscribe to the "grunge" trend should break outside the grid more frequently, to add more personality and character to the page.

Breaking outside the grid can be especially useful when you want to draw attention to something. For example, usually when a designer wants a user to click on something, like a call to action button, they'll just make it a different color than the rest of the site. However, it can be much more powerful if you deliberately break outside the grid. Utilizing an unusual shape can help as well.

Templates

There are lots of grid systems, grid generators, templates, and frameworks out there for you to use. I'm personally a big fan of Blueprint, but there isn't one grid system that works for every designer and every project, so you should try a few out on your own. For example, many designers I know like to use the 960 grid system, at 960.gs. Additionally, there are many Photoshop templates and grid generator plugins that can help you create mockups. Check out the show notes for more resources.

Resources

Ajax 101

When the web was born, it was navigated by moving from page to page, each time loading full html pages and changing the url in the location bar. As the web evolved and began to support more rich interactions and applications, communicating with the server by loading a whole new page became a bit cumbersome.

In the late 90’s Microsoft introduced an extension into Internet Explorer 5 called XMLHttpRequest, or XHR for short. XHR allowed the browser to make http requests in the background of the page, without reloading the page. Later, Mozilla and other browsers implemented XHR in the javascript runtime, and it became a w3c working draft. Now it’s pretty much universally implemented in browsers.

The term AJAX is an acronym for asynchronous JavaScript and XML, and is a technique of communicating with the server asynchronously without interfering with the display and behavior of the page. This is accomplished primarily by using the XMLHttpRequest object.

Raw AJAX

Most JavaScript frameworks offer utilities to make AJAX calls easier, but it’s important to see how it works under the covers. We will look at one of these libraries next, but let’s look at AJAX in vanilla javascript.

First we need to get an XHR Object. How we get this object differs in IE and other browsers, so we will add some code to resolve some of the browser issues.

if (typeof XMLHttpRequest == "undefined") {
  XMLHttpRequest = function () {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
      catch (e1) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
      catch (e2) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); }
      catch (e3) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); }
      catch (e4) {}
    throw new Error("This browser does not support XMLHttpRequest.");
  };
}

We check to see if XMLHttpRequest is undefined, if it is, we are going to create our own version of XMLHttpRequest. In our new XMLHttpRequest function, we try multiple ActiveX calls to try to find an XHR object. We wrap each one in a try/catch block so that if it fails, we just try the next one. If none of them work, we throw an error, because XHR is not supported.

var request = new XMLHttpRequest();
 
request.onreadystatechange = function(){
  id(request.readyState == 4){
    // Request completed
    if (request.status == 200){
      request.responseText
      //Success
    }else{
      //Error
    }
  }
}

We now create our request object. This will be used once for the call we want to make. Then we attach a listener to onreadystatechange. This function will get called every time the request object’s ready state changes

The readyState is a number 0 through 4 representing the various states the object could be in, like uninitialized, open, receiving or completed. The completed state is usually what we are interested in, since the data has loaded. This is represented by state 4, so we check to see if the readyState == 4, if so, we are ready to handle our data.

We can access the raw text of the response body through the responseText property. If our response is XML, we can use the responseXML to access an XML tree of our response.

request.open('GET', '/my_url', true);
request.setRequestHeader('Header Name', 'value'); //Optionall
request.send(null);

Now we open the connection using the open method. This takes 3 arguments

  1. The HTTP method to use, such as GET or POST
  2. The URL of your page, which must be on the same domain as the page. See Episode 3, Ajax Security for more details on why.
  3. true, to indicate this should be asynchronous.

Optionally, before we call send, we could call setRequestHeader on the request one or more times to set any HTTP headers on the request.

We finally call send. Send takes a string that will be sent as the body of the request. Since in this example we are doing a GET, there is no body and we pass null. If it were a POST request, we could pass our form-encoded data to send.

jQuery

Now it can be a bit fatiguing to use the straight javascript code to perform ajax requests. It can also be error prone due to so much boilerplate. Fortunately, practically every javascript framework provides utilities for AJAX requests. We are going to take a quick look at jQuery.

If you use another framework, take a look at it’s documentation for more details. If you’d like to get started with jQuery, check out Episode 1 of Doctype where we get you up and running with jQuery.

Ajax calls are made using the jQuery.ajax or $.ajax function. $.ajax takes an object of key value pairs that configure the request. The common ones are

$.ajax({
  success: function(data, textStatus, xhr){ /* SUCCESS */ },
  url: '/my_url',
  type: 'GET',
  data: "foo=bar",
  dataType: "xml" // OR "json", "script", "text", "html"
});

success is a callback function that will be called if the response is successful, that is the request is in readyState 4, and the status is 200.

url is the url to which you want to make your request.

type is the HTTP Method to use for the request. A more appropriate name for this option would have been method, but it’s type.

data is the string that will be sent in the body of the request. This is what will be passed to send() behind the scenes. If you pass it an object, jQuery will automatically convert it to a form-encoded string.

dataType allows jQuery to process the response body intelligently before it calls the complete callback. Based on this parameter, the data argument to success will be different.

Resources