Clear Focus Designs

As you probably already know, IE6 does not support transparent PNGs. There are a few workarounds such as Microsoft’s AlphaImageLoader filter, but using the MS filter has some drawbacks. The biggest drawback is the use of proprietary css which doesn’t validate. The other is not being able to use background css rules such as background-repeat to tile PNGs.

Web developer Drew Miller offers a better solution which addresses the drawbacks I mentioned and more. Get it now: DD_belatedPNG.

There has been some debate about the use of h1 html tags. Mostly about how many times the h1 should be used on a single page.

Recently Google software engineer Matt Cutts set the record straight in a short video:

This discussion would be incomplete if we ignored how important headings are for accessibility. Here is a YouTube video from Aaron Cannon, a blind accessibility consultant, demonstrating this concept using JAWS, a screen reader:

Clearly, there are good reasons to use h1s for top level headings, but it all comes down to what is best for the document. Just be aware of the results. An example is how many of us, myself included were taught that marking up a logo using h1 was the right thing to do. It’s not. It will not help with site rank and will cause screen readers to read it out loud on every single page. So my personal opinion is to stick to using h1s for top level headings and the intarweb will be a happier place

Recently I was given the task of integrating a new dynamic css/xhtml template into an existing template. Nothing too exciting but the markup made extensive use of css subclasses. By extensive I mean some elements had 3 classes plus an ID! The problem with so many subclasses was that it took me far too much time figuring out which ones I needed to edit in order to make a change. Ensuring cross browser compatibility was also a chore because I had multiple subclasses to deal with. So for those of you who rely on subclasses I urge you to read on.

A brief intro to subclasses

CSS allows for an unlimited number of space-delimited classes:

<div class="class1 class2 ect">
     <p>...content...</p>
</div>

The order of the classes doesn’t matter but its always a good idea to first list the base class followed by the subclass. It’s much easier to read that way.

The problem

You are inviting trouble when you rely on subclasses (especially for structure) throughout your markup. Consider the following extreme case which I recently encountered on a project:

<div class="line breather gradient-top">
     <p>...content...</p>
</div>

The CSS:

div.line {
  ...rules...
}
div.breather {
  ...rules...
}
div.gradient-top {
  ...rules...
}

That’s 3 sets of different rules in the stylesheet for one element! What a mess! (There are more serious issues like not separating content and presentation, but that is beyond the scope of this post). There is another method using dot notation that could have been used to chain the subclasses- http://www.w3.org/TR/CSS21/selector.html#class-html. Either way is more complicated than need be.

The solution

A better approach would be to use a single class selector that is meaningful. Let’s assume the content to be styled is the main content. Naming the class selector “mainContent” gives the markup meaning making it easier to read and edit:

<div class="mainContent">
     <p>...content...</p>
</div>

The CSS for the previous element is now located in a single set:

div.mainContent { 
     ...rules...
}

Of course, there will be situations where using subclasses makes sense. Just be aware of the consequences of relying on them.

To briefly summarize the benefits of using a single meaningful selector:

• Your markup and stylesheet will be cleaner, easier to read and understand
• Maintenance will be easier for yourself and especially others
• Saves time/money

Happy coding.

Do you want to improve your problem solving skills? Maybe you would like to push yourself to become more creative and generate better ideas?

If we can admit to failing, it will reveal what we don’t know. Once we understand what we don’t know, we can seek relevant solutions to those failures. This process of iterative learning always illuminates some new path- it leads to those “a ha!” moments. Those moments often lead to new directions. The direction is often called progress.

On the light bulb: “I have not failed. I have just found 10,000 ways that won’t work” - Thomas Edison

“My great concern is not whether you have failed, but whether you are content with your failure.” - Abraham Lincoln

In this post I am going to explain how I go from the initial stages of planning to the delivery of your logo.

The Design Brief

I kickoff every project with the all important logo design brief. The logo design brief is where I will ask you many, many questions about the details of your business, services, products and much more. We go about this by either a face-to-face meeting or by filling out my questionnaire via e-mail.

