Ship or Die

The first major installment of the new site design is live on the Khan Academy site. The first round of changes was targeted at giving the site better bones to work with in the future. The focus was on the visual design of the header/footer and navigation elements. A big thanks goes out to the folks at Viget Labs who helped us by volunteering their time to come up with the color palette and many of the visuals (especially the new logo treatment, which is awesome).

A few notes on implementation

I learned a few useful things while implementing this that might be helpful to someone else, so here they are in no particular order:

display: inline-block;

If you look at the old design, you can see that we’ve moved all of the social links into the same area, including the Facebook Like element. The problem here is that the Like button loads via JS and is actually some custom DOM element that contains an iframe. The problem here was that because all of the nav elements are displayed inline, and the FB Like button load times are dependent on an external resource that would frequently load more slowly than the rest of the page, the navigation elements would “pop” to the left after it loaded.

That’s where display: inline-block; comes in. After doing a bunch of research, I discovered that this value is actually widely supported as long as it’s being applied to elements that are rendered inline by default (span, em, b). That includes support in IE. In any case, a helpful trick if you are trying to align elements vertically or, as in this case, define a fixed width for an element that loads late to prevent the rest of the layout from visually popping.

Smashing a footer to the bottom of the viewport

This is somewhat old news, but again, I had to do some digging to make it work cross-browser, so I thought I’d share. To force a footer to the bottom of the viewport always, even on pages where the content takes up less than the vertical height of the viewport, as it does on many of our exercises, you need to do three things:

1. HTML/Body elements take up the entire viewport. 
   html, body { height: 100%; }
2. Create a block element that takes up the entire body and position it relatively. This is important for cross-browser compatibility and the relative positioning is needed to position the footer.
   #page-container { min-height: 100%; position: relative; }
3. Tell the footer to stay where it belongs.
   #footer { position: absolute; left: 0; bottom: 0; }

CSS3 Gradients

Are awesome but for the fact that they don’t work in versions of Firefox older then 3.6. That’s right — 3.6, the very latest stable version. That makes them almost impossible to rely on in my opinion. This only really affected us in the topmost part of the header where Viget gave us the cool treatment for the logo that required us to combine an image gradient with a CSS gradient. Otherwise, we could have fallen back to a solid color for the bar. Still not nearly as nice of an effect overall, but functional. If you’re willing to fall back to a solid fill in older versions of FF, here’s a sample cross-browser CSS gradient that works in IE, Chrome, Safari, and FF 3.6 and up:

#gradient {
    background: #eee;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#dddddd');
    background: -webkit-gradient( linear, left top, left bottom, from(#f7f7f7), to(#ddd));
    background: -moz-linear-gradient( top, #f7f7f7, #ddd );
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ddd;
} 

Still to come

A homepage redesign is in the works, as well as a more comprehensive change to navigation. In addition, there are a bunch of pages — About Us, Individual Reports, and several more — that haven’t been touched yet and need some serious refactoring to fit into the new design. Man, there’s a lot of work to do; better get back to it!