While it’s taken as writ that we cultists tend to be creative types, a recent study from the Fuqua school of business at Duke University seems to indicate that simply seeing an Apple logo makes you more creative. The researchers conducted a number of experiments, one of which was showing the logos for fractions of a second to create a subliminal impression, and in all cases those who’d seen the Apple logo scored higher on standardized creativity tests than those who’d seen the IBM logo or no logos at all. Keith Sawyer in his Creativity and Innovation blog has got a great write up on the paper if you don’t feel like sorting through all the academic stuff in the published paper (I managed to get through 5 whole pages before turning to Keith’s excellent article).

A great article, once again from Smashing Magazine: Once your latest project is finished, you are very likely to forget the structure of the project’s layout, with all its numerous classes, color schemes and type setting. To understand your code years after you’ve written it you need to make use of sensible code structuring. The latter can dramatically reduce complexity, improve code management and consequently simplify maintainability. However, how can you achieve sensible structuring? Well, there are a number of options. For instance, you can make use of comments — after all, there is always some area for useful hints, notes and, well, comments you can use afterwards, after the project has been deployed. Indeed, developers came up with quite creative ways to use comments and text formatting to improve the maintainability of CSS-code. Such creative ways are usually combined into CSS styleguides — pieces of CSS-code which are supposed to provide developers with useful insights into the structure of the code and background information related to it. This article presents 5 coding techniques which can dramatically improve management and simplify maintainability of your code. You can apply them to CSS, but also to any other stylesheet or programming language you are using. You can browse through the references listed under the article — they containt further information about how you can achieve a well-organized and well-structured code. You may also be interested in the articles

• 70 Expert Ideas For Better CSS Coding,
• Code Beautifying, Formatting and Compressing Tools and
• CSS Formatters and Optimizers

1. Divide and conquer your code

First consider the structure of your layout and identify the most important modules in your CSS-code. In most cases it’s useful to choose the order of CSS-selectors according to the order of divisors (div’s) and classes in your layout. Before starting coding, group common elements in separate sections and title each group. For instance, you can select Global Styles (body, paragraphs, lists, etc), Layout, Headings, Text Styles, Navigation, Forms, Comments and Extras. To clearly separate fragments of code, select appropriate flags or striking comments (the more *-symbols you have in your code, the more striking a heading is). In the stylesheet they will serve as a heading for each group. Before applying a preferred flag to your code, make sure you can immediately recognize single blocks when scanning through the code. However, this approach might not be enough for large projects where a single module is too big. If it is the case, you might need to divide your code in multiple files to maintain overview of single groups of code fragments. In such situations master stylesheet is used to import groups. Using master-stylesheet you generate some unnecessary server requests, but the approach produces a clean and elegant code which is easy to reuse, easy to understand and also easy to maintain. And you also need to include only the master-file in your documents.

/*------------------------------------------------------------------
[Master Stylesheet] 

Project:	Smashing Magazine
Version:	1.1
Last change:	05/02/08 [fixed Float bug, vf]
Assigned to:	Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use:	Magazine
-------------------------------------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */

For large projects or large development team it is also useful to have a brief update log and some additional information about the project — e.g. you can put the information about who is this CSS-file assigned to and what is its primary use (e.g. Smashing Magazine, Smashing Jobs etc.). Additionally, you can include a debugging CSS-code to take care of diagnostic styling in case you run in some problems. Consider using Eric Meyer’s Diagnostic Styling as a debugging stylesheet to test your CSS-code and fix problems.

2. Define a table of contents

To keep an overview of the structure of your code, you might want to consider defining a table of contents in the beginning of your CSS-files. One possibility of integrating a table of contents is to display a tree overview of your layout with IDs and classes used in each branch of the tree. You may want to use some keywords such as header-section or content-group to be able to jump to specific code immediately. You may also select some important elements you are likely to change frequently — after the project is released. These classes and IDs may also appear in your table of contents, so once you’ll need to find them you’ll find them immediately — without scanning your whole code or remembering what class or ID you once used.