Giving me clear, focused answers is crucial because they will guide my decisions throughout the process. It’s always important to give me more information than too little. Inspiration and insight can come from the most unexpected places and the more information I have the better the result will be.

Research & Discovery

Armed with the design brief I begin researching your target audience, competition, industry trends, history and overall goals. My goal is to discover a meaningful approach to the project that will generate results. During this crucial step, we also seek out a desired style, discuss what inspires us and come to an agreement on an approach.

Sketching

With a pencil and paper I start sketching out concepts using the design brief and research I’ve done. (Resist the urge to go straight to the computer to develop concepts. Whatever software you use will place constraints on your creativity.) This is where concepts are tossed around and experimented on. Sometimes the results are good and sometimes not (don’t let your drawing ability discourage you. Instead focus on generating concepts and ideas.)  Once I feel I have some solid concepts, I move on to creating prototypes using Adobe Illustrator cs3.

Concept Design

This step is where everything comes together into a polished concept. After I have 2 fairly polished concepts, I take a short break. I revisit the concepts the next day with fresh eyes and make any changes I deem necessary. I take a break because I find that staring at a design I miss what I can discover with a fresh set of eyes. For even more insight, I’ll sometimes ask other professional designers to critique them. Once the concepts are looking pretty good, I prepare them for presentation and review.

I prefer to showcase 2 at a time, because it allows me to focus on 2 really good concepts instead of spreading my creativity thin by doing more. This is where my process may differ from others.

Presentation & Review

I provide you with a PDF showcasing the concepts along with the reasoning behind the decisions I’ve made. This is your opportunity to reflect on the concepts and give me useful feedback. Resist feedback such as “I’ll know it when I see it” or “I want to be in love with it”. If you have trouble putting your thoughts into words, let me know.

Revisions

Although uncommon, there are times when the initial concept is a smashing success and no revisions are necessary. If they are necessary, I’ll revise the logo based on your feedback and send them back to you for review.

Deliver

Once the revisions are complete and the logo is finalized, it is delivered via e-mail. I prepare the logo in the EPS file format (or whatever format you require),  provide some basic instructions and a receipt for your records. After receiving the logo please feel free to ask any questions.  I also appreciate any feedback on how the logo has worked out for you so don’t hesitate to drop me an occasional line.

Celebration

I work hard to design the best logo for your business so when all is said and done, I make sure to reward myself. I do that by drinking an ice cold microbrew (India Pale Ale of course).

Thanks for taking a look and I hope you gained some insight into my process. I am available for hire. If you’re interested, get in touch!

sIFR is a nifty way to employ custom fonts on a website by using a little javascript and flash. It’s a great timesaver and works well across most browsers (oddly, it’s Opera that has problems).

I use sIFR for nearly all my headings on this site. On the work page I use it 24 times. As a result, Firefox and Safari were was having a problem with multiple renderings of sIFR causing my cpu to jump to 100%. The page would load fine but once I scrolled up or down the cpu cycles jumped and would freeze the browser. The problem was the default 30fps for the sIFR flash component. To reduce the cpu load, simply lower the fps to 12. At 12fps, the cpu usage is still on the higher side but at least sIFR now plays nice with FF and Safari. Edit: sIFR 3 r382 and beyond has a framerate of 12ps so simply upgrading should also fix the problem.

Thanks to Den Odell for the fix!

Have you ever considered the structure of your stylesheets? With a little effort, you can simplify maintenance and make it easier for others to read your css. Here are a few things that I’ve picked up along the way that I’d like to share:

Table of Contents

Similar to how a book is organized into chapters you can do the same with your CSS. Put the table of contents, which is basically a run down of the structure, at the beginning of your stylesheet. At a glance anyone looking at your code can get an idea of the overall structure:

/*
Table of Contents:
global
page Structure
nav
headings
link Styles
text Styles
inline Imgs
tables
forms
extras
*/