Archive: August 2009

LINQ to SQL, (LtS) is an “object relational mapping” (ORM) implementation from Microsoft shipping with the .NET Framework which allows developers to model a relational database using .NET classes. Once modeled, LtS exposes a rich expression language to query your database. LtS will saves time in designing a data layer because it uses code generation. You simply add a design diagram to your project and drag and drop database objects onto the diagram. Saving the diagram automatically generates your data classes.

While this is quick and easy to use, there’s one limitation: over the course of a development project, it’s inevitable that your database will change. Using LtS, you either need to manually update the entity through the designer or delete and add back the entity, losing your customizations. With today’s tight project schedules, doing the same work over and over again is something you want to avoid. Suddenly it dawns on you that the savings you are achieving through code-generation doesn’t make up for customization frustration.

Enter PLINQO (http://www.plinqo.com/), which stands for Professional LINQ to Objects. PLINQO is a collection of CodeSmith (http://www.codesmithtools.com/) templates that are meant to replace and extend the LINQ to SQL designers that are included with Visual Studio 2008. PLINQO adds a slew of cool new features to your data layer while preserving all the things you like about LtS. Code generation, when implemented properly can be a huge productivity booster in your development efforts.

With PLINQO, you decide which tables you want to include in your data layer. PLINQO has a few templates: one for creating your dbml file, one for creating entities, and one for creating either a manager class or a query class. You can tweak template properties to fine tune the generated output. What’s really cool is that after creating your data layer with PLINQO you can even use the Visual Studio O/R diagram to perform further tweaking of the dbml file which will be preserved when regeneration takes place. That’s sweet.

PLINQO supports syncing the database with the dbml while preserving any manual dbml customizations you have made.It’s worth noting that there are other third party tools that address this like Hugati (http://www.huagati.com) which is a great product. However, PLINQO does much more than just keep the db in sync with your classes. Read on…

With PLINQO you have the option to generate a manager or query extension class for each entity. With Linq it is tempting to spread your data access code throughout your application. This may be ok for small prototype sites. However, it soon becomes cumbersome and difficult to manage for large scale projects. These special classes are wrappers around your entities which help you encapsulate your data access in one place.

One of the biggest complaints about Linq is its lack of support for detaching objects and passing them around, then reattach on the receiving side. I know many developers who passed on Linq because it lacked this feature. PLINQO supports entity detach so you can create an object in one context detach it and attach it to another context. I believe this feature will make a lot of people take a second look at LtS.

PLINQO takes advantage of the DataContractSerializer in WCF to provide a quality cloning solution for all entity objects. Each entity has a Clone method. Now you can load an object from the db, clone it, change one or more properties and save it as a new object.

Caching is one of the most effective strategies for boosting application performance.  What’s nice about PLINQO is it extends the entities with a FromCache method. Under the hood, PLINQO uses the .Net built in cache object and the FromCache has numerous overloads. Hence you have all the flexibility of the .Net cache object available as an extension method. You just load your data as you usually do. Then if you want to cache it, just call one of the overloaded FromCache methods to automatically cache the data. The following code snippet illustrates how to load a Fruit object, and then cache it for 5 minutes on a sliding scale.

var fruit = context.Task.ByFruitId (FruitId) .FromCache(TimeSpan.FromMinutes(5));

PLINQO creates partial classes resulting in 2 files for each entity, manager and query extension. One file is the generated file and the other is for your custom code. Having all of this done for you is a huge productivity booster. Improved code organization makes complex sites easier to manage.

Below is a sample of a generated manager class for a single entity. Notice that it contains a private static class for compiled queries. Ignore this for now. We’ll revisit that later. When initially generated, this class is a stub. I added the GetBlock method. This method retrieves a block from the repository and returns a block object.

public partial class cbkManager
{
public Block GetBlock(string blockName)
{
return Entity.FirstOrDefault(p => p.BlockName == blockName);
}

#region Query

// A private class for lazy loading static compiled queries.
private static partial class Query
{

}

#endregion
}

Now anytime we need a block, we simply call up the manager like this:

DataContext db = new DataContext();
Block found = db.Manager.ContentBlock.GetBlock("blockName");

Now let’s assume at the time this function is written site traffic is light. However, as time passes and traffic grows, this function might need some optimization to help it handle the increased load. The LtS team’s solution to this is to give you the option to pre-compile your query. Pre-compiled queries run a lot faster as the entire expression tree doesn’t have to be built on each call. Suppose we sprinkled our data access code throughout the UI layer. We would have to find every place it’s called and replace that call with a compiled query. That’s tedious, time consuming and prone to errors. This illustrates the importance of good organized code design.

The better way is to change one function in a single place and the rest of the site uses the compiled query automatically. Below I illustrate how this is done using the PLINQO generated code.

public Block GetBlock(string blockName)
{
if (Context.LoadOptions == null)
return Query.GetBlock.Invoke(Context, blockName);
else
return Entity.FirstOrDefault(p => p.BlockName == blockName);
}

#region Query
// A private class for lazy loading static compiled queries.
private static partial class Query
{
// Add your compiled queries here.
internal static readonly Func<.Data.DataContext, string, Context.Data.Block> GetBlock =
System.Data.Linq.CompiledQuery.Compile(
(Context.Data.DataContext db, string BlockName) =>
db.ContentBlock.FirstOrDefault(c => c.BlockName == BlockName));
}

Now is a good time to revisit that partial static class I mentioned earlier. We simply added a compiled query to this class and then two lines of code to the GetBlock function to hook it up. I like having the internal static compiled query class right there where it should be. Intuitive and well organized code increases productivity, speeds up development and makes site maintenance easier and less prone to bugs.

Remember, we only have one manager and one manager class for this entity. The rest of the application gets a big boost from our small change. Since the calls come through the manager, this code which is sprinkled around the site on many pages is this:

DataContext db = new DataContext();
Block found = db.Manager.ContentBlock.GetBlock("blockName");

We don’t have to change that code. It calls the same GetBlock function. Except now that function will use the compiled query. This is one of the big advantages of a good design. LtS does make it tempting to sprinkle data access code throughout your site. I think this is poor design and will not scale well I like the idea of having the compiled query right there in the same file as the function. This nicely encapsulates all Block data access in one place. In five minutes, we were able to give the site a nice performance boost.

In conclusion, it’s worth noting that there are lots of conflicting rumors out there in the blogosphere about the future support for LtS coming out of Redmond. The messages are murky and it would be great to get some clarity on its future direction. It’s worth keeping this in mind when choosing your data layer. In view of this, it’s nice to see things like PLINQO which adds so much value to LtS.

I like LtS and have used it successfully on projects here at SolutionSet. PLINQO looks promising and introduces many more features beyond the scope of this blog post like meta attributes, a rule system for validating business rules, etc. If you like working with LtS, its worth taking a look at PLINQO to see if it fits your needs.

Happy Coding!

IE6 has inspired a fair amount of ire within the web development community, largely because of its age. When IE6 was created, Microsoft was blessed with a lack of competition; check out the usage statistics from 2002 and 2003. Adding to the tension is the fact that all of the various versions of IE have had their special kind of CSS display weirdness (I can’t remember ever having to worry about a new version of Firefox breaking all of my websites). While the days of supporting IE 5.0, IE 5.2.x for Mac, IE 5.5 and IE 6 all at once are over, there’s still three very different versions of IE in use today. Over the last several years all traces of IE5 have all but vanished from the Internet while IE6 is still going strong.

But now the browser landscape has changed and Microsoft moving strongly towards standards support and there is a much more diverse marketplace than there was in 2001. With the pending release of Windows 7, the recent releases of Firefox 3.5 and Safari 4, and the coming utopia — or not — of HTML5 and CSS3 there’s a renewed interest in killing IE6. This is actually a great opportunity to start moving web technology forward — especially with the vastly improved JavaScript performance of the latest browsers — but IE6 will likely be around for a little while longer.

Recently DIGG posted a fantastic article on their blog that proved our anecdotal hunch to be correct; IE6 is still around because of corporate users that are mandated to use IE6 by their global IT support team. The most interesting portion of their article showed that nearly 70% of the people still using IE6 are forced to use it while at work. Many companies spent significant amounts money on systems that relied on ActiveX controls (and other proprietary IE6 technology) for internal web applications and now upgrading is an expensive proposition (I recently did work with a company that requires IE6 to connect their corporate VPN). The DIGG article rightly concludes that, “this goes directly to why most folks use IE6: they don’t have a choice. [Asking them to upgrade] in this case is not only pointless; it’s sadistic.”

While it’s sadistic to force corporate users to upgrade IE6, many developers are starting to question the real costs of developing for that browser. Many high profile sites — with little need to support corporate visitors — are already dropping support. It’s going to make sense for companies to start charging for the privilege of supporting IE6.

Many development firms are discussing the possibilities of reducing or even dropping IE6 support in the coming year or at least charging extra for IE6 support. This will likely come in a few flavors:

•  Full Compatibility — Doing full QA in IE6 and altering the design requirements to ensure full IE6 compatibility and charging a premium for that service.
•  Reduced Display — Removing things like rounded corners, drop-shadows, alpha-transparent PNG’s in IE6 (They’ll still show in other browsers) that take extra time to support. But making sure that the site is usable in IE6.
•  Reduced Functionality — This includes reduced display and throws in a reduction in AJAX and JavaScript functionality while ensuring that the site is usable.
•  No QA at all — Not even looking at the site in IE6 and hoping for the best.

A lot of the fixes to make IE6 act like other browsers require JavaScript and IE6 is almost 10 times slower than modern browsers which just adds to the pain. The most sensible thing is to design for a reduced IE6 display, removing drop-shadows and rounded corners and other visual eye-candy. Without removing some of the visual bells and whistles the IE6 user experience is almost unbearable as page loads are significantly slowed by extra JavaScript execution ironically designed to make the experience better.

The beginnings of HTML5 support are already on the market in the most recent round of browsers and CSS3 support is on the way. The limitations of IE6 are becoming a hindrance to progress in the web development world. SolutionSet will be able to better serve the needs of our clients by phasing out IE6 support except for the projects that absolutely demand it. While the predicted adoption rate for Windows 7 is currently bleak, those reports are, in my opinion, wrong. Microsoft likely is not going to allow new hardware to be sold with Widnows XP after Windows 7 is released. On top of that, Windows 7 allows users to run XP programs which will in turn allow them to continue to use IE6 in Windows 7. But the important difference is that IE6 will no longer be their default browser; they’ll have IE8 (and in Europe they’ll have whatever they want).

Recently the open source Symfony PHP framework project made it clear that the future of Symfony is Doctrine ORM. Doctrine is an incredibly powerful and useful tool due to its built in behaviors, these behaviors allow users to quickly enable complex relations and functionality with a few configuration settings.

One of the more advanced features of Doctrine is the ability to nest behaviors, or in essence stack them on top of each other for combined functionality. However one of the most useful potential combinations of behaviors in the default Doctrine 1.0 bundled with Symfony 1.2 is currently broken in Doctrine, nesting I18N with Versionable. This is noted in the Doctrine documentation under the nesting behaviors section. This nest would give you the ability to have a model that auto versioned while supporting content in multiple languages, a very handy tool for any CMS type application.

After fighting against the SQL insert issues to try to get the below example schema to work

Page:

  actAs:

    Timestampable: ~

    I18n:

      fields: [ title, nav_text, meta_keywords, meta_description, content ]

    Versionable: ~

  tableName: page

  columns:

    id:

      type: integer(4)

      primary: true

      autoincrement: true

    version:

      type: integer(4)

      notnull: true

      default: 0

    active:

      type: boolean

      notnull: true

      default: 1

    title:

      type: string(255)

      notnull: true

    nav_text: string(255)

    meta_keywords: string(2147483647)

    meta_description: string(2147483647)

    content: string(2147483647)

I realized that it is fairly straightforward to apply a quick fix to the problem. First we remove the Versionable from our original schema above as it doesn’t work the way we want it to. By default the Versionable behavior tries to create a duplicate table of the model appended with “_version”.  This is easy to recreate in our schema.

PageVersion:

  actAs:

    I18n:

      fields: [ title, nav_text, meta_keywords, meta_description, content ]

  tableName: page_version

  columns:

    id:

      type: integer(4)

      primary: true

      autoincrement: true

    orig_id:

      type: integer(4)

      notnull: true

    version:

      type: integer(4)

      notnull: true

    active:

      type: boolean

      notnull: true

    title:

      type: string(255)

      notnull: true

    nav_text: string(255)

    meta_keywords: string(2147483647)

    meta_description: string(2147483647)

    content: string(2147483647)

    created_at: timestamp

    updated_at: timestamp

We now have two near identical tables, the exception being the addition of 3 new columns in the page_version table. We will use these new columns to capture the timestampable behavior from the page table and capture the original page id.

Now that we have the two tables we need to alter our models to reproduce the Versionable behavior. Time to fire off a doctrine:build-model and lets’ start by setting up some queries in our PageVersion Table class.

class PageVersionTable extends Doctrine_Table

{

  public function retrieveVersion($object_id, $version)

  {

    $version = (int) $version;

    $object_id = (int) $object_id;

    if($version < 1 || $object_id < 1)

    {

      return null;

    }

    $q = $this->createQuery('v')

    ->where('v.orig_id = ?', $object_id)

    ->andWhere('v.version = ?', $version)

    ->leftJoin('v.Translation t');

    return $q->fetchOne();

  }

  public function retrieveMaxRevision($object_id)

  {

    $object_id = (int) $object_id;

    if($object_id < 1 )

    {

      return 1;

    }

    $q = $this->createQuery('v')

    ->select('MAX(v.version) as max')

    ->where('v.orig_id = ?', $object_id);

    $return = $q->setHydrationMode(Doctrine::HYDRATE_NONE)->fetchOne();

    return array_shift($return);

  }

  public function getAllVersionsQuery($orig_id)

  {

    $orig_id = (int) $orig_id;

    if($orig_id < 1)

    {

      return null;

    }

    $q = $this->createQuery('v')

    ->where('v.version >= ?', 1)

    ->andWhere('v.orig_id = ?', $orig_id)

    ->orderBy('v.version DESC');

    return $q;

  }

}

This gives us 3 useful methods.

• retrieveVersion to retrieve a specific version out of the page_version table
• retrieveMaxRevision to get the latest version number
• getAllVersionsQuery to get all versions based on the original object id

Next we want to recreate the ->revert() method that Versionable provides. First let’s create a mapping function in our PageVersion Class, this will make translation from a PageVersion object to a Page object much easier.

class PageVersion extends BasePageVersion

{

  public function toRevertArray()

  {

    $thisArray = $this->toArray();

    $thisArray['id'] = $thisArray['orig_id'];

    unset($thisArray['orig_id'], $thisArray['id']);

    foreach($thisArray['Translation'] as $k => $v)

    {

      $thisArray['Translation'][$k]['id'] = $this->orig_id;

    }

    return $thisArray;

  }

}

Lastly we need to update the Page class to override the save function to automatically create PageVersion objects on each change and to also give us the needed methods to revert to an older revision.

class Page extends BasePage

{

  public function getVersionClass()

  {

    return __CLASS__.'Version';

  }

  public function getVersionObject()

  {

    $class = $this->getVersionClass();

    $object = new $class;

    return $object;

  }

  public function save(Doctrine_Connection $conn = null)

  {

    if(is_null($conn))

    {

      $conn = $this->_table->getConnection();

    }

    $this->calculateVersion();

    parent::save($conn);

    $this->mapToVersion();

  }

  public function calculateVersion()

  {

    if(!$this->isNew())

    {

      $this->version = Doctrine::getTable($this->getVersionClass())->retrieveMaxRevision($this->id) + 1;

    }

  }

  public function mapToVersion()

  {

    $version = $this->getVersionObject();

    $version->fromArray($this->toVersionArray());

    $version->save();

  }

  public function toVersionArray()

  {

    $thisArray = $this->toArray();

    $thisArray['orig_id'] = $thisArray['id'];

    unset($thisArray['id']);

    foreach($thisArray['Translation'] as $k => $v)

    {

      unset($thisArray['Translation'][$k]['id']);

    }

    return $thisArray;

  }

  public function revert($version)

  {

    $version = (int) $version;

    $objectVersion = Doctrine::getTable($this->getVersionClass())

    ->retrieveVersion($this->id, $version);

    $this->fromArray($objectVersion->toRevertArray());

  }

}

Now on each change the Page object is updated but also creates a PageVersion object. The PageVersion objects record the full history of our model including I18N fields. Reverting back to a revision is a simple as calling $page->revert($version);

All of the above methods are abstracted from using model specific namespaces so they are reusable and can be dropped in to any class. Now you have a working application that reproduces nesting Versionable and I18N.

We’ve done it again–ranked as one of the fastest growing companies in the U.S., this year coming in at No. 7 in the marketing and advertising industry and No. 72 on the overall list.

See related press release, and thanks to all our clients and staff for three exhilarating years of growth!

I’ve been doing some reading recently on the coming HTML5 specification. There’s already several great articles on the key concepts of HTML5. The most interesting take-away from all of this is that it’s possible to start using HTML5 now.

Using the new HTML5 sectioning elements
The first hurdle to overcome is that the new HTML5 sectioning elements aren’t recognized in any current browser. Take a simple HTML5 document like this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Hello</title>
<style type="text/css">
header, footer {
background-color: indianred;
height: 35px;
}
section#main {
background-color: lemonchiffon;
padding: 20px;
}
section#main article {
background-color: saddlebrown;
}
</style>
</head>
<body>
<header>Header!</header>
<section id="main">
<article>My Article</article>
</section>
<footer>Footer!</footer>
</body>
</html>

