Good.is — Transparency: The Largest Bankruptcies in History

The New York Times still prints great information graphics but for online, they have stepped up their game to do some of the best interactive graphics in journalism today. You can read this profile article for more on this aspect of information graphics.

The focus of this article will be less on interactivity and more on the simpler, static information graphics.

Examples of Recent popular Information Graphics Around the Web

Mint.com — Flower Power: A Look at February’s Booming Floral Economy

Gigaom.com — Google vs. Apple

Mashable.com — Visualizing 6 Years of Facebook

Good.is — Food Assistance

You can think of every Information Graphic (IG) as an article within itself. Depending on the subject matter at hand, you may have to emphasize different aspects of the design. For instance, some may require an intro or an explanation like Economic IGs, but something very easy to understand like What Americans Eat may not require much more than a descriptive title.

Here are 7 concepts you may want to consider when designing your IG:

1. Storytelling

Never forget that your IG is telling a story about a specific topic. Like any communications design project — it’s up to you to make sure that the audience understands what you are trying to say.

It should be easy to understand and scan-able for different levels of viewer interest but also have enough detail to fully engage viewers to facilitate sharing.

You should also realize that employing clever tactics and unique concepts are valid story-telling methods, keep in mind that they should accentuate your story and not distract or sensationalize what you are trying to communicate. Viewers will see that your IG is phony and will reject your message if you go the later route.

2. Metaphors

One of the best ways to grab attention is to bind your IG design to a graphic element that properly summarizes the topic at hand. Your viewers will instantly get it without further reading and if done properly will continue to allow you to build on that initial concept.

In the example above, the IG is about the economy. The artist uses a cash register receipt rolls as the main metaphor and then builds on that concept for highlighting other data — highlighting shopping days is formatted like a typical receipt and they use ASCII art and fonts to draw illustrations.

The best websites are able to turn a IG into something worthy of printing posters of.

3. Typography

To quote Robert Bringhurst, the legendary author of The Elements of Typographic Style — “Typography exists to honor content.”

Functional and versatile choices will be most useful to you as you can apply them to different sets of images, charts and diagrams. Inspired uses of specialty fonts may be that extra kick your IG needs but beware that legibility may come into play if your IG specs have space restrictions. If that is the case, try working with the final output size and reserve the font for usages that always appear large like headlines.

Remember, less is more and consider a font with a versatile set of weights.

4. Scale

Charts and graphs are boring. They may be more accurate and have their place in TPS reports — but IG designers are telling stories and can employ more interesting techniques.

One of those tactics is scale. The juxtaposition of a large object next to a tiny object not only communicates your message but attaches a emotional response (if done correctly) to it in a way a chart cannot. It makes them care, which can be very important if you want them to understand your plight.

5. User Interaction

Clever, understated user interaction can be used as a tool for you to illustrate your point. If you are designing the layout of the IG to take advantage of height or width, you can employ the browser to help your cause.

“The Descent into Credit Card Debt” (above image) is a perfect example. As the viewer scrolls down they are slowly descending along with the story. The IG is fairly long (almost 5,000 pixels) so the viewers are understanding on a tactile level the deepness of credit card debt. This will add a further dimension of emotional depth to the message.

6.Color

Don’t be afraid to use color to help illustrate your message better. I hate to reference a FedEx Kinkos commercial but people are more responsive to charts and graphs when they are presented in a more colorful manner.

Using that same logic on your IG is a no-brainer. Keep in mind that your IG will probably communicate better the more straight-forward it is. Try choosing a reserved palette that has some connection with the topic at hand.

There is a certain value to employing contrast in your color selections as well as they tend to look more dramatic and exciting. While going overboard sometimes can make the IG look less credible (especially if images are involved), finding the right balance can be a boon to your story-telling.

7. Experiment

As IGs become more popular, the viewer’s expectations will become more sophisticated. As with any medium, you want to innovate and advance the techniques instead of being satisfied with the status quo. Try to experiment and figure out what works and doesn’t work for your specific industry.

A website called “The Oatmeal” adopted the IG format to do online comics. Some are more irrelevant and comedic than factual but I think it’s a good way to interpret the traditional comic “strip” as space limitations no longer apply in the online world.

Questions? Comments? Let us know in comments!

There is a bit of controversy about the nature of calling it “Object Oriented” and the specific usage benefits of the techniques. This article will delve into what it is, how it can be used and link to different resources on the web for you to learn more as these concepts are in their fledgling stages. Don’t blame me for what it’s called. I just found it interesting and somewhat useful and wanted to share.

What are the principles behind “Object Oriented” programming?

