I respect Mozilla for their products, their overall ideology and their great community. It’s probably safe to say Firefox is easily the #1 most used application on my computer. And Thunderbird doesn’t lag too far behind. I started using Sunbird a while ago as well, but stopped when Lightning became better integrated into Thunderbird.

The logos/icons for each of these applications are well crafted, extremely iconic, and work well together as a “suite”, contributing to a consistent overall brand image.

That said, I am somewhat perplexed by a really small detail that has gone unfixed for years: The Mozilla 16×16 Windows application icons.

A Small Thing

Take a look at the Mozilla icons lined up in the Windows quick launch bar below.

Though minute in differentiation, the icons lack a consistent size and alignment. In addition to this, the icons (especially for Sunbird) have not been scaled down too well, causing a loss of detail.

Making Small Things Consistent

As simple as it is, all I’ve really done here is scaled the original larger icons down to 16 pixels and ensured that they all line up and appear to be the same size.

The result: a much cleaner, visually consistent set of icons for your Windows quick launch bar.

Feel free to download the new set and use them for your quick launch bar. I’m going to see if the folks over at Mozilla might have any use for these.

Download the Mozilla 16×16 Application Icon Set (zipped)

As I’ve been writing posts for the Paramparam notebook, I’ve encountered the need for a method of displaying images that allows me to specify what area of an image has greater priority within a dynamic width web layout. This is to ensure that when the width of the site is reduced (on smaller screen resolutions for example), the less important edges of an image are being cropped.

Within the limits of CSS and XHTML and ensuring cross-browser compatability, I will share this method with you, the reader of this humble notebook.

The Method

This is a clean and simple trick that maintains expected img tag functionality, while allowing for greater control over the way images are displayed across various browser widths for fluid XHTML/CSS layouts.

The secret is to replicate the image in the background of the container inline within the HTML using style="background-image:url();" and making the img itself transparent. It’s not really as goofy as it seems because you keep the original img, which allows standard drag and drop/save image functionality, the ability to be hyperlinked AND maintains the original height of the image block (Though you do need to set the height of the img inline because of a bug in IE7).

The below example HTML block is calling up the imgContainer.center class for the div. Note that we specifiy the height attribute of the image.

1
2
3

<div class="imgContainer center" style="background-image:url(/notebookCase/imageAlignment.gif)">
   <img src="/notebookCase/imageAlignment.gif" height="135"/>
</div>

The different classes for the container coordinate the different locations that the image will be aligned/cropped by using the background-position style. Using the following CSS styles for the various class selectors, we can left align, right align or center an image inside any containing block element, while hiding any overflowing content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.imgContainer {
   border: 1px solid #0083cb; /* not necessary, but used to outline the block */
   overflow: hidden; /* hides all that goes outside of its edges */
}
.imgContainer.center {
   background-position: center center; /* centers the background image specified inline */
}
.imgContainer.left {
   background-position: left center; /* left aligns the background image specified inline */
}
.imgContainer.right {
   background-position: right center; /* right aligns the background image specified inline */
}
.imgContainer img {
   opacity: 0; /* hides the image to make the background appear as the image */
   filter: alpha(opacity=0); /* and of course something non-standard for IE */
   width: 100%; /* makes the image the same width as its container, for IE compatibility */
}

The addition of width: 100%; to the style for .imgContainer img, which sets the width of the (transparent) image to the width of the container, is the reason why we need to specify the height inline within the HTML. This is all necessary to ensure that the method works in Internet Explorer as well as the more standards compliant browsers.

I can now ensure that when the browser is scaled down, the red triangle is kept in view, the blue circle is kept in view, and the green square is kept in view, respectively, all by simply modifying the class name of the containing div. (Try resizing your browser to see it work):

class="imgContainer center"

class="imgContainer right"

class="imgContainer left"

It’ll be a fluid process and will keep getting better and more refined over time, but the first step is to make all the divs and spans and margins and padding all line up into perfect harmony.

In case you’re still interested, you can view my old flash based website at this new location.

Until next time, have a wonderful spring day!

Summary

