I always love the new features that come out but also find myself reluctant to update in fear plugins & themes will break. But, at the end of the day, it’s always worth updating so you can be 100% secure and take advantage of all the great features WP has to offer.

So, what’s new in WP 3.2

• Performance Improvements – faster, better & more awesome!
• Distraction-Free Writing - apparently the visual editor’s full-screen mode is getting updated and will now include HTML mode as well. I never use full-screen mode so not sure this is a big one for me.
• Admin UI Refresh - Yes, yet another Admin UL update. It was redesigned in 2008 but we know 3.2 will include a minor facelift.
• New Default Theme – Twenty Eleven will now be based on the popular Duster Theme which includes rotating header images, post format support and supposedly a lot more.
• Better Admin Bar - This will now include more links to make it more useful than ever. No specific details yet however.
• Browse Happy - WordPress will now work with modern browsers but will no longer support Internet Explorer 6. This does not hurt my feelings, at all!

That’s about it! Although I’m excited to see some of these changes, it seems this update is a little shallow. Nevertheless, I still love WordPress!

What are your thoughts on WordPress 3.2?

Question: Do dates in the URL of blogs or websites help determine freshness of the content or is it largely ignored? -Filipe Santos, NYC

Do website or blog URLs determine the freshness of the content?

To search engines, no, spiders crawl then index those pages which determines the freshness. To users, yes, users will look at the URL to determine out fresh that post is and see if it is relevant to what they are searching for.

I really like how Matt Cutts put this answer because I see bloggers trying to trick Google News or other blog news related websites and keep their post  at the top of the ‘most recent news’ list by constantly changing the date in the URL; honestly, it’s somewhat annoying.

However, Google does do a very good job determining the age of a blog post by caching it super fast and then caching every so often to check for new content and changes to that post. You will find the more popular one particular post is, the more that page will get cached. Frankly, I’ve found that changing the date in your post URL or changing URLs period is not a good practice and should be avoided – create the post and let Google do the rest.

Some Quick SEO Tips for Your URLs

1. Remember to create keyword rich URLs – static page & blog post URLs
2. Never put a date within a static page URL
3. Avoid long URLs – you want something simple and to the point
4. DON’T, I repeat DON’T have dynamic URLs
5. Avoid changing URLs often and if done be sure to use proper 301 redirects
6. Leverage your internal linking by linking to other pages within your website ie: link from blog post to static pages

The new Twitter changes announced last week and are currently rolling out to users still this week. However, these changes are a bit more dramatic including a shift in the overall usability, features and appearance of the vastly popular social network. While the changes range from simple graphical tweaks to fundamental function shifts all of the changes have the same goal at heart – keeping users on Twitter.com.

New Twitter Design

The new design is as crisp and clean as one might hope, with the critical controls intuitively placed for optimal tweeting. As a designer I’m loving the new logo and layout.

The new Twitter logo consists of a simplified text elements using the same familiar font, in simple white minus the outline, along side a clean, iconic, electric blue birdie logo mark of appropriate size & weight.

More Substantial Changes in the New Twitter

Recent statistics indicate that more than 75% of the activity for Twitter.com actually takes place outside of the site on third party sites and apps. Twitter has long been friendly with the app development community, supplying ever more flexible APIs, informative documentations & in depth developer discussion to assist in the creation and proliferation of quality Twitter based apps. However, the new Twitter release completely envelopes the app developer community, integrating many of the most popular features from third party apps in unprecedented ways.

Media Integration

Photos and videos can be quickly and easily embedded into Tweets through integrated interfaces connecting tweeters to DailyBooth, DeviantART, Etsy, Flickr, Justin.TV, Kickstarter, Kiva, Photozou, Plixi, Twitgoo, TwitPic, TwitVid, USTREAM, Vimeo, yfrog, and YouTube. No more skipping of to this site or that site to see the cute video of the puppy licking the camera lens or to survey the damage the most recent natural disaster – images and videos appear right on the page where the tweet is displayed.

Related Content Discovery

Not only are their less ‘holes in the bucket’ to leak traffic, the new Twitter also introduces additional related content to keep users reading, sharing and posting. You can expect to see related @replies, other tweets from the same users and even maps for geotagged tweets.

Mini User Profiles