Even in Safari 4, all of the new new HTML5 elements render as inline elements. Of course, in all versions of Internet Explorer the elements won’t render at all. The fix for this is two-fold. First, the new section elements need to be given a default style of display:block;. And secondly, the new elements need to be coaxed into existence in IE. It’s pretty easy to give some default styling to the new elements with a snippet of CSS:

/* Block-level HTML5 elements */
section, article, aside, header, footer, nav, dialog, figure {
display: block;
}

Getting IE to behave is a little trickier but thankfully just a small bit of JavaScript fixes things up. There is a relatively new JavaScript library called Modernizr that gets IE to play along and also places useful hints about browser capabilities on the <body> in the form of CSS classes. Modernizr is a useful transition technology that makes it easy to segment your CSS based on the capabilities of the browser instead of relying on CSS hacks.

Setting the DOCTYPE and using XHTML5
There’s a fair amount confusion on the web but there is nothing preventing the use of XHTML with the new HTML5 specification. There’s some great information in the HTML 5 reference about setting the DOCTYPE for both HTML and XHTML. An example template that used XHTML5 might look like the code block below (sorry, our WP plug-in for code is sorely lacking). In this example reset.css would be the reset stylesheet you normally use and reset-html5.css would contain the html5 specific fixes shown above. For fun we can include a special stylesheet for each of the IE browsers which will become useful during the QA process. The example also puts Modernizr in the recommended place just after the <body>. And finally at the bottom of the page we’re including jQuery (because JavaScript goes at the bottom), assuming our project will probably make some good use of it.

