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 utalizing 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!

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

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.

If you have a company logo on your site, what is the best way to include the text of the logo for SEO purposes? ALT tag, CSS hiding, or does it matter? – Richard M, Austrialia

Use ‘alt tag’ or CSS to label your logo?

In short, Yes, use the ‘alt tag’ or the alternative text tag to add text to your logo or any other image for that matter.

In detail, Search engines love to see alternative text being utilized in images and hate to see hidden text in any way, shape, or form. I recommend keeping your alternative text very simple and to the point around 3-4 words but remember to add some relevant keywords within your images alt text as well – always keep search engines in mind along with users.

Why use the ALT tag in your image?

1. It’s Search Engine friendly – search engines, especially Google, have gotten very smart at catching ‘black hat’ type SEO tricks and hate to see them in any part of your website. They do however love to see correct ways of optimization and will value your website higher in the long run if you do everything correctly. With that said, USE ALT TEXT because search engines love to see all images, including your logo, have them in place plus it does add value to your site.
2. Generate traffic from Image Search- I don’t know about you but I love Google Image Search and use it on a daily basis to find great, relevant images for my particular need. Supply your images with alternative text will give you that extra boost you might need for your images to start showing up in image search ultimately generating more traffic for you. Weather it’s a church website or a personal blog, always use alt text.
3. It’s Simple & Easy to use – I know that CSS hiding is NOT hard but neither is using the ALT tag in your images. In fact, it actually takes less time to add some good alternative text than it does hiding some text via CSS. Another cool feature about the alt tag is ANYONE CAN USE IT – that’s right, anyone! If you can add an image via HTML you can add alternative text (see below for reference). If your using a CMS (Content Management System) be sure to utilize the Alternative Text option – it’s super easy!

So, How do I add alt text to my images?

Easy, just use the codex below:

• <img src="boat.gif" alt="Big Boat" />

When adding an image just add the alt=” ” to your HTML and remember to put unique alternative text for each image between the ” “.