Archive for April, 2010

Show off your typographic know-how by setting phone numbers perfectly. Small details can make a difference!

read more

Progress is good, but we need to make sure that we’re progressing in the right direction. Our fundamental skills and the craft of design have started to take a back seat. Using the right tools and techniques is certainly an important part of design. But do our tools and resources make us better designers?

Taking a close look at the current state of design, we can see that sometimes modern design tools and processes do more harm than good. Please note that in preparing this article, we presented basic questions to designers, from beginner to expert, in an unscientific poll. Close to 600 designers participated.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Draw Comics The Marvel Way

As a teenager, I loved comic books: the art, the stories, the super-powers I wished I had. I remember the point when I went from reading and enjoying comics to wanting to create them. I became obsessed with being able to draw exactly like the great comic book artists of that time, people like Jim Lee. Taking books like How to Draw Comics the Marvel Way out of the library was like having the artists themselves sitting next to me, showing me the way. Many designers can relate to this, because today through blogs and Twitter we can follow those whom we consider to be the best designers in the world, learning what they read and where they go and maybe even getting a glimpse of how they create the work we so admire.

Batman and Superman, drawn by Jim Lee.

This “how to” approach is reflected in the design resources we find today. Soon after a certain style or effect becomes popular, tutorials and other tools to create it become available. But the element that was missing from my “how to” books is the same element that is missing from these tutorials, lists, and galleries: “why.” Why did they choose that typeface? Why did they opt for a minimalist style? Why did they use that particular technique to spotlight the product? We can go through the motions of creating a design, but we really need to understand why it works. As we’ll see, certain historical developments offer additional insight.

Imitation And The Cargo Cults

What is original? More to the point, is anything original? Defining originality in design is one of those complex gray areas. This subject has sparked ongoing debate about what is inspired and what is blatantly copied. Last year, Jeff Veen gave a talk that showed how the cargo cults of the World War II era relate to this discussion about design today.

During the war, islands in the Pacific region were key tactical locations in the battle between the US and Japan. The two countries began to air-drop food, weapons, medicine and other supplies there. Some of these supplies were shared with the indigenous people who lived on the islands. When the war ended and the air bases were abandoned, the cargo stopped dropping.

Cults sprouted up that enacted rituals imitating what they saw the soldiers do, believing this would bless them with supplies. They even constructed air strips, bamboo control towers and straw planes, all in the hope of bringing back the airplanes with their bountiful cargo. The reason this copying didn’t work, Jeff Veen points out, is that they missed all of the underlying principles.

Straw plane made by a cargo cult of the South Pacific.

We can see modern-day examples of this by comparing the iPhone to the subsequent copycat phones that failed by only mimicking what their designers thought made the iPhone a success. Simple imitation completely misses the point of what made the original great. Some phone makers, including HTC, wound up being sued by Apple for patent infringement. This goes back to how we use the design tools and learning resources available to us. There needs to be an element of intention and a deeper understanding first.

The Modern Designer

The Designer’s Diet

The diet of a typical designer is low in in-depth content and high in inspirational lists, tutorials and freebies. A review of blogs and our poll of design professionals shows a clear trend in the informational diet of creatives. They consume a lot but bypass a deeper understanding of design. In-depth articles and case studies are the least-read articles. Over 75% of the articles that designers read are either design tutorials or inspirational lists.

Designers feel most comfortable starting their latest project by sifting through inspirational lists and working in their favorite computer application (Photoshop was used by our poll respondents more than all other software combined). And what about those freebies? Designers devour them for their projects. In fact, they said they use freebies more than client-provided, stock or original assets. To be fair, this is likely because these types of articles and tools are highly visible online, but this is still a bit daunting to hear. This content would not exist without such a big audience.

Tutorials Should Foster Thinking

On nearly every design blog right now, you can find some sort of design tutorial. They range from useful techniques to borderline useless “how-to”s. The problem isn’t just the tutorials themselves or their perceived usefulness; it’s how they are positioned relative to design. These tutorials are not “design” tutorials; they are, more accurately, tool tutorials.

This may seem a negligible difference to some. The problem with the former label is that it implies, falsely, that you are learning to design. If someone follows certain steps in creating an effect, that is learning how to use a particular software application. “Design” has many definitions, and every designer will give you a different one. But I think most designers can agree on what design is not. And it is not a 10-step recipe for creating a “Super-Awesome Laser Beam Effect.”