I’m going to spare you the geek-speak and tell you straight up — it’s basically programming blocks of code that you can use over again.

Those blocks of code are often called “objects” in other programming languages and with HTML/CSS they are often referred to as “modules“. So for our purposes, OOCSS is basically a flexible HTML structure that you can apply sets of efficient and flexible CSS to.

The Dirty Secret of OOCSS

For those of you who live and die CSS — you already know… We already do this! It’s the nature of the cascade. Consider this example:

So we already know of some OOCSS because they are basically best practice CSS techniques that have become more or less common place.

Advanced CSS Techniques First Please

Be Classy

ID selectors are meant for single use and Class selectors are meant for multiple use. So make sure you’re not using ID selectors for repeating styles as using Class selectors give you flexibility and of course re-usability.

No Twins Allowed

Nicole Sullivan points out that if you have styles that are very similar they should be the same. Learn to design efficiently because OOCSS will do you no good if you’re essentially re-creating the same modules (but slightly different) over and over again. (The size of the text in the diagram is slightly different.)

Seperate Stucture (HTML) and Skin (CSS)

Properties like height and width are hard to use repeatedly (in respect to modules) so it’s best to use CSS as intended and leave structure to be determined by content and “learn to love grids” (to quote OOCSS royalty; Nicole Sullivan).

Can We Get To The OOCSS Yet?

As Nicole Sullivan says — treat the modules like site-wide legos and start to build a component library that your modules will be composed of. First you define the defaults and then you start building classes that build upon the cascade.

Define Defaults

Start off with the defaults that you can then alter with a class. For instance, setting the size and font via the default and then use classes to become more and more specific with color, style and etc.

So you may have an instance where you have a h1 with a classes of h3. Honestly, this doesn’t feel great to me but I have come across having to define headers over and over again. So although this feels wrong, I’m not knocking it untlI try it.

Build On The Defaults With Classes

Avoid styling elements and localized ID selectors and try styling classes instead.

Use The Force,Cascade Luke

For the class components to work, they need to be the same strength so the cascade will overide the previous rule. So that means you can’t have some classes deprecated and expect all your CSS components to work in the way OOCSS was meant for.

Localizing is Evil in OOCSS

There are instances where you can get a little local on websites such as the masthead logo. However, you don’t want to paint yourself into a corner by localizing because when you re-use a class it won’t make sense semantically. Being semantic is a best practice that goes along with OOCSS as it will hopefully be easier to share with co-workers and train n00bs.

Over Specyfying Is Evil Too

The whole point of OOCSS is to make things efficient. If you over-specify, then I daresay you’re repeating yourself and although semantically correct… this is code bloat. If you continue down this path, it will only continue to grow.

Avoid Code Sequels

As you can see from Nicole Sullivan’s slide — rather than duplicating a class, just extend it for maximum efficiency.

The Bigger The Website Audience, The More Rewarding

Let’s be honest. Localizing is not evil for everybody but it certainly becomes more difficult to work with and is more conducive for code bloat as the website grows. It’s up to you on whether or not these OOCSS techniques are useful or not, so please I implore you to explore and help the CSS community form an opinion on some of these new ideas. Here are some links I used to bone up on the subject and believe me, there are more tasty nuggets in these resources that may be helpful to you that I may not have covered.

Nicole Sullivan is the OOCSS project queen over at Guthub:
Object Oriented CSS, Grids on Github

Nicole Sullivan Kickin’ It at Yahoo!
Object Oriented CSS video on YDN

Nicole Sullivan’s Often Referenced OOCSS Slide Presentation
SlideShare.net: Object Oriented CSS

Net Tuts did a Tutorial. Although a cool “tut” by Andrew Burgess, he uses HTML5/CSS3 in his examples which confuses the subject.
Object-Oriented CSS: What, How, and Why

Let me know if I missed anything!

I eventually added CSS to slowly wick away the pain of tables by using simple global CSS selectors (i.e. body, link, img and etc.). At that time, I would say that’s what most people did. It was still very difficult for pure CSS based layouts because the browser situation was still awkward.* Internet Explorer was at it’s prime and Firefox was not as popular and easy an alternative as it is now.

