For a redesign project at work, the new design called for bread crumbs. In my opinion, bread crumbs are a great thing to add to a site, and others agree. I didn’t want to have to specify anything on each page for the bread crumbs to work, so I wanted to do it all dynamically.

For the project at work, I did it in ColdFusion; but on my own, I did it in PHP. I figured the way that I would have to do it would be to parse the URL to see which folders I was in.

The Code


<?php require('buildbreadcrumbs.php'); ?>

<ol id="breadCrumbs">
 <li class="first"><a href="/">Home</a></li>
<?php
 $breadCrumbs = $_SERVER['REQUEST_URI'];
 if($breadCrumbs != '') {
  $crumbUrl = '/';
  $toks = split('/', $breadCrumbs);
  for($i = 1; $i < count($toks) - 1; $i++) {
   $crumbUrl .= $toks[$i] . '/';
   if($breadCrumbMapping[$toks[$i]] != NULL) {
    echo '<li><a href="'.$crumbUrl.'">'.$breadCrumbMapping[$toks[$i]].'</a></li>';
   } else {
    echo '<li><a href="'.$crumbUrl.'">'.$toks[$i].'</a></li>';
   }
  }
  echo '<li class="last">'.$pageTitle.'</li>';
 }
?>
</ol>

The Explanation

The first thing that I do, is include the file buildbreadcrumbs.php (I’ll get to that later). Then the idea is that we will determine what folders we are in, based on the URL. We split the URL based on the slashes and step through them to make links.


<?php
$breadCrumbMapping = Array();

/*Folders to be mapped*/
$breadCrumbMapping['f1'] = "Folder 1";
$breadCrumbMapping['f2'] = "Folder 2";
$breadCrumbMapping['f3'] = "Folder 3";
?>

This file is building as associative array to display different text than the folder name. There are some situations where the folders are not too pretty, so basically you just add the folder name (f1, f2, f3) to the associative array and assign it a “pretty” name (Folder 1, Folder 2, Folder 3). If you don’t assign a pretty name to a folder, it will just display the folder name instead.

There has been a lot of talk going on recently about HTML emails, and I thought I would weigh in and give my two cents. Outlook, the most popular email platform, announced that they were switching their rendering engine. The decided to switch to using the Word engine! Excuse me, but I think Word is word processing software and in no way should it be used to render HTML. I think we have all seen the output when you convert a Microsoft document to a web page. It’s scary.

So in the wake of Microsoft taking a step backwards, the real question is: does it even matter?

What do the experts say?

Emails seem similar to RSS feeds. We are getting the content without all the other crap. We need to ask ourselves, do we want to see RSS feeds completely designed? Nope, because then we might as well visit the site.

Remember how we thought getting cross-browser consistency was hard, how about cross-client HTML emails. It’s a nightmare. Some support CSS. Some strip it all out. Some support inline CSS. It’s awful. My favorite quote from the article, when he is discussing CSS support:

I think that after he cleared his head a little, this article is very on-point. HTML email should be something that people specifically sign up for. It should not be the selected option; they should have to choose it.

So what do we do?

I think we need to discuss the problems with full HTML emails with the marketing people who are pushing them. Is this really what’s ideal? Is this going to receive the most positive feedback? I think not. I would be perfectly content receiving a simple mostly text email with limited branding (a logo). Not to mention how much easier this would be to create.

Designing Interactions is quite a book. If you are interested in technology, it’s definitely a must read. While it’s over 700 pages, there are tons of pictures so you can fly right through it.

The book tracks back to the creation of the first mouse and the iterations of prototypes it went through. While creating physical technology is vastly different from creating websites, I feel as though you can learn a lot from the book.

Summary

The book has interviews with “42 designers who shaped our interactions with technology”. Think about the first computer. Think about the first laptop. Think about the first Palm Pilot and the OS running on it.

Hearing the history behind the technology that we use everyday is fascinating. You really get a lot of detail into how these people worked and their thought process.

I think the thing I found most interesting was learning that there is a similar process to prototype creation and usability testing between physical design and web development.

I don’t think there is really any one type of person who should read this, everyone would find something interesting in it. So get it already.

My birthday is coming up on Thursday, so I thought I would make up a list of 5 things I wish to happen with the web in the next year. I know that most of these will not happen in that time frame, but I can at least wish right?

The List

For everyone running IE6 to be upgraded by automatic updates

As all web developers have experienced, IE6 sucks. But there is good news; IE7 is a huge step forward. Sure it still has some of the same problems that IE6 had, but it is basically on par with other standards compliant browsers.

Thankfully, Microsoft is pushing out IE7 in their automatic updates, and the number of people upgrading is rising quickly. Before we know it, IE6 will no longer be the most popular browser any more.

For the term “Web 2.0” to never be heard again

“Web 2.0” is meaningless, and it needs to be vanished from everyone’s vocabulary.

For all standards compliant browsers to support attaching multiple background images using CSS

Safari already does, why don’t other standards compliant browsers? Just take a moment and think about how wonderfully simple the markup would be for rounded corners. Ahh maybe some day.