While the new features are a far cry from its super simple minimalistic origins, the new Twitter doesn’t seem to have forgotten its social roots. Expanded ‘mini profiles’ allow users to learn more about a tweets author at a glance making following, listing and messaging other users easier than ever.

New Twitter Video

New Twitter Screenshots (via TechCrunch)

Is a website designed with a CSS-based layout more SEO friendly tan a table-based layout? – Thomas, Cincinnati

Are table-based or CSS-based layouts better for SEO?

As Matt Cutts answered in our video above, Google does a good job to score them both alike however CSS is what almost everyone is leaning towards in this Web 2.0 era. Personally, I prefer CSS layouts over table-based for many reasons but mainly because I’ve found that Google crawls through a website more efficiently if utilizing a CSS-based layout.

On the other hand, there are tons of websites that have large amounts of nested tables in their layout and still rank #1 & #2 in SERPs. This is normally the case simply because those sites have been around for AGES and Google puts a ton of weight on websites that have been around for a long time with unique content.

Why use CSS-based layouts instead of table-based?

1. More Efficient - CSS-based websites load faster which provides a better user experience but it also is more efficient when spiders are caching your website. My overall recommendation is to ensure your website is as efficient as possible so spiders can cache your actual content rather than tons of HTML code, tables, etc.
2. Easier to Make Changes & Edits – CSS can make your website changes much faster and 100% simpler but as everything it requires a learning curve and is somewhat different than just nested tables and HTML styles.
3. CSS is Flexible – One of the greatest features of CSS is how flexible it is during the design process and adding new sections to your website – tables are truly of the past and CSS has taken the lead.

In the recent Color and Design Series post “Color Model Basics: Demystifying Color Models” we discussed additive color models, including CMYK. The primary value of color models like CMYK is their ability to describe aspects of a particular shade or tone in detail so that they can be reproduced at will.

However, even with sophisticated color systems there is variance in the way that display & print systems interpret and reproduce colors. This was very frustrating when I first tried designing an outreach flier with a dark image overlapping a dark background. I managed to pull a rookie mistake and botched the whole print job because I didn’t realize solid black CMYK didn’t translate into true, rich black.

Rich Black or Poor Prints

When designing for print you’ll want to set up your CMYK color profile with rich black or you’ll end up with poor prints. A poor tone of black can be a frustration, or a complete fiasco depending on your layout & design. Poor black tones are most obvious when they contrast with other mismatched tones of black of varying shades or tones. This happens a lot when an image with a mostly black background overlays a solid black background. The mismatched tones stand out drastically, destroying the intended effect and ruining the layout.

When designing the layout on your computer the colors may appear rich and the black tones may seem to match fully – but once the project goes to print the difference in tones can be quite remarkable. Now imagine you just received that back from the printer – 10,000 of them – expecting them to look like the ‘screen’ version, but instead they look like the ‘print’ version from the figure above. Oops!

Creating a Rich Black Tone for Print

CMYK is an acronym for the color model that mixes percentages of Cyan, Magenta, Yellow and Key (black) together to reproduce millions of tones & shades of hues. One might expect that cranking up the color profile to 100% black he might achieve a nice total black tone. Unfortunately many a rookie designer has made the same mistake.

Solid black or 100% K black looks more like the figure below – a sort of washed out, sun bleached black at best. This wreaks havoc on layouts similar to the one depicted above, where the intent was to have the image bleed off into the background. Instead the layout comes out looking like Frankenstein monster – every gory stitch exposed for the world to see.

Rich black can be achieved, but it requires a little more attention to the other inks C,M & Y. An even 30% of each brings the black tone to a rich, full pitch that works nicely in print. There are several CMYK profiles that work for producing a rich black print – below are a few more examples.

Additional Rich Black and Printing Tips & Resources

• http://en.wikipedia.org/wiki/Rich_black
• http://indesignsecrets.com/use-rich-black-to-stop-colors-seeping-through.php
• http://marvin.mrtoads.com/richblack_vs_plainblack.html
• http://www.bittbox.com/all/photoshop-101-true-black-cmyk
• http://photoshopninja.com/techniques-print/better-cmyk-black-printing/
• http://www.printernational.org/rich-black-plain-black.php
• http://typophile.com/node/17683
• http://www.prepressure.com/design/basics/rich-black
• http://www.andrewkelsall.com/the-ultimate-rich-cmyk-black-exposed/
• http://creativebits.org/rich_black_vs_100_k
• http://eightyeightteeth.com/88/rich-black-print/
• http://www.presscoprinting.com/rich_black.html
• http://www.istockphoto.com/article_view.php?ID=642
• http://www.kenmorriscreative.com/rich_black.html