/*------------------------------------------------------------------
[Layout] 

* body
 + Header / #header
 + Content / #content
 	- Left column / #leftcolumn
 	- Right column / #rightcolumn
 	- Sidebar / #sidebar
 		- RSS / #rss
 		- Search / #search
 		- Boxes / .box
 		- Sideblog / #sideblog
 + Footer / #footer

Navigation	  #navbar
Advertisements	  .ads
Content header	  h2
——————————————————————-*/

…or like this:

/*------------------------------------------------------------------
[Table of contents] 

1. Body
 2. Header / #header
 	2.1. Navigation / #navbar
 3. Content / #content
 	3.1. Left column / #leftcolumn
 	3.2. Right column / #rightcolumn
 	3.3. Sidebar / #sidebar
 		3.3.1. RSS / #rss
 		3.3.2. Search / #search
 		3.3.3. Boxes / .box
 		3.3.4. Sideblog / #sideblog
 		3.3.5. Advertisements / .ads
 4. Footer / #footer
-------------------------------------------------------------------*/

Another approach is to use simple enumeration without indentation. In the exampe below, once you need to jump to the RSS-section you simply use a search tool to find 8. RSS in your code. That’s easy, quick and effective.

/*------------------------------------------------------------------
[Table of contents] 

1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer
-------------------------------------------------------------------*/
<!-- some CSS-code -->

/*------------------------------------------------------------------
[8. RSS / #rss]
*/
#rss { ... }
#rss img { ... }

Defining a table of contents you make it particularly easier for other people to read and understand your code. For large projects you may also print it out and have it in front of you when reading the code. When working in team, this advantage shouldn’t be underestimated. It can save a lot of time — for you and your colleagues.

3. Define your colors and typography

Since we don’t have CSS constants yet, we need to figure out some way to get a quick reference of “variables” we are using. In web development colors and typography can often be considered as “constants” — fixed values that are used throughout the code multiple times. As Rachel Andrew states, “one way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define constants. A common use for this is to create a color glossary. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.”

/*------------------------------------------------------------------
# [Color codes] 

# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */

Alternatively, you can also describe color codes used in your layout. For a given color, you can display sections of your site which are using this color. Or vice versa — for a given design element you can describe the colors which are used there.

/*------------------------------------------------------------------
[Color codes] 

Background:	#ffffff (white)
Content:	#1e1e1e (light black)
Header h1:	#9caa3b (green)
Header h2:	#ee4117 (red)
Footer:		#b5cede (dark black)

a (standard):	#0040b6 (dark blue)
a (visited):	#5999de (light blue)
a (active):	#cc0000 (pink)
-------------------------------------------------------------------*/

The same holds for typography. You can also add some important notes to understand the “system” behind your definitions.

/*------------------------------------------------------------------
[Typography] 

Body copy:		1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers:		2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea:	1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading:	1.5em Helvetica, Trebuchet MS, Arial, sans-serif;

Notes:	decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/

4. Order CSS properties

When writing the code often it’s useful to apply some special formatting to order CSS properties — to make the code more readable, more structured and therefore more intuitive. There is a variety of grouping schemes developers use in their projects. Some developers tend to put colors and fonts first; other developers prefer to put “more important” assignments such as those related to positioning and floats first. Similarly, elements are also often sorted according to the topology of the site and the structure of the layout. This approach can be applied to CSS selectors as well:

    body,
 h1, h2, h3,
 p, ul, li,
 form {
 	border: 0;
 	margin: 0;
 	padding: 0;
 }

Some developers use a more interesting approach — they group properties in an alphabetical order. Here it’s important to mention that alphabetizing CSS properties may lead to some problems in some browsers. You may need to make sure that no changes are produced as a result of your ordering manipulations.

body {
 background: #fdfdfd;
 color: #333;
 font-size: 1em;
 line-height: 1.4;
 margin: 0;
 padding: 0;
}

Whatever grouping format you are using, make sure you clearly define the format and the objective you want to achieve. Your colleagues will thank you for your efforts. And you’ll thank them for sticking to your format.

5. Indentation is your friend!

For better overview of your code you might consider using one-liners for brief fragments of code. This style might produce messy results if you define more than 3 attributes for a given selector. However, used moderately, you can highlight dependencies between all elements of the same class. This technique will dramatically increase code readability when you have to find some specific element in your stylesheet.

#main-column { display: inline; float: left; width: 30em; }
 	#main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; }
 	#main-column p { color: #333; }

You remember exactly what you did and can jump back in there and fix it. But what if you made a lot of changes that day, or you just simply can’t remember? Chris Coyier suggests an interesting solution for highlighting recent changes in your CSS-code. Simply indenting new or changed lines in your CSS you can make recent changes in your code more visible. You can as well use some comments keywords (e.g. @new) — you’ll be able to jump to the occurrences of the keyword and undo changes once you’ve found some problems.

#sidebar ul li a {
     display: block;
     background-color: #ccc;
          border-bottom: 1px solid #999; /* @new */
     margin: 3px 0 3px 0;
          padding: 3px; /* @new */
}