Online tutorials focus so much on the tools that many designers are learning to use the software well but are losing fundamental design skills. In his article “Don’t Be a Tooler,” Von Glitscha talks about how the craft of design is being watered down and skills like drawing are being forgotten. Many designers have traded in the pencil for the pen tool. He says, “Too many designers look for the easy way out when it comes to a creative process, and that is problematic to their creative growth. Instead of bolstering a core skill like drawing, they pursue a path of least creative resistance, and the end result is a Tooler.”

The focus on trendy effects encourages cargo cult-like ritual in which designers mimic a technique without understanding what makes it suitable for a project. A Photoshop filter or gallery feature becomes the driver and turns a design into a meaningless visual layer. This reflect poorly on the industry, showing designers as being proficient with design applications and resources but not design itself.

Ingredients of Good Design

Good design is the result of great thinking, as well as great ingredients. Typical ingredients are compelling photography and strong content. The job of the designer, as a sort of master chef, is to measure, blend and cook these elements into a successful project. Where do these ingredients come from, and just how good are they? Some elements come from clients, some are original work, and others come from stock vendors like iStockPhoto and Veer. But the majority of ingredients come as freebies. Free WordPress themes abound. One can download thousands of textures, graphics and social icons to use in their next project.

Burger Chef customer service promotional photo, 1960s (via bayswater97).

Using cheap or free design elements is like a five-star chef using canned sauces and pre-made dishes in the spirit of a fast-food restaurant. Creating from scratch seems to be a thing of the past. Photo shoots and original illustration are now usually done only by agencies that work for big clients with deep pockets.

Certainly, factors outside of the designer’s control will affect these decisions, such as budget. But the price of using only cheap or free assets is that designs will increasingly look like replicas of each other. In addition, clients will come to expect assets for free or next to nothing, so budgets will not be there for future projects.

There are even risks with using paid assets such as stock photography. A photo could be used by another company for another purpose, thus diluting your client’s brand. Granted, not every client can afford a certain caliber work. Time and money are often a luxury. Many designers openly use freebie art and pre-designed WordPress themes for clients to save time and money. The question is not whether this is right or wrong. This is up to the designer to disclose to the client. The question is is this making the craft of design more efficient, or is it killing it?

Harmful to Your Design Health

Dependance on resources such as freebies and tutorials is turning our design industry into an assembly line that churns out the same exact piece, with perhaps slight variation. Design is not a commodity, but the more that designers use freebies and the like, the more it will become one. The Web is just a large copy machine, as Kevin Kelley puts it. Design seems to be going down this road, too. Even our information resources—the design blogs themselves—are clones of each other.

“When copies are super abundant, they become worthless. When copies are super abundant, stuff which can’t be copied becomes scarce and valuable.”
— Kevin Kelly (Image: Ibeamee)

No wonder many clients see the designer’s role as being to create eye candy or a beautiful “skin.” With this view prevalent, designers will never be considered people who can solve problems for businesses and their customers and who can effectively communicate ideas. We will simply be a mindless pair of hands that knows how to apply some trendy colors and glossy effects to make things look nice. A technique with no purpose makes a design irrelevant. If design becomes irrelevant, then at some point we may be, too.

Return to the Art of Design

The solution is not to never read this type of content or to use these assets, but it needs to be measured. Designers need to push themselves with the fundamental craft of design.

Inspiration Requires Perspiration

Remember when special effects in movies were real? When the stunt man actually jumped onto a moving car? When characters ran around a luscious green jungle in South America, not in front of a flat green screen in a warehouse in Los Angeles? Computer technology has become integral to the creative workflow. It definitely has benefits; but the problem is that the “should we” has crept into “we can, so we will.” Many shallow stories are built around amazing effects, as opposed to engaging stories being supported by technology. In design, the “story” is communication and problem-solving. We need good reasons to use the techniques and graphics that we use in our designs.

I’ve seen posts in forums from designers looking for great paper textures or certain free graphics. What about finding a real piece of paper, scanning it and creating your own texture? Or sketching a graphic element and importing it to the computer to create your own unique piece of art? Sometimes we need to get our hands dirty. In the end, it will give us a new appreciation of the work, and we will be proud of the result. It doesn’t always work out because of time or budget constraints, but make sure the decision is based on those and not laziness.

(Image by jamiecoull)

Reading a quick article online or scanning a few nice websites is easy. More difficult is digging deep in a book or finding the time and money to attend a conference. Plenty of books and offline resources have great information on design. A little research is all it takes to find plenty of libraries and universities with good graphic design programs in all parts of the world. Great design takes more effort than a few clicks.

Build Skills With Purpose