<!DOCTYPE html SYSTEM "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Example HTML 5 Page</title>
<link rel="stylesheet" type="text/css" href="/css/reset.css"/>
<link rel="stylesheet" type="text/css" href="/css/reset-html5.css"/>
<link rel="stylesheet" type="text/css" href="/css/global.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/css/ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/css/ie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="/css/ie8.css" /><![endif]-->
</head>
<body>
<!-- @see http://www.modernizr.com/ -->
<script src="/lib/modernizr-0.9.min.js"></script>
<div id="container">
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
</ul>
</nav>
</header>
<div id="wrapper" class="clearfix">
<section id="main">
<article>
<h1>What Is Funny?</h1>
<p>Actually, puns aren't funny.</p>
</article>
</section>
<aside class="right">
<section class="box">
<h1>Headers start over within sections</h1>
<p>tags?</p>
</section>
<section class="box">
<h1>Related Content</h1>
<ul>
<li><a href="#">Other Link</a></li>
<li><a href="#">Other Link</a></li>
</ul>
</section>
</aside>
</div>
<footer>
<p>©2009 and other footer information</p>
</footer>
</div>
<!-- Google Loader -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
google.load("swfobject", "2.1");
</script>
</body>
</html>

So you’ve built yourself an email. Or banner ad. Or just about anything that mentions your URL. Interested parties have been lured to your website and they’re looking for instant gratification. Is the red carpet laid out or is the page business as usual?