Source photo used in example image

• http://www.sxc.hu/photo/1284216

Header tag content gets more emphasis & carries more weight than other plain text, so proper usage & optimization are key to leveraging your header tags for better rankings. Here are a few tips to keep in mind when using header tags in your websites content.

We’ll use this sample piece of content to display examples of our tips in action.

1. Use Header Tags For Emphasis

As search engines crawl your page’s content they recognize & place emphasis on the content with-in header tags. Since content with-in a header tag receives more weight than other plain text on the page, you really want to make sure you are using them, and that your targeted keywords are supported there.

If  you’re using downloaded templates for a CMS like WordPress you’ll want to review the template to make sure it doesn’t have headers wrapped around something useless like an H1 around the site wide logo or H2′s around sidebar headings for instance.

• Break up large segments of content into smaller groups, separated by headers
• Use keywords in headers that are relevant to the content in the subsequent paragraphs

2. Use Appropriate Hierarchy

Additionally, search engines give the heaviest weight to the highest tag (H1 over H2) and lesser weight to subsequent tags (H3 less than an H2, H4 less than an H3 and so on). It’s important to keep this in mind when setting up or reviewing your site templates. Make sure you’re template doesn’t have an H1 wrapped around something useless like a site wide logo for instance.

• Use appropriate hierarchy / keep headers in proper order
  • Absolute hierarchy: H1 then H2, then H3, then H4 and so on
  • Relative hierarchy: H1 then H2, then H3, H3, H3, then H2, then H3, H3, H3
• Place H1 header high in the page content (generally before the post or body content begins)
• Review site templates for proper header tag order.

3. Limit Usage For Greatest Impact

Header tags should be used sparingly to bring emphasis only to the most relevant point of the pages content. SanctuaryOne recommends only utilizing the H1 header tag once per page. Other key points of content can be highlighted using H2 tags – but again this should be used sparingly to keep the emphasis effectively focused. Additional supportive points can be called out using H3, H4, H5 or even H6 headers as needed.

• Limit to 1 H1 headers per page
• Limit to 1 or 2 H2 headers per page
• Use H3, H4, H5, H6 sparingly for less important points
• Review your template, make sure its not putting emphasis on irrelevant content (common in sidebar headers)

4. H1 & Page Title Should Share Relevance

The context of the H1 header tag should be directly tied to the content of the page title. Both the H1 header tag and the page title should highlight the general point of the page’s content.

• Title and H1 should share a central relevant point
• Title and H1 should both be relevant to the page content
• Title and H1 should both contain your targeted keywords

5. Apply CSS Styles

Don’t be afraid to change up the look of your header tags with a little CSS magic. However, you will want to avoid using styles that try to trick search engines – avoid hiding header tag content using tricky CSS.

• Default heading tags are ungainly and can really change the look & feel of a website
• Apply appropriate CSS styles to header tags to get control of how they are displayed
• Avoid styling any content to be invisible to users (display:none, z-index:-1000, font-size: 1 etc)

Controlling the frequency, placement and content of your header tags allows you to influence what search engines place the most emphasis & weight on. Take control and make the most of your content with a little header tag optimization!

Header Tag Optimization Resources

Check out some additional resources related to header tag optimization.

• http://www.searchengineguide.com/stoney-degeyter/how-to-use-hx-tags-to-boost-page-perform.php
• http://www.searchengineguide.com/stoney-degeyter/please-stop-abusing-your-hx-tags-it-does.php
• http://www.saversites.com/seo/free-seo-guide/header-optimization/
• http://www.seobook.com/cleansing-seo-ignorance-public-seo-cesspool-one-blog-post-time
• http://www.seomoz.org/article/search-ranking-factors#on-page-keyword-specific-ranking-factors

Demystifying Color Models

A color model is an abstract mathematical model describing the way colors can be represented as -numbers, typically as three or four values or color components.

- Wikipedia (color models)

Abstract mathematical models?!  Don’t worry, we’re not going to go all “A Beautiful Mind” here, with a bunch of numbers & formulas. In this post, we’ll just be taking a look at the basic principles & characteristics of the most popular color models.