Conclusion

CSS styleguides are helpful if and only if they are used properly. Keep in mind that you should remove every styleguide which doesn’t effectively help you to get a better understanding of the code or achieve a well-structured code. Avoid too many styleguides for too many elements bundled in too many groups. Your goal is to achieve a readable and maintainable code. Stick to it and you’ll save yourself a lot of trouble.

Let me admit a real prejudice that I have, and maybe you can try to convince me that I’m wrong: it’s my belief that you just can’t get great design out of a design agency with a staff larger than a dozen or two. Design doesn’t scale well, in my opinion, or at least it doesn’t do so easily. This craft, and whatever pretensions to art it can pull off, rests so much on the efficiency of transferring ideas from the brain to the hand. This means that in its ideal form, it works best when practiced by a single person. The perfect design staff is a single designer who can conceive of and execute an idea from start to finish — a straight shot from the right brain to the wrist — maintaining the same coherent creative vision throughout. Of course, as an economic matter, this is impractical. For design to work as a business, it almost always has to scale to some degree. The smaller the scale, though, the more efficient the practice of design; transmitting ideas among a small number of people is much more effective than transmitting them among a large number.

Bigger Isn’t Better

When a design operation scales up the equation becomes much more diffuse. Beyond a certain point, a business of designers is no longer a studio — focusing on a specific niche of design, or devoting energies into a small number of projects at once — but rather an agency — a provider of multiple services, staffed by different kinds of specialists. Ideas must travel more complicated routes from brains to hands, and reconciling conflicting signals becomes difficult. It’s certainly not the case that agencies are inherently staffed by inferior designers. That’s not what I’m saying, let me be clear. In fact, I’ll freely grant that designers employed at agencies are very often more talented than those employed at in-house design groups (except for those in my group, of course). The problem is that the structures of most larger design businesses cannot effectively facilitate the the transmittal of ideas. They don’t allow good design to happen, because they are overburdened with the organizational overhead of running a business: org charts, jurisdictions, inconsistency, poor communications, etc. All the complications that large groups of humans create for one another when they work together, complications that are not about doing design.

Bench Warmers

When a client hires a design vendor, they are often attracted to a concept called “depth of bench.” This means that the vendor, whether a studio or an agency, has enough staff at the ready in the case that one of the staff assigned to their project fails miserably or just leaves the job. To provide an attractive depth of bench, a design vendor almost invariably has to scale up. What you get, then, is a grab bag effect. Hiring a design agency with a large staff is an exercise in luck of the draw; one client may get very good designers assigned to their project, and another may get poor designers. Most often a client will get a mix. A random mix. In a large design agency, I contend that it’s impossible to have a staff that’s uniformly excellent. Impossible.

Small-Mindedness

By contrast, design studios that are small in staff are also much more focused. Their structures are inherently simpler, so their dissemination of ideas is more effective. Moreover, in many design studios where it’s clear who provides the source of creative direction, there’s very little ambiguity regarding who is the brain and who are the hands. (Contrast this with agencies where there are often dozens and dozens of dubiously talented people with the title “creative director” printed on their business cards). These small studios are usually good at a fairly narrow band of project types, too, though they may have delusions of being adept at a much wider spectrum. You wouldn’t hire a Web design studio to design your outdoor advertising campaign, for instance, nor should you. As a client, you want the very best design you can get given the medium in which you’re dealing. Do you want to hire a company that does a few things very well, or a company that does many things not particularly well?