Magor Communications is a start-up provider of high definition, cost effective, video collaboration systems.

I designed and conceptualized for Magor an aesthetic and usable user interaction model and visual design for a projected software release, while coordinating with the lead project manager and collaborating with an enthusiastic software development team. New features were conceptualized and integrated into the proposed product model, while existing features were refined and made much more usable and integrated.

Summary

I had a great time working with Isca Networks designing custom touchscreen visual design and interaction for their highly versatile Interact Platform kiosk system.

In addition to this, a series of marketing assets were also produced, including a flash presentation of the product.

Summary

Parmar-Serafini Graphic Designers are a small, very talented duo of graphic designers here in Ottawa.

To coordinate with their revamped simple and straightforward corporate identity, they wanted a simple and straightforward website, while maintaining visual impact and a focus on content.

Working in close collaboration with the firm, I designed and developed the website’s interactivity, backend and structure while using a developed visual guideline based on the company’s new corporate identity.

Summary

The Lowe-Martin Group is an established Ottawa-based company that provides for industries a wide range of primary services including; digital printing, commercial printing, logistics & warehousing, direct mail and e-Business solutions.

Working with an extremely tight timeline, and working closely with their communications department, I was able to provide The Lowe-Martin Group with a full featured and fully functional CMS-based website in less than 2 weeks.

The company was then able to add and manage the written content, job postings, news events and featured content all on their own after a brief tutorial.

Summary

I was contacted by a small but growing Prince Edward Island based software group to provide usability analysis, as well as interaction and visual design services to help improve one of their products: LeadToClose. The project provided the opportunity to work collaboratively with users, project managers, sales managers and developers alike.

LeadToClose was a highly functional web application that allowed agents and virtual assistants from many diverse fields (mostly real estate) to track leads, manage tasks and potential client relations and most importantly, understand which of their marketing collateral was most effective at producing new leads.

Summary

An accessible, sharable and usable industrial design solution that allows individuals with severe single arm dysfunction to learn and practice competitive archery.

The project began with thorough and immersive product, market, user and environmental research, leading to the conceptualization of some key product concepts. These concepts focused on accessibility and sharability to reduce overall costs for instructional facilities which rely on equipment sharing to educate new students and get individuals involved.

Test models were developed and test plans were executed on targeted populations, ensuring key usability issues were addressed and eventually resolved.

Once the structural integrity and usability of the device was validated, the design was further refined with a focus on visual styling for the targeted market.

Summary

TrueContext was a company that produced highly capable mobile forms applications.

Being the in-house visual designer at TrueContext was a great experience. There were so many opportunities to contribute to all aspects of the product suite offered, and that is exactly what I did. Working in the company’s “Human Factors Lab” enabled me to help bring to life a plethora of Interaction Design innovations specific to the applications being developed.

I was very privileged to work intimately with the development and marketing teams to provide high quality visual assets and specifications for practically all areas of the company’s operations.

Summary

Over the summer of 2005 I was presented with a unique opportunity to collaborate with a very talented systems engineering student at Carleton University, designing and building a pair of promotional kit-based robots for the Office of the Dean of Engineering and Design.

The project provided great opportunities to build and work with dynamic electronic systems. Limitations on time meant for quick decision making and provided direction and reasoning for specific building methods, where rapid-prototyping tools, thermoforming and other building techniques revealed themselves as most appropriate.

Summary

A safe, easy to handle, easy to maintain and approachable electric chainsaw redesign.

The primary aim of this industrial design studio project was to redesign an existing power tool product. I chose to specifically concentrate on the electric chainsaw and make direct usability and aesthetic enhancements that could be applied to the majority of existing electric chainsaw products on the market today.

In-depth market, user, product and usability analysis was done, which lead to conceptual visual exploration of solutions to key issues revealed through research.

Summary

In my early years, I had the privilege to be contracted by clients such as Real Networks, Microsoft, and Lycos, designing skins for their media player software. In most cases I was designing with and programming with newly developed UI engines alongside those that were developing them.

I was known as “doodle” within the community. You can call me mr. Doodlebugg if that pleases you. (I was pretty young back then)