What is a Color Model?

A color model is really just a set of rules that help make it possible to measure or describe the various attributes of a particular color. One of the first and probably simplest color models we all probably learned in kindergarten. RYB (which stands for Red, Yellow &, Blue) measures and describes the amount of Red, Yellow and Blue in a particular hue. For example Green is a mix of 50% Yellow + 50% Blue. More complex color model systems measure not only Hue (color range/mix ratios) but also tint, tone, shade and other characteristics required to reproduce a color precisely in various mediums (paint, ink, screen  media, textile printing etc).

The ability to reproduce a particular color in precise shades and tones is vital to carrying a visual idea beyond its original medium. Understanding the basic principles and differences of the various color models can help insure that your original design is reproduced as faithfully in print as it is on screen.

Additive Color Model vs. Subtractive Color Model

The first fundamental breakdown of color models is the way in which colors are created. Remember all that stuff about the visual color spectrum from the last article? This is where all of that information becomes important.

The Subtractive Color Model

With the subtractive color model colors are created by removing or absorbing wavelengths of light, the remaining wavelengths are reflected as color.  Subtractive color starts at white, mixes in inks, paints or dyes to achieve color – eventually enough overlapping layers of color absorbs all of the wavelengths leaving only black. Printing typically uses a CMYK color model, a great example of a subtractive color model at work.

The CMYK Color Model

CMYK, which stands for Cyan, Magenta, Yellow and Key (Black), a widely used subtractive color model, is often used in printing. The CMYK color model involves introducing and overlapping various percentages of cyan, magenta, yellow and black ink to reproduce millions of colors.

The Additive Color Model

The additive color model works by introducing a limited set of wavelengths to the visual area producing color. Additive color generally involves light as the medium, so it starts at black  introducing wavelengths until eventually all wavelengths are visible creating white light. Computer screens typically use some variation of an RGB color model, a perfect example of an additive color model at work.

The RGB Color Model

RGB, which stands for Red, Blue and Green,  is probably the most popular additive color model and is most frequently used in computer displays. The RGB color model involves introducing red, green and blue light in combination to create millions of colors.

Color Model Mysteries: SOLVED!

Elementary my Dear reader! Hopefully this cleared up any confusions about what color models are, described the differences and explained how they are used. Understanding color models can help you keep from making costly design mistakes and allows you to create new, exciting effects with color in your design work.

So far in the Color and Design series we’ve discussed what Color Theory is, and delved into the various Color Models – but there’s more! Continue reading the Color and Design series to discover more about how a great grasp on color can improve your design. Also, be sure to check out the 3rd party resources listed below for more on Color Models. And as always, your comments are encouraged and appreciated.

Color Model Resources

• http://www.colorcube.com/articles/models/model.htm
• http://www.worqx.com/color/color_systems.htm
• http://www.colorjack.com/articles/color_models.html
• http://en.wikipedia.org/wiki/Color_model
• http://en.wikipedia.org/wiki/RGB_color_model
• http://en.wikipedia.org/wiki/CMYK_color_model
• http://www.techexchange.com/thelibrary/ColorModel.html
• http://www.sketchpad.net/basics4.htm

An Introduction To Color Theory

Color theory is a body of practical guidance to color mixing and the visual impacts of specific color combinations

-Wikipedia (color theory)

We’ve all seen it/felt it – It might have been a logo, a website or even the clothes you were wearing – but when you looked at it something was just… off. Color is one of those things that may not draw much attention when its right, but it certainly makes an impression when its wrong. While some people have a natural nack for it, there is a lot of science behind matching up hues in a color scheme – that’s where a little understanding of color theory comes in handy.

Color theory is essentially just a structured way of organizing and using color in design, but in order to better understand color theory it might help to learn a bit about its origins.

Color Theory Basics: Starting at The Beginning

The long and sometimes controversial history of color theory has been influenced by some of the most notable names in science and art.  The earliest concepts related to color theory emerged during the Renaissance when Leonardo da Vinci & Leone Battista Alberti postulated on ‘optics’ (the study of the behavior and properties of light) among other things.

However, full fledged color theory didn’t really emerge until much later with Sir Isaac Newton’s own experimentation into optics where he discovered the color spectrum.

The Color Spectrum