From the fine pilots over at Airbag, comes news of a newly formed group of web professionals: "...to form a strong network of individuals who have taken the initiative to become craftsmen of their trade. Today it is a list of names, tomorrow it will be a force for good—or at the very least a good list to have when you're in a financial crunch and the guy schlepping real estate is paying $50 per new lead." Joined! #

I receive a lot of e-mail per day and some of them are from people who want my help on CSS or if I know why certain things don’t work or show up in IE 6 or 7 etc. If I could help fix their problem? In a lot of cases I need to e-mail back that the code they’re using is full of errors and that they’re using old school techniques (tables for layout), inline styling etc. So the first tip here is, learn about Web Standards and learn about coding with CSS for layout. There are a lot of good books out there to learn this from the start. This is the basis of good web design.

Learn about Web Standards

If you have no idea what I'm talking about, then here is your chance to start to learn about all this.

Why Web Standards

Learn what Web Standards are and why you should use them in every site or web page you build. Most of these articles are old but the benefits are still valid if you start coding the best practice way.

• To Hell With Bad Browsers
• The Business Value of Web Standards
• Why tables for layout is stupid
• The benefits of Web Standards
• A Web Standards Primer

Starting

Get started and turn the knowledge you've learned into practice by using CSS for layout. If you have no clue where to start this adventure you'll find these links handy I think.

• HTML Beginner Tutorial
• CSS Beginner Tutorial
• HTML Intermediate Tutorial
• CSS Intermediate Tutorial
• HTML Advanced Tutorial
• CSS Advanced Tutorial
• W3.org
• Westciv (creators of Stylemaster)
• Excerpt Build Your Own Web Site The Right Way Using HTML & CSS
• SitePoint CSS Reference

Lynda.com (video based tutorials - paying)

• CSS for Designers with: Andy Clarke and Molly E. Holzschlag
• CSS Web Site Design with Eric Meyer
• CSS2 Essential Training with: Christopher Deutsch

Books

There are a lot of good books out there and this is just a small selection of them that I think are well suited towards beginners.

• Designing with Web Standards (2nd Edition) by Jeffrey Zeldman
• Build Your Own Website The Right Way Using HTML & CSS by Ian Lloyd
• Beginning CSS Web Development: From Novice to Professional by Simon Collison
• HTML Dog: The Best-Practice Guide to XHTML and CSS by Patrick Griffiths
• Mastering CSS with Dreamweaver CS3 by Stephanie Sullivan, Greg Rewis
• Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition) by Dan Cederholm
• Transcending CSS: The Fine Art of Web Design by Andy Clarke
• The Principles of Beautiful Web Design by Jason Beaird

CSS bug fixing

This is one of the things that a good web designer has to go through each time he or she codes a page using CSS for layout. Following Web Standards is the way to go and it should be an obvious choice when you take your job serious. Today I want to share some of my thinking process and the steps I usually go through when I'm at this phase of the process. But before jumping on the bandwagon to fix things consider these criteria...

Make sure your markup is well structured

Make sure your markup is well structured, in other words use the appropriate markup for the appropriate content. Use headings for titles, paragraphs for blocks of text, ordered and unordered lists to sum things up in list form or for your navigation, fieldsets in combination with legend and label elements for forms... Last but not least, use tables only for what they're meant for, tabular data.

Validate your markup

It's not just about the green check mark in the bottom right hand corner of your browser or 0 errors or warning on the W3C Validator that matters. This is only an extra check and a confirmation that your code validates. The W3C markup validator or W3C CSS validator should be your tools for sure. Tools that help you create the right coding, but keep in mind that this is just a machine that runs a test for you. Certain coding mistakes, such as using the wrong or structure-less code for certain content will not be seen as a mistake by this machine, so make sure this is in order. Validating your pages is an absolute requirement before you start to fix any CSS layout problems.

Fixing for IE 6 and/or 7

Ok, your code is well structured and your page validates. The page looks fine in browsers that follow the standards like Firefox and Safari, but you still need to fix a few things for IE6 and 7. How do you proceed? Here are the steps I usually follow. It comes down to analyzing and trying to isolate the problem...

Isolate the problem via XHTML