Scott Brinker wrote a superb article for searchengineland about post-click marketing best practices. Brinker created a graphic that shows the eight dimensions of excellent landing pages:

You’ve got about one second to reassure your landing page visitors that their clicks weren’t a mistake, so figuring out how to make your message big, quick, and clear is of the utmost importance. Take in the full article here.

A couple weekends ago I attended  preDevCamp San Francisco down at Palm’s Sunnyvale offices.

The event gave an opportunity for interested developers to get up to speed on the development for the phones, along with some prizes, pizza & presentations.

To summarize what it’s like developing for the phone, it’s JavaScript. They have a preference for the Prototype framework, which I found a little surprising since development on the framework has been slow the last few years.

The application is structured to provide JavaScript classes called assistants which correspond to the particular pieces of the application, stage, scene, or application. The flow is fairly routine, and the emulator works well. Besides the tight coupling of Prototype, the development was pretty straightforward.

I was impressed.

By the end of the day myself and another developer were able to build a fully functional video poker clone. Not bad for 5 hour sprint, I’d say.

During the applications presentation, a number of  apps that developers had obviously been working on previously were demonstrated. There was a nifty scientific calculator, and a scrabble/boggle mashup game, and a hold-em/scrabble game.

One thing that may be missing so far seems to be the graphics library. There was talk of the HTML5 Canvas tag support being pretty rough, and no other way to do in-depth graphics, so for hard-core game development, that is going to be a problem.