Through his various experiments Newton demonstrated that white light, when separated using a prism, was really a spectrum (or an array) of various colors combined. His experimentation exposed the existence of the visible spectrum of light, which he  studied extensively dividing it into 7 distinct color bands – red, orange, yellow, green, blue, indigo, and violet. It has since been argued that indigo, being relatively undetectable to the human eye, shouldn’t be considered a separate color. Goethe’s own color model for instance opts for only 6 distinct color bands, neglecting Indigo.

The Color Wheel

To help visualize color relationships, Newton developed the color wheel. A simplified model of the color spectrum, the color wheel starts at red and cycles clockwise through the hues to violet. The key to the color wheel is observing how one band of color relates to another band based on its proximity or position.

While Newton’s original color wheel had 7 distinct hues, Goethe’s Theory of Color introduced a symmetrical 6 hue color wheel (with-out Indigo). Goethe’s color wheel positioned colors directly opposite of one another, allowing each color to be “diametrically opposed” to its color counterpart – our first scientific peek into the contrasting & complimentary nature of color relationships.

Color Theory Recap

While the term Color Theory itself can sound a bit lofty, keep in mind, it’s just a simple, structured way of organizing colors and understanding color relationships. The basics are simple & can be applied by even the most novice of artists/designers. Hopefully, armed with a little color theory knowledge we can make smart color choices that improve our design efforts.

But Color Theory is just the beginning – continue reading the Color and Design series to discover more about how color can influence your design for the better. Also, be sure to check out the 3rd party resources listed below for more on Color Theory. And as always, your comments are encouraged and appreciated.

Color Theory Resources

• http://en.wikipedia.org/wiki/Color_theory
• http://www.colourlovers.com/blog/2008/05/08/history-of-the-color-wheel/
• http://www.worqx.com/color/
• http://en.wikipedia.org/wiki/RYB_color_model
• http://en.wikipedia.org/wiki/Theory_of_Colours_%28book%29
• http://www.cs.brown.edu/courses/cs092/VA10/HTML/ColorModels.html
• http://www.colormatters.com/colortheory.html
• http://www.johnlovett.com/colour.htm
• http://www.colorcube.com/articles/models/model.htm
• http://www.colorcube.com/articles/theory/theory.htm

More than one H1 on a page: good or bad? – Erin, south of Boston

Is more than one H1 header tag good or bad?

In short, bad!

There are two main reason why you should only have one <h1> header tag in place per page:

1. Better for SEO – I recommend having only one <h1> header tag per page and one <h2> header tag utilizing those two for your target keywords without keyword stuffing either of them. If you have more than two sections on one page, follow those up with <h3>’s and <h4>’s as needed and remember you can style them via CSS to look excatly like your <h1> and <h2>’s if you wish. Keep search engines and visitors in mind when using header tags.
2. Style – Header tags were created for style and anyone that’s been around web development at all knows that multiple h1′s on your page looks horrible when CSS is disabled – hence the reason why there are h2, h3, h4, etc. Don’t forget that you do have header tags beyond h1 & h2!

Color and Design Introduction

Two of the greatest weapons in any design ninja’s arsenal are a keen understanding of color, and a strong grasp on how to apply it in design. Color, both evocative and visceral, compels an emotional response engaging the audience both instantly and deeply. Color… is powerful.

However, color’s power is raw & primal, and with-out direction it can quickly overpower your design. Like other visual elements at a designers disposal, color is a tool that must be managed and applied purposefully to achieve its maximum effectiveness. In concert with line, form (or shapes), proportion, texture and balance, color can attract or deflect attention, infer weight & momentum, imbue mood or completely modify the meaning of a design.

Color and Design Series

Over the course of several articles we’ll uncover some of the essential principles that govern color, and explore methods of effectively leveraging color in design.

Key articles in this series will include an introduction to Color Theory, an exploration of the Color Wheel and related color schemes (primary, secondary, tertiary, complimentary, split complimentary etc), a study of the various color models (RYB, CMYK and RGB), a look at defining the difference between saturation and value (tints, tones, and shades), a discussion on color psychology & color meanings, and collections of HTML color codes, color scheme tools and other color & design related resources & inspiration.

The Color and Design article series avoids the extensive complexities of mathematical color science (mathematical formulas & physics), and focuses more on the essential principles of color and design that relate most directly to how designers use color in our work.

I hope you enjoy reading the series as much as I have enjoyed collecting the data and writing the articles.