Firefox 3 To Ditch Unified Cross Platform Look

Mozilla’s Alex Faaborg announced a week or so ago that Firefox 3 would focus on visually integrating with the operating system:

Visual integration with Windows and OS X is our primary objective for the Firefox 3 refresh.

This is great news for Firefox, because as I have mentioned before, its user interface has really been the achilles’ heel of the browser, especially on the Mac.

Mozilla’s user experience team literally wants to do a better job of visually integrating with Windows than IE, and a better job of visually integrating with OS X than Safari. I don’t know if we will be able to pull that off, but that’s the goal.

I’m glad that they’ve recognized this as an issue and I can’t wait to see what they come up with. If Firefox actually did look as good or better than Safari on a Mac, I might use it as my primary browser.

Via Beauty And The Geek: Firefox 3’s Visual Makeover.

Comm Lab Website Design

One of my projects this summer was to get a full website out and working for the Communications Labs at Simmons College (where I work). The site is basically a resources and news area for students. The students that use these labs end up spending a whole lot of time there, and I wanted a space just for them, with the information they needed.

I actually started this project about a year ago. We had a whole bunch of documentation for the labs written, but mostly in pdf and Quark documents. My goal was to get everything online for students to have easy access. So, without much of a plan, I created a very barebones site and started adding stuff to it.

Another member of our department also creates a monthly newsletter which she then emails out to all faculty and students. It usually comes in the form of an attached pdf. I figures that I should add that to the site as well.

So, at the beginning of last summer I basically had an overgrown list of links with a very bare bones design. My goal was to create a more cohesive site, with a much more appealing design. We do offer a major in graphic design after all.

My thoughts design-wise were that I’ve really been digging the plain old black and white designs that I’ve been seeing around. I also like the grid. Given the nature of the page, I thought it was a good place to also finally figure out how to use sIFR.

I had a hard time figuring out what my secondary color would be. I’m always drawn to green and blue, but it somehow didn’t quite feel right. I wanted to use red, but that can seems a little too harsh or sterile sometimes. Then it came to me: magenta. It’s perfect for the site.

So here is what I ended up with:

Home Page

Commlab Website Home

Archives page for The Comunicator

Commlab Website Communicator Home

How to make clipping path (example documentation page)

Commlab Website Clipping Path Page

You can see the whole site here.

Tripoli CSS Rendering Foundation

David Hellsing has created a new CSS Rendering Foundation (if that confuses you, think framework) with cross-browser compatibility.

The CSS files basically include a global reset, generic styles, and a print stylesheet. There is also an IE stylesheet for specific IE bugs. The CSS files looks pretty good.

All of the typography is based on The Elements of Typographic Style:

Vertical rhythm, line-heights, margins and font sizes have been carefully selected to follow classic typographic guidelines from books like “The Elements of Typographic Style“. All measurements are set in em’s, so it’s very easy to do elastic and dynamic layouts while still keeping typographical proportions. Rules like font-size and font-family are set globally so you can easily override them with new values that suits your project without ruining the natural flow.

Even cooler, Tripoli also introduces the idea of using “plugs” to extend the generic base code:

One of the ideas behind Tripoli is to allow external plugs to extend the generic base. To demonstrate this, I have created a negative plug that changes all colors to prepare for a negative layout. Other plugs could be sidebars, menus, rounded boxes, code formatting and other helpful widgets.

The Tripoli site includes several examples of how it works. My particular favorite is the example where he takes a page from a W3C spec and completely restyles it (links to the changed styles at the top of the document):

Blueprint CSS 0.4 Released

Okay okay, So this isn’t exactly news. But it is news to me. Apparently I completely missed the realease (on 8/11) of a new version of Blueprint. Its got some nice new features including:

  • Font sizing now uses ems
  • A compressed version of the CSS is included
  • IE bug fixes
  • Incremental leading

You can read the release notes here and download the new version from the Google Code site:

These are all quite welcome changes. One of the first things that I noticed about Blueprint was that the CSS files were quite bulky. Much of that bulkiness was because the author was striving to make everything easy to understand. That said, not having a compressed version was a noticeable absence. The second thing I noticed was that all of the font sizes were in pixels. I didn’t really think on this too hard, because using pixel font sizes simplifies the grid dramatically. Looks like both of these issues have now been patched up.

I’ve been working with Blueprint since it was released and I have to say that I’ve been quite impressed overall. My first thought when I read about it was, “Oh great, another framework I have to learn.” But after taking a quick look at Blueprint, I realized that it is actually very straightforward and easy to use. It took very little effort to adjust my coding to it. Also, it made using a grid a lot easier because all of the grunt work (and math) was already done.

That said, the site that I actually designed using Blueprint bears very little resemblance to the original Blueprint grid. I ended up modifying quite a bit of the grid.css file to fit with my design better. I also overwrote most of the type styles from typography.css. I spent a good amount of time yesterday forcing sIFR to render my headers without messing up the grid. Now I’m wondering if it’s worth it on this site to try and mix in the new release of Blueprint. Perhaps I’m missed the point of using a framework? Oh well, at least getting started on the site was easy.

Blueprint Grid CSS Generator

Here is a very nice little addition for Blueprint CSS. It allows you to customize the default grid used in Blueprint. Once you’ve specified the new grid, a new grid.css is produced. Even better, you get a compressed version as well!

Via Vitamin News.