You can try to disable certain blocks of code in your XHTML. Use comment tags and put certain blocks of XHTML coding in comments. View the page and see if the problem is still there. Do this block by block starting with the bigger ones: left column, right column, content, header etc. At a certain point chances are you see your problem disappear. If you commented out a big block of content, uncomment smaller nested blocks of content now to isolate the problem until you have as less code in comment as possible.

Isolate the problem via CSS

Isolating the problem via XHTML is not always an option and so you can also try to disable certain properties of styles or certain styles all together to see what happens. Some styles might interfere with other styles. Some styles need to be more specified before they have effect because they've been overwritten by another style etc. Everybody has his or her own method to try to solve things and we all have our favorite tools. Mine are Adobe DreamWeaver for the HTML coding in combination with CSSEdit for my CSS styling. Especially CSSEdit's Preview feature in combination with the XRay mode has saved me a ton of time. When you are in XRay mode you simply select an element, and you'll see its margins and padding (if any) and the space this element takes. At the top of the Preview page you see the all the parent elements with classes and id naming etc. All of them are clickable as well. In the Inspector panel you'll see all CSS styles that apply to the selected element. Clicking on one of the styles in the Inspector panel will open the CSS stylesheet (if it's not open yet) and will bring you to the selected style. You can preview URLs and import the styles and use the overwrite method. I use that a lot when I try to help someone out. When you need to experiment while you debug, you can use the Milestones feature. Compare this a bit with the Snapshot function in the History panel of Photoshop. I say this is pretty neat stuff :)

Color the background of elements

In a lot of cases div containers are jumping down or they've moved to the left or right. It might be that the div has grown in width. Try adding background colors to your divs or elements to see the exact box of space they take.

Is it a known bug?

Check the Internet Explorer vs. the Standards "list" of known bugs or check the Explorer Exposed! list. At the bottom of this article I list a few sites that are good resources for CSS bug fixing.

Use conditional comments

I always use a separate CSS stylesheet for Internet Explorer 6 and 7 and link to the stylesheet via a conditional comment. With this conditional comment you address Internet Explorer lower than version 8:

1. <!--[if lt IE 8]>
2. <link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
3. <![endif]-->

Avoid hacks

I'm using the * html selector for IE 6 specific styles and I place them in a separate stylesheet using a conditional comment that only lower versions of IE 8 will read. The rules starting with * html will not be executed by IE 7. Rules without * html are for both IE 6 and 7.

CSS bug fix resources

You'll run into trouble sooner or later and these sites can help you to figure out what's going on.

• Position is Everything
• CSS Advisor
• BrowserBugs
• QuirksMode - Bug Report - Latest reports
• CSS contents and browser compatibility
• Bugs in MSIE 7 for Windows

• BBC NEWS | News Front Page -
   bookmark this on del.icio.us
  -
  posted
  by jellyjet
  to
  news
  bbc
  rossboardman
  - more about this bookmark…

Popularity: 41%

• New Royal Mint Designs -

  Gaze upon our lovely new coins!

   bookmark this on del.icio.us
  -
  posted
  by jonhicks
  to
  sidenotes
  coins
  - more about this bookmark…

Popularity: 28%

• Fresh, Free and Gorgeous RSS/Feed Icons -

Popularity: 29%

• Typography desktop wallpapers. fonts on your desktop!

  (tags: typography wallpaper design desktop)

• Flickr: The Designer Wallpaper Pool

  (tags: wallpaper flickr wallpapers desktop)

Popularity: 24%

• jQuery for Designers

  (tags: jquery javascript tutorials ajax webdesign design js)

• Slide out and drawer effect | jQuery for Designers

  (tags: jquery javascript accordion webdesign development plugin navigation)

• jQuery Collapsible Menu

  (tags: jquery collapsible menu concertina accordian)

• Effects/show - jQuery JavaScript Library

  (tags: show jquery toggle)

• 50+ Amazing Jquery Examples

  (tags: jquery javascript ajax webdesign design examples)

• Julien Lecomte’s Blog » Gzip Your Minified JavaScript Files

  (tags: javascript compression jquery gzip performance optimization)

• Edit-in-Place with jQuery

  (tags: jquery ajax)

Popularity: 39%