. . . he would have been 3 today, I miss his smile . . . I miss his face . .

[audio:always.mp3]

I guess I speak for all designers when I say that Internet Explorer is the worst browser to design for.  Each version has it’s own quirks and hacks.  Even when you write standards-based code, it will always render differently in Internet Explorer (esp. earlier versions).  I’ve completely given up on IE v. 5 and just test my layouts in IE v. 6 and above.  I figure that if you are still using IE v. 5,  you won’t be able to tell the difference between a broken layout if it hit you on the head anyway, so why bother?

As much as possible, I refrain from using any IE hacks on my CSS – except for the PNG fix.  To see how your website renders on Internet Explorer’s earlier versions, here are a couple of tools to help you out:

• IE NetRenderer – Found at http://ipinfo.info/netrenderer. Just choose which version of IE you want to test for and enter the url of the website you are currently designing and it will return a snapshot of the site rendered according to the selected version.  I find this a quick and very useful tool especially if I just want to see how other websites (those I didn’t create) render.  It’s also useful for Mac users.
• IETester – this is actually a software package that you install on your PC and is my tool of choice for testing all my websites.  I highly recommend using this tool instead of installing separate standalone versions of IE. Download the tool at http://www.my-debugbar.com/wiki/IETester/HomePage.
• Lastly, there’s the standalone versions of IE.  If you prefer that, you may visit http://tredosoft.com/Multiple_IE where there is a compiled installation package with IE versions dating back to version 3.

So some of you might’ve heard that I’m volunteering for the 2010 Winter Olympics here in Vancouver.  For all you people living near or below the equator, the Winter Olympics is big in countries where there’s snow (mainly the North).  There was actually a debate about this among fellow volunteers on which of the olympics is more popular – being that most of my colleagues are Canadian, winter wins out – I sided with summer olympics though as I don’t remember ever watching the winter olympics growing up in the Philippines.

I have gotten a lot of questions about why I’m volunteering and what it takes to be a volunteer . . . regarding the 1st question, I’ve always wanted to be a part of the olympics and since competing as an athlete is definitely out, I guess  I’ll take whatever role I can fill . . . the call for volunteers actually started 3 years ago and I signed up right away.  After a year and a half, I was phoned and interviewed – that was the first contact – afterwards, I got a callback and was asked  to appear for an in-person screening and interview.  This particular process took half a day as I recall, I was asked to submit identification for various security clearances . . . The third part involved a whole day of orientation and lectures – the people taking part in this process would  make up TEAM 2010.  After picking up my accreditation and uniform, I showed up for a final day of orientation 2 days before my 1st shift and our schedules were finalized.

My first shift was on a Wednesday and it started very early in the morning – 730AM.  It dawned on me really fast that while my actual role was technology help desk – there were paid contractors responsible for each and every hardware on site and we were asked not to touch any of them.  We would shadow these “contractors” when there’s a support ticket and provide back-up.  We were also given trivial tasks such as mapping printers/desktops located all around the Main Media Centre which is actually a vast 2 bldg. complex comprising of Canada Place and the new Vancouver Convention Ctr.

It’s interesting to see such a huge undertaking being managed mainly by one organization, the Vancouver Olympic Committee.   I would be posting more about my Olympic experience here on my blog – as a rule though, there are certain restrictions on what I can and cannot post, so I guess most of it will have to wait til after the Olympics.

I haven’t had a chance to post anything new lately as I’m now employed full-time and have other responsibilities. I hope to still be able to update this website with more information as I just logged into my dashboard to find out that I have 50 pending comments! Surprisingly, most of it isn’t spam . . . so because of that, I’m encouraged to post something new.

For all the designers out there, I know you will agree with me when I say “You can’t have too much fonts” — so here are a few free font libraries for you to download and install . . .

1. Font Squirrel (My Favorite Font Resource!)
2. exljbris Font Foundry
3. Free Fonts from Kernest.com (Note:slow-loading!)
4. District Thin – Font
5. dafont.com (Note:lots of free fonts-very few good ones to be found)

Christmas is just around the corner and a lot of websites are using a “Christmas” theme to show their holiday spirit much like putting up a tree/lights/ornaments in and around your house.

The most common and easiest way to do this is a simple logo dress-up. Look at what these web companies have done . . .