For the ability to render all fonts on the web

Why can’t we upload fonts to our servers and have the browsers download them when needed? It can’t be the technology. It seems like a simple task. Can you image the possibilities if designers were not restricted to web-safe fonts? While, sIFR is awesome, there are so many limits to it. This needs to happen, now.

For all standards compliant browsers to support the nth-child selector

When browsers support Structural Pseudo-Classes, or more specifically, the n-th child selector, it’s going to be great. We can handle all of the alternating styles that we want using only CSS.

What else?

So, while I was doing my normal reading of RSS feeds, when I saw a link to white paper from Solid State Group. The person who linked to it, said how great number 4 is.

Are we not going to think about accessibility anymore? What about people who cannot use their mouse to point and click? They use the keyboard. Meaning that they TAB between the links to figure out what they want to use. By Firefox adding that outline, it helps to show which link they are currently focused on.

Sure, I think there are some instances where it’s OK to remove the outline, but not for EVERY link.

This white paper really did not show much, and in my opinion I have already discussed much better methods for Transparent PNG’s in IE6 and Min-width using Dean Edwards’ IE7 Script and a more accessible Image replacement technique.

I love all these tutorials on the web, but we need to warn people about the risks when doing such things.

While reading forums, blogs, and other web development related resources, I keep coming across people asking how to get started in CSS. They may have be table-converts or they may be new to the field, but the question keeps coming up.

In my opinion, a lot of people are going about it the wrong way. Sure they may be able to get a nice design that works across browsers and platforms and their code may validate. But look under the hood of a lot of those sites. The code can sometimes be just as bad as using a table.

Where to Start

I think that the key to succeeding in the field, is to begin by learning semantic HTML. Sure, you may have been using HTML for years while doing table layouts, but you are also the same people who were using nested blockquotes to increase your margins.

What is Semantic HTML?

Now if we apply that to HTML, it is the idea that every element has a meaning. Yes, there is a reason that when you want emphasize something you wrap it in an em tag. Instead of simply choosing elements because of how they are styled, you should be choosing elements because of their meaning.

Once you have the semantics down, then you get to use CSS to hook into all those wonderfully semantic elements that you have used.

Just My Thoughts

That is not necessarily how I learned, but I think that will be the most beneficial way to learn in the long run.

Some Resources

Update

Dean Edwards has updated his scripts. I have written a new entry describing the updated IE7 scripts.

At An Event Apart Boston, Eric Meyer discussed how IE7 is quickly being adopted. Since this is the case, we can treat IE6 as more of a secondary browser now.

We should all start to use the Dean Edwards IE7 script to bring IE6 up to par with standards compliant browsers.

The history behind the Dean Edwards script is that he wrote it when Microsoft had said that they were not going to produce any more versions of Internet Explorer. He wanted to provide a JavaScript solution to add more compliance to the browser.

Using the Script

First, download the Dean Edwards script. Next, extract the files to the root of your webserver in a folder called ie7. It needs to be in this folder, because some of the scripts have a dependency on the folder.

Finally, just include the script in the head of your document using conditional comments:


<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->

On the configuration page, Dean shows you which scripts do what. By including the ie7-standard-p.js, you get the support of the following scripts:

The only other script that I have included as well is the ie7-css3-selectors.js to include support for CSS3 selectors. Think of all those wonderful attribute selectors you can start to use in your project. It makes me all warm and tingly inside to think about where CSS can go when the browsers are up to the task.

Enjoy!

This really should be one of the first steps you take in a project. By doing this simple task, you will save yourself from a lot of IE6 headaches.

Sure, this only works for IE6 users who have JavaScript enabled. But honestly, is there anyone who is using IE6 who actually turns off JavaScript? If they do turn off JavaScript, it may just break some presentation layer things, but the site should still be perfectly usable.

I was ordered by my fellow “Front-End Developer”, Nate, to write up a little blurb about what I thought about Spider-Man 3.

So I caught the 10:45 showing, and the theater was packed. I am going to go ahead and predict that it is going to break the record for weekend gross.

While it is no movie that is going to win any award, it is the typical Spider-Man movie filled with action, love, and gratuitous humor.

I will say that were was about a 15 minute span where it almost feels like you are watching another movie. It was just a bizarre sequence of events for the movie, and I think they could have accomplished it in a different way.

If you liked the first 2, you will like this one. This movie is a roller coaster of emotions for Spiderman, and it was well worth the price of admission.

So my co-worker at work today was slicing a design, and the designer said that the navigation had to be images. Being the good little accessibility people that we were, we were trying to figure out a way to use images, but have text also show up when images are disabled.

So my co-worker went with the quick fix (for now), a JavaScript onmouseover solution, and I told him that it was lame. I told him there had to be a way to use CSS to do it. I didn't have time to do it at work, so I played with it, and I have found a solution.

The Markup


<ul id="nav">
 <li><a href="#">Text to Cover Here</a></li>
 <li><a href="#">Text to Cover Here</a></li>
 <li><a href="#">Text to Cover Here</a></li>
 <li><a href="#">Text to Cover Here</a></li>