Overall, it seems Palm has a nice platform, in the MojoOS, for developers out there.

I recently gave this presentation on color to our creative team. It was originally done in a conversational presentation format…which I will try to recreate here. And I owe credit heavily to worqx.com for the formalized info and graphics to support my informal and intuitive comprehension of color in combo with a formal education in the Swiss style on the subject.

Johannes Itten was a strange fellow. In addition to his background in psychology and teaching, he was also an instrumental member of the Bauhaus (not the band), a fervent vegetarian who thought nothing of running his design students through meditation and exercise routines within his art practice. When he wasn’t working out, he was working on formalizing color. Itten gave us the first formalized color wheel. He is quoted as saying… “Color is life, for a world without color seems dead. As a flame produces light, light produces color. As intonation lends color to the spoken word, color lends spiritually realized sound to form.” Wow. I think I’d rather work out some more.

Regardless, he left an indelible imprint on any craft that deals with color by creating the first color wheel and the extended thinking around color that allows us to understand more clearly how and why color works (or doesn’t). We now have a language and alphabet to help in discussing color issues that we still use everyday.

You have to start somewhere. Let’s start here.

Color Basics.

Color is the perceptual characteristic of light described by a color name. Specifically, color is light, and light is composed of many colors—those we see are the colors of the visual spectrum: red, orange, yellow, green, blue, and violet. Objects absorb certain wavelengths and reflect others back to the viewer. We perceive these wavelengths as color.