Google

Youtube

Yahoo

Cnet.com

And other incorporate a more deliberate approach such as changing the background, dominant colors and adding christmas-related graphic elements all around . . .

NBC

Best Buy (Canada)

I know it’s a little late but if you need any vector images of christmas stuff for your websites, here are a few I have . . . maybe for next year!

I’ve found this comic strip by the Oatmeal guy that I can really relate to . . . it’s happened to me a couple times that after the project is done and I get paid – I sever all ties to it and completely disown it. Go ahead and read it.

I read a good article written by Daniel Ritzenthaler on the A List Apart website and would just like to summarize it here. Each designer has a different approach when starting a project but we all usually follow a similar process . . . and outlined here are several processes which we should consider as a strategy to show our clients we know our “stuff” . . .

Set clear goals

Some people feel they know why a website should exist, but struggle to create direct and measurable goals. A modified acceptance criteria exercise is the simplest and most effective tool I’ve found for setting clear and powerful goals. Agile developers use acceptance criteria to demonstrate why tasks need to happen and define how they fit into the big picture. With a few tweaks, it works perfectly for capturing design goals.

Example request:

We’re redesigning our website because we need more traffic and an updated look, and want to become more respected in our industry.

Example goal template:

We want to __________ because ____________ so that ___________.

Example goals:

• We want to increase traffic by 20% because we need more exposure so that we can generate eight more leads per month.
• We want to update to a current look because we need to be more relevant to our customers so that we can raise our rates by 10%.
• We want to write four industry-related articles per month because we want to help our industry so that we can form two partnerships per month.

Organize the pages

People will grow fond of a website where they can accomplish their goals without having to think. Users’ mental energy should be spent on solving their problems, not figuring out how the website works.

Card sorting is a great way to organize a website. To conduct a card sort, list all the pages of your website and write their titles on index cards. Then, lay the cards out on a table and move them around until all the categories and subcategories make the most sense.

If you’re working on a redesign, consult analytics to find out which pages are getting high and low traffic. It’s a great opportunity to figure out where the design’s content is over and under served. Then, tighten and combine similar pages and separate and simplify complex pages.

Lay out the pages

Next, we need to develop a solid understanding of the design’s visual hierarchy. Enter attention maps and a little bit of math.

An attention map is a list of goals for a page with point values assigned to each goal. Allow just enough points to see a good distribution, but not too few that you force a lot of similar point values. The idea is to get a firm understanding of how the goals relate to each other so you can form a solid hierarchy of content.

An attention map is more effective than a prioritized list because it helps determine how much space to dedicate to each goal on the page. Since the service description has three points more (almost twice as many) than the benefits of use, you can bet the service description needs a lot of attention.

Develop a personality

A strong archetype can create an immediate and powerful emotional bond. An archetype is a group of characteristics and traits that are commonly seen in groups of people of any language, history, and size around the world. Every archetype has strengths, weaknesses, gifts, and fears. When you apply these aspects of personality without shame, people will identify emotionally with a design. This helps strengthen memory and build trust.

If you can keep this “personality” consistent through different designs, consider applying it to other areas where customer interaction happens, and pay close attention to customer reactions. You’ll build a very strong brand.

Define the fit and finish

Design traits directly support and reinforce content. Unfortunately, traits are very hard to boil down to a visual style that’s consistently understood across a large audience. It’s good to have groups of opposing traits to create boundaries. This helps you clarify the specific look of the design and gives you something to measure and critique against when the design is up for review.

A great way to do this is to figure out the opposing traits that significantly affect the design and put them on sliding scales. Here’s an example:

With trait scales, the designer can get a real sense for how things should feel to the website visitor. If the designer’s idea of “lively” is too intense, it will be easy to debate where it lies on the calm vs. lively scale and adjust accordingly. This can generate a lot more constructive criticism than “it’s too intense.”

Add, delete, and change the trait scales as needed. But remember that the criteria needs to be measurable and debatable. A trait such as “high tech” is too dependent on the tastes and opinions of the designer. Most of the time, a specific trait such as “high-tech” will be a combination of broader traits, including “modern,” “simple,” and “formal”—all of which can be easily placed on a scale and discussed by people without design backgrounds.