Designing for Content & Cookies

Jun 14, 2010
Episode 28
This week, Allison House steps in for Nick Pettit and shows you how to design for content. Then Jim shows you the basics of browser cookies. Yum!
Spotlight

Thanks to those who make Doctype possible!

Also, thanks a million to Allison House for guest hosting! Allison is a web designer at Envy Labs and blogs at Keetee. You can follow her at @allison_house.

Designing for Content

You may have heard the phrase, “If everything is important, nothing is important.” As a designer, it's vital to be opinionated about what matters, then use that to establish a visual hierarchy.

Assigning Importance

To decide which items on a webpage are important, we have to assess their value. We do this by considering our audience’s primary tasks on the website. Ask yourself: why is a user on this screen? What do they want to do? The content associated with those tasks has the highest value.

Let’s say we’ve been asked to create a blog. The content is a title, navigation, blog posts, calls to action, and a few items we often see in sidebars. To organize this content, we can assign a low value to items that aren’t essential in helping the user achieve their primary goals, like these sidebar items.

Keep in mind that every extraneous bit of information competes with important, relevant content. If you have an item that's nice to have but seldom used, consider eliminating it.

After assessing your content in the context of the user's experience, you should have a clear picture of what's important and what's not.

Visual Hierarchy

Once you’ve determined the importance of your content, create a visual hierarchy to direct the user’s attention. This boils down to grouping relevant bits of information, then emphasizing your most valuable content and de-emphasizing less important stuff.

The elements and principles of design are the key to establishing a visual hierarchy. If you give two pieces of information the same visual style, you’re saying that they’re equally important. Smashing Magazine features a lot of content on its website, but does a good job of differentiating it using shape, proportion, and color.

Most visitors are seeking blog posts, so each blog post title is larger than any other text on the site. Calls to action are clarified with the use of color—orange for the RSS feed, and blue for Twitter. Proximity and shape group like items.

Finally, the less important stuff is smaller in size and lighter in color.

Cookies

The web was designed as a stateless system, meaning that no information is stored or maintained between pageloads.

This system made a lot of sense in the early days of the web when it was all about loading documents, but once we started wanting to build more complex websites that allow us to log in and do things, we need a way to remember information between pages.

Cookies are the web’s answer to this problem. Cookies allow us to store small amounts of information in the web browser, and the web browser will make that information available to the server and browser when loading that site.

This allows us to remember which facebook user this browser is logged into, what the last item you viewed was, or any other piece of information needed to make the site function.

When setting a cookie, we assign a string to the document.cookie property. The string has a specific format:

document.cookie = 'cookiename= cookievalue; expires=Thu, 17 Jun 2010 20:47:11 UTC; path=/'

First we set the name and value of the cookies. We can store multiple pieces of info, each assigned to a unique cookie name. We say our cookies name equals, then the value of our cookie. Then a semicolon, and we say expires= and pass it a date in the format shown above. Finally we place another semicolon and give it a path. This allows us to restrict the cookie to certain directories of our site. Typically we just put a single slash, to indicate the whole site can use it.

Now this can be really inconvenient to do over and over again, so let’s create a function to make it easier.

function setCookie(name,value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires="+date.toGMTString();
    }

    document.cookie = name+"="+value+expires+"; path=/";
}

We will call it setCookie, and it will take a name, value, and optionally an expiration length, in days. If we omit the expires clause of our cookie, the cookie expires as soon as the user closes the browser.

In our function we first check if the expiration is set, if so, we create a date object, and set it’s date to the correct time in the future. We do this by adding the current time in milliseconds, to the number of milliseconds in the number of days passed to this function. So we multiply days times the 24 hours in a day, times the 60 minutes in an hour, times the sixty seconds in a minute times the 1000 milliseconds in a second.

We then create our expires clause by calling toGMTString on this new date.

If date was ommited, we simply leave it blank.

Finally, we create our cookie string by joining the name, value, expires and path info, and assign it to document.cookie.

Well, now we can set a cookie, but it’s no good to us if we can’t read it, let’s take a look at how to do that.

When we inspect our document.cookie, we don’t get back the same string we assigned to document.cookie, instead we get something like this:

document.cookie; //=> "cookie1=test; cookietwo=another value"

Each key and value separated by and equals sign, and each pair separated by a semicolon. If we want to get a specific value, we have to do a little work, so let’s write a getCookie function

function getCookie(name){
  if (document.cookie && document.cookie != '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i].replace(/^\s+/,"");
      // Does this cookie string begin with the name we want?
      if (cookie.substring(0, name.length + 1) == (name + '=')) {
        return decodeURIComponent(cookie.substring(name.length + 1));
      }
    }
  }
  return null;
}

First we check that document.cookie exists, and it’s not empty.

We then split the cookie into an array where each element is a string with the key and value of one of our cookies. To do this we call split on the string, and tell it to split on the semicolon.

Then we need to loop through each of our cookies with a for loop. You can learn more about the for loop in Episode 25.

Since the browser place a space after the semicolons, our cookie string may have a space preceding the actual name of the cookie. We can remove it with this regular expression replacement, that replaces all the leading whitespace, with nothing, thereby removing it.

Finally, we want to check if the cookie in our loop is the one we are looking for, so we compare our desired cookie name plus an equals sign, to the first part of the string.

If it matches, we can extract the latter half of the cookie, and return it. The browser will encode certain characters, so you want to call decodeURIComponent on it.

If we make it through all of the cookies, and don’t find the value, we return null.

Resources