[*This is from my experience, as I remember specifically working on a client project in 2003-2004 how hard it was to follow tutorials as every one had so many browser caveats. I'm sure my inexperience contributed to the difficult as well.]

Needless to say, my HTML/CSS was a mess even after I started using CSS the way it is supposed to around 2006-2007. This is the time frame I’d say Firefox really started getting traction and soon after IE7 came out in 2007 making everybody’s life so much easier. The main problem was that even though I used CSS, the actual implementation was kind of jagged. As a designer/developer — it’s important to be clean, simple and elegant (as Jamie from Myth Busters likes to phrase technically challenging concepts implemented efficiently) as it helps to debug, transfer, share, update, teach and perform best practice techniques.

Even now, I can do better but here are 3 techniques I practice religiously that have really benefited me after adapting them into my routine.

STEP 1: RESET – Let’s Code on a Level Programming Field

Since Eric Meyer made resetting browsers popular with his influence/community in 07′— it started to build in popularity quite rapidly. As soon as I started using it, I immediately thought to myself how great it was as many problems started fading away very quickly. Sure, we all used mini resets like setting margins and padding to “0″ in the html or body selectors but completely eviscerating all browser defaults is a wonder you have to experience yourself.

If you take nothing away from this article — make sure you start using CSS resets. It’s been one of the biggest difference makers in reducing day-to-day CSS headaches (especially between browsers). Eric Meyer is generally accepted as a CSS authority and his style sheet is generally accepted as the best:

From: http://meyerweb.com/eric/tools/css/reset/index.html

[Link updated: 7.8.09]


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


The way I use this is by linking to it as a separate external style sheet as the first cascade.

STEP 2: FRAMEWORK – No Need to Re-Invent The Wheel

I initially did not flock to CSS Frameworks but have personally experienced the benefits from using them these last few years. CSS is pretty simple once you gain experience using it, so going through the trouble of using a “bloated” framework seems like BS to some developers. This is especially true for those Jedi web developers who have made dozens and dozens of websites through the years and have developed their own way of doing things.

There are plenty to choose from, the two I am most familiar with is Blueprint and a pseudo framework called 960 Grid System (GS) that predominantly focuses on standardizing grid layouts. Once I started using 960 GS, I never stopped. The main reason behind that is because it takes away arbitrary decisions that change from website to website.

For example — what size should the sidebar be from website to website? In the past, it could range from 251px to 327px. Yes, circumstances may require you to make the sidebar exactly 243px wide but if you design it with the grid in mind in the first place — you can avoid these awkward numbers. That can become difficult to manage as you work on several new websites during the course of a day and even more if you do work updating old ones. 960 GS logically gives you several options to design from and as you implement the framework — it’s consistent and makes sense no matter what website you work on.

The way that all the frameworks work is that they supply you with basically a template — but a bare template that’s flexible and versatile enough that web professionals will not reject it for lack of adaptability and can use it for any conceivable future project. Blueprint unlike 960 GS goes much further and offers all the selectors but IMO, it starts to get bloated. However, that’s the beauty of CSS frameworks — you can choose the one that makes sense to you. There probably is a Goldilocks framework out there waiting for you.

Here’s a list of some of the most popular for you to explore:
http://960.gs/
http://www.blueprintcss.org/
http://www.yaml.de/en/

w3avenue and SpeckyBoy have explored more of the frameworks more in-depth:
http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/
http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/

Jeff Croft waxes poetic about this subject over at A List Apart
http://www.alistapart.com/articles/frameworksfordesigners

I actually saw Eric Meyer speak about CSS frameworks at An Event Apart SF 08 and the conclusion he left us with is that each one has good and bad points but most stress standards compliant code and organization… so using them certainly can’t hurt.

STEP 3: ORGANIZING – It Works For Your Socks, Why Not Your Code?

[NOTE: Step 3 is hard. It's a bit nit-picky but hey — we're all trying to get better right?! I know I need to follow my own advice better at times!]

You’ve heard this before and like me — you’re too busy writing the code to fuss with it too much. That’s the reality but there are clear benefits as well. CSS = Cascading Style Sheets. Organization is inherently built into the functionality of the language! We should be striving to be clean and easy, and here’s a few quick tips that any of us can start doing right away without much fuss:

Selector Grouping

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is the same as:

h1, h2, h3 { font-family: sans-serif }

and a real world example of the space you’d be saving is:

h1, h2, h3 { font-family: sans-serif }
h1 {2.5 em}
h2 {2 em; color#000000;}
h3 {2 em; color#333333;}

Reducing some of the redundancy will really help make your CSS be more efficient and save you time as well!

Default Selectors First

Define the values of these at the top of the document and keep them there. I’ve seen some style sheets where they group similar selectors together with the assigned selectors such as putting form selectors with the rest of the structure and styling of the form. It makes some sense but it’s bad practice because it’s hard to locate later on and especially frowned upon if you work with a team.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td

This actually happened to me… a co-worker a few years back told me I should stop sprinkling my selectors everywhere. He had to use the Find tool all the time to figure out what the hell I was doing. Don’t annoy your co-workers like me!

Alphabetizing Selector Values

Yep. It’s as simple as that and yet it’s so hard to do.

h1 {
background-color: #000000;
color: #ffffff;
font-family: sans-serif;
padding: 20px;
}

I read about some developers doing it but I always opted for grouping similar/popular values together. Such as width and height, padding and margin and etc. The reason why I’ve come over to this way of thinking is because I realized when I deliver code to a client’s IT team — it makes sense to them that it’s alphabetical since they don’t work with me and don’t know my quirks. In other words, my arbitrary grouping of selectors means nothing to other people. Alphabetical makes sense since it’s a simple and functional way to organize.

In Conclusion…

The reasons why you should strive for clean CSS is to code faster, be efficient and to not annoy your co-workers and clients.

• 1. RESET!
• 2. Use a Framework!
• 3. Organize within your code!

Thanks Darwin for the photo!

Helpful? Comment!

• “I completed 75% of the project but my client hasn’t paid the down payment yet!”
• “My clients changed their minds and refuses to pay until the project has been completed!”
• “The client claims the project was unsuccessful and refuses to pay!”
• “My client is converting my print brochure into a website and other collateral!”

This may seem callous but — you can’t blame a client for breaking an agreement if you didn’t have one formally in place! There was nothing to break. This article dismisses some mythical perceptions some people may have about service agreements. Hopefully you will be convinced to use them in the future for your own protection.

Myth #1 — Clients are Scared of “Contracts”

Why would a client be scared of signing a service agreement? The fact that you are legally obligated to perform your professional duty to the best of your ability should be a clear signal that you are a competent, reliable and consummate professional. Granted, you may have to take extra care in how you present a service agreement to a client so that they understand its importance but it’s worth the effort as you can take this opportunity to gain more trust. If a client refuses to sign one, you have two options. Take the risk or don’t but at least you know where you stand.

Myth #2 — I Don’t Know Jack About Legal Mumbo Jumbo

Neither do I! That’s why we turn to professional resources such as the AIGA. For those of you that don’t know, the AIGA is the professional association for design. They are a non-profit that has chapters all around the US and offers several levels of membership. Although membership has its perks, anybody can use their “AIGA Standard Form of Agreement for Design Services” as their official mission is to “advance design”.

Myth #3 — It’s Just Too Hard

I’ve had my share of client relation issues and let me tell you, the aggravation and emotional distress involved far outweighs the hour or so you invest into making your personal service agreement. Do yourself a favor and protect yourself and your work.

Download the AIGA Standard Form of Agreement for Design Services.

This is an example of a basic structure of the document that AIGA recommends. Depending on the type of clientele you work with, I can see why some would skip the Cover Letter all together and have a very abbreviated Proposal Content section. It’s up to you, my personal inclination is for everybody to use some type of service agreement rather than none at all.

Overview:
• 1. Cover Letter
• 2. Proposal Contents
• 3. Basic Terms and Conditions

In my experience, client interaction is one of the most crucial aspects of a successful project. I would use the cover letter to quickly reaffirm why we’re a perfect fit for each other and try to mildly excite the client to be working on this project with me.

1 — Cover Letter:
• 1. Greeting
• 2. Short and Professional Acknowledgment of Opportunity Presented
• 3. Signature

Depending on how experienced your client is working with designers, this section’s depth should be adjusted. Use this opportunity to teach them a little about what actually goes on in your design process as well as showing your client how much you understand their challenge. It will help them realize that you are a valuable asset.

2 — Proposal Contents:
• 1. Project Overview
• 2. Basic Objectives
• 3. Process
• 4. Milestones
• 5. Fees/Expenses
• 6. Work and Billing Schedules

AIGA provides a well designed, easy to read PDF for you to peruse. It is written in plain English and very easy to scan/read through. If you can get through a jQuery tutorial, you can get through this PDF. After reading, copy and paste the Basic Terms and Conditions from the file as they suggest and you’re done.

3 — Basic Terms and Conditions
• 1. Read the “AIGA Standard Form of Agreement for Design Services”
• 2. Customize the AIGA Template enclosed

Let the client know at the end of your initial meeting that you require them to sign a basic services agreement and explain to them how it protects the both of you and ensures responsible professional service. It’s a really a no-brainer and it will save you from being that person you see in forums whining about their latest billing predicament.

Myth Busted! …ummm …Demystified! Do you have any tips you’d like to share concerning agreements/contracts?!