How do we describe color?
A color is described in three ways: 1. By its name 2. How pure or desaturated it is. And 3. Value or lightness.
Although pink, crimson, and brick are all variations of the color red, each hue is distinct and differentiated by its chroma, saturation, intensity, and value.
We have a wonderful problem. Color systems.
Online or off. Color is still color…but each system acts differently.

Additive Color.

If we are working on a computer, the colors we see on the screen are created with light using the additive color method.

 

 

 

Subtractive Color.

When we mix colors using paint, or through the printing process, we are using the subtractive color method.

 

 

 

Now that we know some basics.

 

I’d like to introduce the color wheel.
The color wheel is a visual representation of colors arranged according to their chromatic relationship.  Bask in its glory for a moment. OK. Moving on.

 

 

 

 

The color wheel can be broken down into many descriptions depending on the associations you are creating.

 

Primary Colors:

Colors at their basic essence; those colors that cannot be created by mixing others.

 

 

 

Secondary Colors:

Those colors achieved by a mixture of two primaries.

 

 

 

 

Tertiary Colors:

Those colors achieved by a mixture of primary and secondary hues.

 

 

 

Complementary Colors:

Those colors located opposite each other on a color wheel.

 

 

 

 

Analogous Colors:

Those colors located close together on a color wheel.

 

 

 

