Archive for the ‘UI/UX’ Category

File Under: JavaScript, Programming, UI/UX

Build Dynamic Breadcrumbs With JavaScript

Once upon a time, a web designer wished to communicate a page’s location within the hierarchy of an entire site. There was only a small space available at the top of the page. The designer thought for a while, and eventually found the answer between the keys of his keyboard:breadcrumbs.

What are breadcrumbs? Well, if you have ever browsed an online store or read posts in a forum, you have likely encountered breadcrumbs. They provide an easy way to see where you are on a site. Sites like Craigslist use breadcrumbs to describe the user’s location. Above the listings on each page is something that looks like this:

 s.f. bayarea craigslist > city of san francisco > bicycles 

Translated to English, that says “I’m looking at bicycles for sale within the city limits of San Francisco, which is located in the San Francisco bay area.” Phrased another way, it says, “If I go to the Craigslist home page, click on the San Francisco location, and then choose bikes for sale, then, with a little luck, I’ll find these listings.”

As far as I can tell, the name “breadcrumb navigation” is derived from the children’s story of “Hansel and Gretel” by the Brothers Grimm:

“Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.”

Smart Hansel! So, that’s the skinny on breadcrumbs. Now let’s look at how they can be used on your site to help your users find their way around.

Continue Reading “Build Dynamic Breadcrumbs With JavaScript” »
File Under: JavaScript, UI/UX

Live Thumbnails

This is the JavaScript example from the Webmonkey tutorial Make Images Grow and Shrink With JavaScript. This script will allow you to put “live thumbnails” of images on your website. The thumbnails will grow and shrink when users click on them.


Continue Reading “Live Thumbnails” »

File Under: UI/UX

Create Custom 404 Pages

The web server cannot find the file or script you asked for. Please check the URL to ensure that the path is correct.

Please contact the server’s administrator if this problem persists.




Ha! I bet you thought this page wasn’t here. Ha ha! Hooo! Yeah.

That 404 message above is familiar enough to most people to stimulate a Pavlovian click of the Back button. Which means it’s doing its job. 404 Not Found is the most famous of the HTTP status codes. These status codes are three-digit responses that an HTTP server returns when given a request. These codes fall into three series:2xx, which means success, 3xx, which means partial success (redirection), and 4xx/5xx, for errors on the part of the client and the server respectively. Some highlights include 200 OK, which is the most common, but rarely seen in the flesh — it just means everything worked; 401 Unauthorized, when HTTP authorization has blocked a request; 500 Internal Error, when the server somehow couldn’t provide the requested page. 404 is the one that pops up when the client asks for a page that isn’t there.

So what does your average web surfer do when she hits a 404 page? At best, she trims the URL layer by layer until she finds what she’s looking for, or returns to the home page and searches. At worst, she goes elsewhere and never returns to your site.

Either way, 404s represent a major bleed-off of traffic and source of user frustration, which, as hospitable web providers, we want to do our best to avoid. So what can be done?

Continue Reading “Create Custom 404 Pages” »
File Under: UI/UX

Mulders Stylesheets Tutorial – Lesson 1

Building Web pages with HTML is like painting a portrait with a paint roller. Only truly determined and tenacious souls can achieve the exact result they want. It’s just not the right tool for precision and flexibility.

Anyone who’s used HTML for more than a week knows it isn’t a very effective tool for making Web pages. That’s why we sometimes resort to making large GIFs when we want just the right font or layout. That’s why we’re forced to use convoluted table tags and invisible spacer GIFs to push things around on a page.

It’s ridiculous, really. Our code gets too complicated, our GIFs too numerous, and our final pages too bandwidth-heavy. It’s not exactly optimal Web page construction.

But in late 1996, stylesheets quietly entered the scene. Officially called cascading stylesheets (CSS), it was an elegant cousin to HTML that promised:

  • more precise control than ever before over layout, fonts, colors, backgrounds, and other typographical effects;
  • a way to update the appearance and formatting of an unlimited number of pages by changing just one document;
  • compatibility across browsers and platforms; and
  • less code, smaller pages, and faster downloads.


Despite lukewarm support from many of our favorite Web browsers, CSS is starting to make good on these promises. It’s transforming the way we make Web pages and is the cornerstone of Dynamic HTML.

We’ll spend the next five lessons taking a tour through the land of stylesheets. You’ll learn the basics of how to create and use cascading stylesheets within your Web pages as well as what’s possible with fonts, typography, colors, backgrounds, and positioning.

Continue Reading “Mulders Stylesheets Tutorial – Lesson 1″ »
File Under: CSS, UI/UX

Mulders Stylesheets Tutorial – Lesson 2

Welcome to Lesson 2 of our tutorial on the wondrous language known as cascading stylesheets. After Lesson 1 on the basics of how to use and add stylesheets to Web pages, we can now begin exploring the individual properties that make them more than cool.

Lesson 2 is devoted to fonts: calling them by name, controlling text size, specifying all manner of bolds and italics, and adding special effects. Do you think you can do all these things with existing HTML tags? Well, you can’t.

The CSS properties covered in this lesson include:

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • text-transform
  • text-decoration
  • font


Let’s get started.

Continue Reading “Mulders Stylesheets Tutorial – Lesson 2″ »