Practicing and honing skills are vital to growth. Knowing the ins and outs of our software is an important part of the job, too. Thinking conceptually and devising solutions should come first, though. If a designer finds that he needs to brush up on a tool or technique, then a tutorial is the ideal way to learn. Our tools and resources are a means to good design, not the end. Identify the purpose first. The purpose might relate to the website’s user experience or a message in a product advertisement. After you’ve determined the purpose, find the best tool or technique to support it.

From the article “The Role of Sketching in the Design Process.”

Designers are more comfortable with their favorite design application than with good old pen and paper. Sketching is about getting ideas out and finding the best solution on which to iterate. Some sketchbooks of designers are so beautiful that they are almost intimidating. But great drawing skill doesn’t make the thinking or result any better. And some of that skill is gained with practice. The point, though, is to focus not on how great the sketch looks but on how sound the concept or user experience is. On the computer, we focus too much on getting the lines and colors just right, which ends up distracting us. Buy a pencil and paper: it’s cheaper than any application you’ll find.

Train Your Design Brain

Boxing is one of the most brutal sports. Learning techniques and conditioning the body is critical to being able to compete. But even boxing has more to it than the aggressive physical displays that the audience sees from the seats. Some of the greatest boxers, like Muhammad Ali, recognized this balance; they were great not just at knocking out opponents but at out-thinking them, too. Mike Rooney, a former boxing trainer of Mike Tyson, says, “Boxing is 80% mental and 20% physical. Anyone can get in physical shape.”

Muhammad Ali versus Sonny Liston (1965), by Neil Leifer.

Design is similar in that anyone can imitate or find free assets that make for pleasing visuals. To be great designers, we need to improve our mental game. We have many ways to get our minds in shape to be the best tool in our arsenal. When we get in the ring with the client, we need to be ready to take some punches. We also need to be trained and armed with the fundamentals so that we can help clients understand that we’re not just sharing our feelings or loose opinions but that we have sound reasons behind our design choices.

If you don’t understand or can’t explain fundamental design principles such as negative (or white) space, balance and contrast, how do you expect to consult with a client on the best approach for a project? The website design industry is great, and many designers are self-taught. They don’t need certification to ply their trade, and they aren’t required to continue their education, as in other professions. But this is also a disadvantage, because anyone without training or understanding can call himself a designer. A deeper understanding or a degree in design (or a related field) can make all the difference.

Great Design Is History

(Image: Paul Rand)

Design began like any craft: people practiced it, studied it and challenged themselves. While modern design tools and resources certainly make our many tasks easier, they don’t always improve our work. Tools and shortcuts are temporary. Great design is timeless. The best tool available is sitting in our heads; we just need to upgrade it once in a while. Training and experience leads to solid solutions and happy clients who demand our expertise.

We determine the type of information made available to us. Every click (and tweet) can be a vote for a better and smarter design community. Please choose wisely.

Resources

• Great Designers Steal, by Jeff Veen
• Don’t Be a Tooler, by Von Glitschka
• The Role of Sketching in the Design Process, by Sean Hodge
• Contrast and Meaning, by Andy Rutledge

(al)

---

© Francisco Inchauste for Smashing Magazine, 2010. | Permalink | 214 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

CSS’ barrier to entry is extremely low, mainly due to the nature of its syntax. Being clear and easy to understand, the syntax makes sense even to the inexperienced Web designer. It’s so simple, in fact, that you could style a simple CSS-based website within a few hours of learning it.

But this apparent simplicity is deceitful. If after a few hours of work, your perfectly crafted website looks great in Safari, all hell might break loose if you haven’t taken the necessary measures to make it work in Internet Explorer. In a panic, you add hacks and filters where only a few tweaks or a different approach might do. Knowing how to deal with these issues comes with experience, with trial and error and with failing massively and then learning the correct way.

Understanding a few often overlooked concepts is also important. The concepts may be hard to grasp and look boring at first, but understanding them and knowing how to take advantage of them is important.

Two of these concepts are specificity and inheritance. Not very common words among Web designers, are they? Talking about border-radius and text-shadow is a lot more fun; but specificity and inheritance are fundamental concepts that any person who wants to be good at CSS should understand. They will help you create clean, maintainable and flexible style sheets. Let’s look at what they mean and how they work.

The notion of a “cascade” is at the heart of CSS (just look at its name). It ultimately determines which properties will modify a given element. The cascade is tied to three main concepts: importance, specificity and source order. The cascade follows these three steps to determine which properties to assign to an element. By the end of this process, the cascade has assigned a weight to each rule, and this weight determines which rule takes precedence, when more than one applies.

Please consider reading our previous related article:

• CSS Specificity: Things You Should Know

[By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]

1. Importance

Style sheets can have a few different sources:

1. User agent
   For example, the browser’s default style sheet.
2. User
   Such as the user’s browser options.
3. Author
   This is the CSS provided by the page (whether inline, embedded or external)

By default, this is the order in which the different sources are processed, so the author’s rules will override those of the user and user agent, and so on.

There is also the !important declaration to consider in the cascade. This declaration is used to balance the relative priority of user and author style sheets. While author style sheets take precedence over user ones, if a user rule has !important applied to it, it will override even an author rule that also has !important applied to it.

Knowing this, let’s look at the final order, in ascending order of importance:

1. User agent declarations,
2. User declarations,
3. Author declarations,
4. Author !important declarations,
5. User !important declarations.

This flexibility in priority is key because it allows users to override styles that could hamper the accessibility of a website. (A user might want a larger font or a different color, for example.)

2. Specificity

Every CSS rule has a particular weight (as mentioned in the introduction), meaning it could be more or less important than the others or equally important. This weight defines which properties will be applied to an element when there are conflicting rules.

Upon assessing a rule’s importance, the cascade attributes a specificity to it; if one rule is more specific than another, it overrides it.

If two rules share the same weight, source and specificity, the later one is applied.

2.1 How to Calculate Specificity?

There are several ways to calculate a selector’s specificity.

The quickest way is to do the following. Add 1 for each element and pseudo-element (for example, :before and :after); add 10 for each attribute (for example, [type=”text”]), class and pseudo-class (for example, :link or :hover); add 100 for each ID; and add 1000 for an inline style.

Let’s calculate the specificity of the following selectors using this method:

• p.note
  1 class + 1 element = 11
• #sidebar p[lang="en"]
  1 ID + 1 attribute + 1 element = 111
• body #main .post ul li:last-child
  1 ID + 1 class + 1 pseudo-class + 3 elements = 123

A similar method, described in the W3C’s specifications, is to start with a=0, b=0, c=0 and d=0 and replace the numbers accordingly:

• a = 1 if the style is inline,
• b = the number of IDs,
• c = the number of attribute selectors, classes and pseudo-classes,
• d = the number of element names and pseudo-elements.

Let’s calculate the specificity of another set of selectors:

• <p style="color:#000000;">
  a=1, b=0, c=0, d=0 → 1000
• footer nav li:last-child
  a=0, b=0, c=1, d=3 → 0013
• #sidebar input:not([type="submit"])
  a=0, b=1, c=1, d=1 → 0111
  (Note that the negation pseudo-class doesn’t count, but the selector inside it does.)

If you’d rather learn this in a more fun way, Andy Clarke drew a clever analogy between specificity and Star Wars back in 2005, which certainly made it easier for Star Wars fans to understand specificity. Another good explanation is “CSS Specificity for Poker Players,” though slightly more complicated.

Andy Clarke’s CSS Specificity Wars chart.

Remember that non-CSS presentational markup is attributed with a specificity of 0, which would apply, for example, to the font tag.

Getting back to the !important declaration, keep in mind that using it on a shorthand property is the same as declaring all of its sub-properties as !important (even if that would revert them to the default values).

If you are using imported style sheets (@import) in your CSS, you have to declare them before all other rules. Thus, they would be considered as coming before all the other rules in the CSS file.

Finally, if two selectors turn out to have the same specificity, the last one will override the previous one(s).

2.2 Making Specificity Work For You

If not carefully considered, specificity can come back to haunt you and lead you to unwittingly transform your style sheets into a complex hierarchy of unnecessarily complicated rules.

You can follow a few guidelines to avoid major issues:

• When starting work on the CSS, use generic selectors, and add specificity as you go along;
• Using advanced selectors doesn’t mean using unnecessarily complicated ones;
• Rely more on specificity than on the order of selectors, so that your style sheets are easier to edit and maintain (especially by others).

A good rule of thumb can be found in Jim Jeffers’ article, “The Art and Zen of Writing CSS”:

Refactoring CSS selectors to be less specific is exponentially more difficult than simply adding specific rules as situations arise.

3. Inheritance

A succinct and clear explanation of inheritance is in the CSS3 Cascading and Inheritance module specifications (still in “Working draft” mode):

Inheritance is a way of propagating property values from parent elements to their children.

Some CSS properties are inherited by the children of elements by default. For example, if you set the body tag of a page to a specific font, that font will be inherited by other elements, such as headings and paragraphs, without you having to specifically write as much. This is the magic of inheritance at work.