</ul>

Now, instead of placing an image in the anchor tag and then using JavaScript to change the hover state, I thought, why not just add an extra span at the end of the anchor tag. I chose the end, but it also works with it at the beginning. I think it makes more sense to have it at the end though, so that the text within the anchor tag is read first by screen readers and bots. So this is what our markup looks like now:


<ul id="nav">
 <li><a href="#">Text to Cover Here<span></span></a></li>
 <li><a href="#">Text to Cover Here<span></span></a></li>
 <li><a href="#">Text to Cover Here<span></span></a></li>
 <li><a href="#">Text to Cover Here<span></span></a></li>
</ul>

Let’s Style It

So I started off with just some normal styles that you would apply to a navigation: zeroing out margins and paddings, floating it, removing the list-styling, and giving it a width.

Next, I floated the list items so that they would be in a line horizontally. This is where it finally gets interesting, I promise. I styled the anchor tag like so:


ul#nav li a {
 background: #FFFF99;
 display: block;
 height: 30px;
 padding: 0 5px;
 width: 115px;
}

Since this is just an example, I put a random background color on (to make sure it didn’t show through in the final example), and I gave them all the same width. Not a likely situation, but I didn’t feel like giving each list item an id. That should be self explanatory enough.

Now, when I think back to the talk that Eric Meyer at An Event Apart Boston, he kept stressing that to a browser, an element is just an element, and you can do anything to it. So, my plan was to just set the anchor tag to be relatively positioned so that it would contain the span.

The next step is to add the background image to the span. Now one thing that needs to be realized is that you cannot use a transparent image. But I don’t think that really causes much of a problem in most cases.


ul#nav li a span {
 background: url(/images/content/2008/01/nav.gif) no-repeat 0 -30px;
 cursor: pointer;
 display: block;
 height: 30px;
 left: 0;
 position: absolute;
 top: 0;
 width: 125px;
}

The only things to note from that is that I combined the normal and hover states into one awesome image (I wasn’t worried about how pretty it looked). I also had to add the cursor property for our best friend, IE6.

Ok, cool. We are on our way. Now we just need to shift the background image on the hover state:


ul#nav li a:hover span { background: url(/images/content/2008/01/nav.gif) no-repeat 0 0; }

But…

Did you check it in IE6? When I checked it in Firefox and IE7, everything worked beautifully. You can turn off the images and you get the text underneath.

When you do check it in IE6, you will notice that the hover states stay on. It’s very odd.

After a lot of tinkering, I finally found something that worked. If you add the following to the anchor when it is in its hovered state, it for some reason fixes it:


ul#nav li a:hover { background: 0 0; }

I have no explanation, but it does not seem to have any adverse affects on other browsers.

Let’s Bulletproof It

We can add a simple property to the anchor tag so that when someone resizes their text, it does not poke out from under the image:


ul#nav li a {
 background: #FFFF99;
 display: block;
 height: 30px;
 overflow: hidden; /*Added for bulletproofing*/
 padding: 0 5px;
 position: relative;
 width: 115px;
}

More Bulletproofing

If you wanted the text to resize gracefully when images are disabled, I suppose you could set your height in ems. Then you would just need to build some extra blank space into your image, so that it would work when images are enabled.

So hopefully that helps out my co-worker. I think it potentially solves a pretty big problem with CSS image navigation with images disabled.

Well, I ran into a little problem with the splintered striper, and I have a solution to the problem.

The problem occurred if you had multiple class names on the element you are trying to stripe. That may not make much sense, so I guess an example will suffice.

Striping Example with Problem


<ul class="stripe something">
 <li>This is an odd row.</li>
 <li>This is an even row.</li>
 <li>This is an odd row.</li>
 <li>This is an even row.</li>
 <li>This is an odd row.</li>
 <li>This is an even row.</li>
</ul>

We are going to pretend that the class name something actually does something useful. Then using a JavaScript addLoadEvent function, we will add the striping event to run on page load:


addLoadEvent(function() {
  striper('ul','stripe','li','odd,even');
});

Essentially, we have told the striper function to stripe all list elements (lis) that are descendants of unordered lists (uls) with the class name of stripe. Then we want to apply the classes odd and even to the alternating list items.

Here is where the problem lies. Since there are two classes on the unordered list, the striper function does not recognize that it has a class name of stripe. Here is the problem in the code:


if ((parentElementClass == null)||(currentParent.className == parentElementClass)) {

Since we are just seeing if the class name of the current element is equal to the class name of stripe, this is not true.

I have created a simple demo page with an unordered list, table, and paragraphs that are supposed to be striped.

Fixing the Striper

Really all you have to do to the JavaScript is to remove the line from above and replace with the lines below:


var pattern = new RegExp("(^| )" + parentElementClass + "( |$)");
if ((parentElementClass == null)||(currentParent.className.match(pattern))) {

That takes the class name and splits is with a regular expression. So now you could have fifty class names on the element, and it will still work

I’m sure there is another way to do that easier, so feel free to let me know if there is.