The color wheel can be further divided into ranges that are visually active or passive.

Active colors will appear to advance when placed against passive hues.
Passive colors appear to recede when positioned against active hues.

 

 

 

So remember Itten? And what does it have to do with my day job?

Well the biggest take away here from Itten is that any color palette, approach, or system relies on one thing. Contrast. Itten studied this in great detail through a series of paintings that were identical, save for color arrangements. The result? The exposure of successes and faults in color combinations.

 Anyone working with color regularly must understand this.
I have developed my own 4 simple rules. (Remember these are my rules, and well, anyone who has ever followed me on a bike or snowboard would know what works for me sometimes sends others to the hospital.)

Rule #1
Have a color strategy.

Using color strategically is an important trait to learn and use to defend design choices. Good color strategies help lessen subjectivity when dealing with color. Pick a palette that makes sense for your project.

Simple color strategies:
De-saturated blues =Traditionally represents dependability and establishment. Saturated reds = Often conveys energy and strength etc.

 

Rule #2
Be aware of color and contrast.

 

When we create visuals that are intended to be read, offering the viewer enough contrast between the background (paper or screen) and the text is important. Text presentations ideally offer at least an 80% contrast between figure and ground.

 

 

 

 

 

Rule #3
Don’t re-invent the wheel.

You wouldn’t expect a creative to say that. Look to nature for inspiration. And I don’t mean limit yourself to plants and animals…look at what’s out in there in the world. You’d be surprised where you find great palettes. I often look to fashion and culture.

 

Rule #4
Develop a limited palette.

I know. I know. Sounds weird. But unless you’re doing a design that requires a rainbow, say for the revival of  “My Little Pony,” here less is more. Remember the box of 64 crayons? It’s too much. I often will look at 4-6 colors (with 1 or 2 of those being accents) and 3 to 4 neutrals (ranging from light, mid and dark hues) max to establish a palette.

 

That’s it. Go make things good.

Advertising is a fairly common sense business. Find out where your target spends their time and, well, hit them with an ad. Beer commercials during football games. Organic baby food banners on mommy blogs. Hotel ads in travel magazines.

So the news that retailers are increasing Back-to-School spending in social media should be no big surprise. A recent USA Today article reported that spending will be down 7.7% to about $548 per family versus $594 a year ago, so marketers are working hard to find the epicenter of teen activity. From the source:

The money that businesses spend on social media now is growing faster than any other form of online marketing. Some 25% of small businesses surveyed by Ad-ology Research said they would spend more on social networking in 2009, beating the numbers who’ll spend more on e-mail, blogging or company websites. Forrester Research projects the $455 million that companies spent on social networking in 2008 will balloon to more than $3.1 billion by 2014, a growth rate more than three times what it forecasts for e-mail marketing.

The real difficulty for brands will be whether or not their social media campaigns can pass the useful test. Retailers who create apps that function as tools like collaborative online shopping will have a better chance of survival in this hyper-connected demographic.

Barack Obama isn’t the first politician to successfully utilize social media, but he does seem to be the best at it. Not only is he on the Tweet, Facebook, and MySpace, he is also giving weekly YouTube speeches. Inspired fans have created a venue to celebrate his 48th birthday in the social networking world.