The CSS specification determines whether each property is inherited by default or not. Not all properties are inherited, but you can force ones to be by using the inherit value.

3.1 Object-Oriented Programming Inheritance

Though beyond the scope of this article, CSS inheritance shouldn’t be confused with object-oriented programming (OOP) inheritance. Here is the definition of OOP inheritance from Wikipedia, and it makes clear that we are not talking about the same thing:

In object-oriented programming (OOP), inheritance is a way to form new classes […] using classes that have already been defined. Inheritance is employed to help reuse existing code with little or no modification. The new classes […] inherit attributes and behavior of the pre-existing classes. …

3.2 How Inheritance Works

When an element inherits a value from its parent, it is inheriting its computed value. What does this mean? Every CSS property goes through a four-step process when its value is being determined. Here’s an excerpt from the W3C specification:

The final value of a property is the result of a four-step calculation: the value is determined through specification (the “specified value”), then resolved into a value that is used for inheritance (the “computed value”), then converted into an absolute value if necessary (the “used value”), and finally transformed according to the limitations of the local environment (the “actual value”).

In other words:

1. Specified value
   The user agent determines whether the value of the property comes from a style sheet, is inherited or should take its initial value.
2. Computed value
   The specified value is resolved to a computed value and exists even when a property doesn’t apply. The document doesn’t have to be laid out for the computed value to be determined.
3. Used value
   The used value takes the computed value and resolves any dependencies that can only be calculated after the document has been laid out (like percentages).
4. Actual value
   This is the value used for the final rendering, after any approximations have been applied (for example, converting a decimal to an integer).

If you look at any CSS property’s specification, you will see that it defines its initial (or default) value, the elements it applies to, its inheritance status and its computed value (among others). For example, the background-color specification states the following:

Name: background-color
Value: <color>
Initial: transparent
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: the computed color(s)

Confusing? It can be. So, what do we need to understand from all this? And why is it relevant to inheritance?

Let’s go back to the first sentence of this section, which should make more sense now. When an element inherits a value from its parent, it inherits its computed value. Because the computed value exists even if it isn’t specified in the style sheet, a property can be inherited even then: the initial value will be used. So, you can make use of inheritance even if the parent doesn’t have a specified property.

3.3 Using Inheritance

The most important thing to know about inheritance is that it’s there and how it works. If you ignore the jargon, inheritance is actually very straightforward.

Imagine you had to specify the font-size or font-family of every element, instead of simply adding it to the body element? That would cumbersome, which is why inheritance is so helpful.

Don’t break it by using the universal selector (*) with properties that inherit by default. Bobby Jack wrote an interesting post about this on his Five-Minute Argument blog. You don’t have to remember all of the properties that inherit, but you will in time.

Rarely does a CSS-related article not bring some kind of bad news about Internet Explorer. This article is no exception. IE supports the inherit value only from version 8, except for the direction and visibility properties. Great.

4. Using Your Tools

If you use tools like Firebug or Safari’s Web Inspector, you can see how a given cascade works, which selectors have higher specificity and how inheritance is working on a particular element.

For example, here below is Firebug in action, inspecting an element on the page. You can see that some properties are overridden (i.e. crossed out) by other more specific rules:

Firebug in action, informing you how specificity is working.

In the next shot, Safari’s Web Inspector shows the computed values of an element. This way, you can see the values even though they haven’t been explicitly added to the style sheet:

With Safari’s Web Inspector (and Firebug), you can view the computed values of a particular element.

5. Conclusion

Hopefully this article has opened your eyes to (or has refreshed your knowledge of) CSS inheritance and specificity. We encourage you to read the articles cited below, as well as Smashing Magazine’s previous article on the topic.

Even if you don’t think about them, these issues are present in your daily work as a CSS author. Especially in the case of specificity, it’s important to know how they affect your style sheets and how to plan for them so that they cause only minimal (or no) problems.

Resources And Further Reading

• Assigning Property Values, Cascading, and Inheritance, W3C
• CSS3: Cascading and Inheritance, W3C
• Selectors Level 3: Calculating a Selector’s Specificity, W3C
• The Cascade, SitePoint
• Inheritance and Cascade, Dev.Opera
• CSS Inheritance, Dorward Online
• Cascading Order and Inheritance in CSS, David’s Kitchen
• Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade, Van SEO Design
• Specifics on CSS Specificity, CSS-Tricks
• Link Specificity, meyerweb.com
• Redundancy vs. Dependency, mezzoblue

(al)

---

© Inayaili de Leon for Smashing Magazine, 2010. | Permalink | 40 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS