UPDATE: 4/11/10

After exhausting every idea for finding/fixing the missing images, I’m admitting defeat. I have no clue how this happened, but my entire /uploads folder has disappeared from my WordPress installation (both locally and on the host). This of course contained all the images for everything published here since the inception of this site.

After checking with my host, scanning Time Machine and scanning for any duplicate or legacy stuff I might’ve forgotten on MAMP, I only came up with a handful of images.

The point is, recovering what’s missing does not interest me. The images would have to be recreated and frankly, most of my older entries probably don’t have much relevancy at this point anyway so I’m calling the game.

I’m working on a “reclass” of this site anyway – a major shift away from blogging as it’s currently known. A big chunk of old posts have been purged. Only a select number of posts remain now for posterity.

Use Whitespace to your advantage

Space and proximity are very important in any form of visual communication. Without them, you just have clutter. All the care you put into creating a color scheme, typographic treatments and custom graphics won’t get more than a glance unless it can be processed. Elements with room to breathe are easier to identify, read and often give weight to their importance. Andrew Bradshaw, who has done some amazing work for Christian organizations, employs this tactic on his portfolio site. Liberal use of space and carefully balanced elements give the site a very clean appeal.

More examples with good use of whitespace and proximity:

• Oaktree Creative | Pixel Umbrella | Tunnel7

Emphasize with typography

Elements that appear larger than their surrounding counterparts stand out. Take a look at Envato’s AppStorm. They use big bold titles (supported by a subtle horizontal rule and much smaller meta data) to separate and call attention to individual articles. A brief but sizable main navigation is also prominently displayed and by keeping that simple, they’ve guided the choice visitors can initially make – but without removing any options they know people will be looking for.

More examples of this technique:

• Pixelcraft | Chama Inc. | Big Spaceship

Don’t be afraid of color

Bold or bright colors can signal importance and/or effectively set things apart, as demonstrated by Wufoo. Yes, the whole site is a feast of color but selective use of it to encase the finer points of their product indeed draws the eye and there’s no question about what you can do there. Such heavy use of color can be risky, but in many cases it’s the perfect compliment to the material being featured. Particularly in this instance, people definitely remember Wufoo by its vibrant colors.

More examples of attention-getting color in design:

• Chris Spooner | Cork’d | Silverback

Add texture or light (or both!)

Texture and light are two timeless ways to create interest in a design. Texture can signify drama, whimsy, tranquility, age… the possibilities are limitless. Light (or shadow) can add depth, create a specific mood or bring meaning to an element, as seen on Pixelight Creative. The lighting (combined with a pixelated background texture) not only illuminates the logo, but actually symbolize it.

More cool examples of light and texture

• Matt Dempsey | Junaid Hanif | Mike Precious
  

Use Geometry

Geometric shapes, lines or patterns (especially those with dramatic tones) can also give elements a distinction. Blogger and Woo Themes co-founder Adii exemplifies this on his personal site. He used dark, contrasting lines to spotlight his brand, the self-proclaimed rockstar persona. The position and directional flow of the lines also effectively lead the users’ eye on down toward the content.

More examples of geometry for emphasis or movement:

• 31Three | Mozilla.com | Line25

Iconography does wonders

Icons are to web design what garnishes are to tropical drinks. Imagine this design without them. Such a dark style would be rather lifeless without some kind of imagery. But with the right selection and placement of icons against the dark background, GoodBarry was able to highlight the features of their product while enhancing the design.

More examples of clever iconography:

• Vimeo | Coda | EventBox

Examine the overall composition

Sometimes a site can be quite engaging just because of the way information is organized and presented. One of the most attractive and unique examples I’ve seen recently that can illustrate my point is Squared Eye. The design utilizes almost every aspect covered in this article (barring icons). It’s colorful and fun, well spaced and balanced, has a terrific sense of typography and even incorporates very subtle patterns and lines for separation/emphasis. As designers we sometimes focus so intently on the details that we forget to look at the bigger picture we’re painting. Stepping back to examine your layout and whether elements are appropriately relating to one another can ensure your design gets the attention it deserves.

In Conclusion

A design must strive to accomplish two things: 1) funnel visitors toward what they want and 2) promote the site’s goals (hopefully without impeding the former). Every color, image and body of text should have a purpose and work together to form a cohesive unit… a basic concept. Remember, people come to you for a reason. Consideration of what your objective is vs. what their expectations are will help guide your design decisions, and any of the techniques above can be used to effectively communicate what you have to offer.

AI – Information Architects

iA - Information Architects

Sofa – design, interfaces and software

Sofa - Design Interfaces and Software

i love typography – typographic inspiration

i love typography

Checkout – Get a Mac. Start a store.

Checkout

p41 Studios – human centered design

P41 Studios

live.squarespace – the Squarespace team blog

Squarespace Team Blog

Garrett Dimon – designer/developer

Garrett Dimon

44Forks – From etiquette to Netiquette

44 forks

Andy Rutledge – design strategist

Andy Rutledge

Mark Boulton Design

Mark Boulton Design

The Netsetter – startups web business

The Netsetter

Konigi – user experience design

Konigi

Midmo Web Design

Midmo Design

Rodrigo Galindez – designer/author

Rodrigo Galindez

Outspoken Media – SEO, marketing and consulting

Outspoken Media

Warpspire – web design and code geekery

Warpspire

Jon Tan – creative director, Omniti

Jon Tan

Omniti – web design and development

Omniti

Phil Coffman – art director/photographer

Phil Coffman

Monday by Noon – front end developer

Monday by Noon

Chris J Davis – designer/developer

Chris J Davis

Hivelogic – lead a simpler, more mindful life

Hive Logic

Artypapers – web apps and design

Artypapers

Max Voltar – freelance interface designer

Max Voltar

Habari Project – next generation blogging

Habari Project

5thirtyone – personal blog of Derek Punsalan

5thirtyone

Upstart Blogger – guide to creating, maintaining and profiting from a blog

Upstart Blogger

Boxes and Arrows – graphic design and information architecture

Boxes and Arrows

The Grid System – the ultimate resource in grid systems

The Grid System

Additional Resources

Hungry for more? These gallery sites focus entirely on minimalist design:

• Minimal Sites
• Minimal Showcase
• Site Inspire

These artists elsewhere:

• Coldplay | @coldplay | last.fm
• Greg Laswell |@greglaswell | last.fm
• Snow Patrol | last.fm
• Sheryl Crow | @sherylcrow | last.fm
• Joe Purdy | @joepurdyrecords | last.fm
• Counting Crows | @countingcrows | last.fm
• Van Morrison | last.fm
• Ryan Adams | last.fm
• Ray Lamontagne | @raylamontagne | last.fm

There are so many others I could list. It’s hard to pick favorites because I have so many. Do we have similar musical interests? See me on last.fm! Feel free to add your favorite artist or album below. You might also want to check out Danny Outlaw’s music of design.

CSS Branding

WordPress themers already know that labeling the top of a style sheet and providing a screen shot is the only way to know which theme is which when viewing them from the Presentation tab. But you don’t need to be running WordPress to know it helps immensely with keeping things organized (especially if you use multiple sheets for one website). Giving each sheet a name, description, URL (and a version number in some cases) is a good practice to get into.
/* Name: Client Site X
Theme URL: http://example.com
Description: 2 column, green, blue & white, fixed-width layout
Version: 1.0
Author: Charity Ondriezek
Author URL: http://designadaptations.com */

Grouping colors

I can never remember the hexadecimal codes for the associated colors I use on a design (or vice versa), so making a change to one is a pain unless I document my color scheme. Rather than copy/paste the hex number into a color picker to see for sure what color it is (or if it’s the right one), why not take the guess-work out and group all your colors together? I usually add something like this at the bottom of my style sheets. Then with a simple shortcut (cmd+end), I can go to the end of the page and grab the color I want immediately.
/* -------- COLORS ---------
dk red: #6f2422
lightest blue: #dbe9f4
lt blue: #acc5ef
mid blue: #3b5b81
dk blue: #091B2F
darkest blue: 0b1d32
--------------------------*/

Don’t forget the small stuff

I tend to keep elements chunked together based on their location within the layout as users see it. So all header styles are together under the label HEADER, and all sidebar styles are under the SIDEBAR label, etc. But it’s important to add comments for little things too, like what a certain style “does”. This helps a lot when working with a string of selectors, as sometimes seen in the Comments styling of a typical WordPress blog.
/* visual distinction for author comments */
ol.commentlist li.author{background:#fff; color:#333;}
/* visual distinction for alternating comments */
ol.commentlist li.alt {background:#333; color:#fff;}

Scanning with Find & Replace

Ok so this doesn’t actually apply to coding, but it’s where commenting really pays off. Whether you use a full-blown development tool like Dreamweaver, or something lighter and simpler like CSS Edit or Style Master, the ‘Find & Replace’ feature in these apps is probably the single most important time-saver (particularly if your CSS is complicated).

Need to change one color throughout the page (or the site)? Using the color grouping tip, copy the hex you need to switch out and enter it into the ‘Find’ input box. Enter the new hex code into the ‘Replace’ input. Select the search criteria and click ‘Replace All’.

Or let’s say you want to skip to a section quickly to make some edits. Search using just ‘Find’ and it’ll take you to the first result in the list (your comment). Using the tip above as an example, you could refine this even more to search for a keyword or string, such as “author comments”.

If your CSS is separated, indented and/or commented intelligibly, it’s easy to scan through a document to find what you need even without Find & Replace, but I can’t go a day without it. ;) What about you? Got any (regular or quirky) CSS habits that increase your productivity? Is there a feature of your favorite editor you find yourself using over and over?

For example, aside from using names such as #header, #sidebar or #footer to set up the basic framework of your design, try to avoid names like #left_column, #subfooter, or something vague like #secondary_right. The reason is because information appearing in those sections now, may not later.

Instead, select names which are relevant to the content they’re being assigned to, like #main_nav, #copyright, or #rss_info. This way, no matter where you decide to put, say, your navigation (whether it’s in the header or a sidebar), you only have to worry about modifying the actual styles in the CSS, and not the names in the markup. Of course you may still have to shuffle your HTML around some in a redesign, but for the sake of brevity we’re just talking style names.

Granted, this concept may not always be feasible, but the more you can minimize names which are given according to placement within the design rather than content relevancy, the better. If you’re one who likes to redesign/refresh often (like me), then employing a naming strategy which makes sense to you can save you a lot of dev/testing time in the future.

Use prominent comments

One of the things I’m in the habit of doing is beefing up comments for the main portions of a site, like this:
/* -------------------
CONTENT
---------------- */
Obvious comments can save you a lot of time searching and scrolling during development, and later if you need to make changes after your design is complete. It also helps to “map” your site’s layout, giving you clear indicators of what’s what.

For example, I comment the most prominent sections such as Wrap, Header, Navigation, Content, Sidebar, Search, Comments, and Footer¹. Anything else I usually group into Miscellaneous. Commenting my code in this way breaks up the CSS into easily identifiable blocks.

Give meaning to your structure

Every designer acquires a coding style which makes sense to him or her, but the technique I found most effective, is to organize blocks of CSS according to how the page renders. In other words, what section (or div) they fall under. This goes hand in hand with good commenting, and makes finding things a lot easier.

So for example, I’ll list basic HTML formatting rules for body, headings, anchors, paragraphs, images, etc., first. Then I’ll list styles for main sections, such as header, content, sidebar and so forth… down to the footer last. This way, if I have to modify something later, say in the comments section, I know to go directly to that block. Since the stylesheet “matches” the design, I don’t have to dig through my HTML first to get the div name for the item I want to change.

I’ve seen stylesheets where the code is grouped by element instead (all the titles together, all the lists, the links, etc). For me, that method makes it too easy to forget what belongs where. This is especially true if you have a complicated design, or often work on multiple sites.

Space out your syntax

A certain amount of “whitespace” is necessary to maintaining a usable style sheet. Good syntax may look something like this:
#content{
margin: 0;
padding: 0;
border:solid 1px #ccc;}

#content h2{
font-size:1.4em;}
Here the selector is on a line of its own, with each property/value pair indented, and on their own. This creates a nice readable format. Many people put the closing bracket on a separate line as well, but I prefer to bring the bracket up, then leave an empty line in its place. Sounds silly, but to me it just looks cleaner. I’m quirky that way. :)

Some designers prefer to skip this format in favor of putting everything on one line, and indenting inherited styles instead. While this does help to keep file size in check, I find it more difficult to scan through when looking for a specific declaration – particularly if the rule is lengthy. An example may look something like this:
#content{margin:0; padding:0; border:solid 1px #ccc;}
#content h2{font-size:1.4em;}
So, that’s it. I hope this tutorial at least gave you some ideas for organizing your styles in a way which makes them a little easier to work with. Do you have any useful (or quirky) CSS coding habits to share?

¹Referring to WordPress themes specifically.

• CSS Tweak – lets you check parameters for how much optimizing you want done. It has an upload or copy/paste feature, and it’s beautifully simple. Once optimized, you can either download the tweaked CSS, or copy/paste the new code from the box. I’m really picky about how my CSS is laid out with respect to spacing, but even without touching the line breaks, it optimizes nicely. I was able to see a difference of 13%. Removing the breaks it jumped to 23%.

• CSS Optimizer – does exactly what it says, and very well. You can optimize by URI, direct input or upload, but you have only one option – to keep line breaks or not. The output shows you before and after optimization amounts in KB and percentage. I was able to optimize by 14.61%, keeping my spacing intact. If I removed the line breaks it was 26.41%!

Keep in mind if you opt to have spacing removed by either of these tools – they REALLY crunch your code. Everything is tightened up to the point where it looks like one giant paragraph! Yikes. Too much for me, but if you don’t care go for it. :) I suggest keeping a backup with all your line breaks in place, so making edits later won’t be such a headache, then re-optimize when you’re ready to upload the changes.

• Speed Analyzer – is a favelet you can toss into your bookmarks, and use for testing an entire page. It includes analysis on CSS, images, scripts, objects and HTML, and gives you color-coded indicators about the results, each with additional info about page load time and external file sizes, and what to do about it. Very useful. If you’re running WordPress with any plugins, however, it’s bound to throw out some script warnings. Even if you’re just running a couple of simple stat scripts, it’s going to flag them. Good tool overall though.

As an alternative to the first two utilities listed, you can compress your CSS using Gzip. Granted, this isn’t available as an online tool, but if you thought 26% was good (I did), you might be surprised to learn you can reduce your file size up to 80% by compressing and serving your CSS as PHP. If you’re raising an eyebrow right now, Fiftyfoureleven.com explains it much better than I ever could.

It’s amazing actually, the differences in the way people approach the task of structuring their CSS. After a while, you begin to get a sense of who really knows what they’re doing, and who has a good grasp, but needs a nudge in the right direction. On that note, I’d like to share with you a few things I’ve learned, which help me stay consistent when working with CSS. I’ll start with some optimization tips, and move on to cover ideas for organization (in Part II). Stay tuned. :)

Ditch that measurement

From time to time, I see themes which have a measurement attached to values of zero in the stylesheet. For example:
margin:0px;
It’s actually unnecessary, as no measurement can really be attached to zero, because well, it’s zero! This may seem insignificant, but if you have an extensive stylesheet, shaving the pixels/ems/percentages (or whatever measurement you choose) off your declarations with zero values can save precious bytes when it comes to file size.

Work the cascade

You may have heard of the terms divitis (or classitis), and it’s a poor coding habit that befalls many beginners. Along that vein, I’ve seen several themes where styles were added via extra divs or classes, but the same effect the designer was trying for could’ve been accomplished just by using element declarations within the cascade.

The use of too many divs clutters up code, increases file size, and affects semantic markup in an adverse way. There are times when extra hooks just can’t be avoided, but whenever you can, try to use the natural cascade of your XHMTL documents. Here’s a brief example of an extra hook:
.title{color:#69c;}

< div id="content">
< h2 class="title">Title< /div>

Using the cascade, it would look like this:
#content h2{color:#69c;}

< div id="content">
< h2>Title< /div>

Though the class of title still carries meaning, it isn’t necessary. Using the cascade instead means lighter CSS, and lighter HTML. Fore more on the cascade, here’s an excellent article.

Keep it short

I love CSS shorthand. Not only because it reduces files size, but it’s less to type! Border, color, background, font, margin and padding styles can all be condensed into shorthand. Most seasoned designers are aware of this, but for you beginners, it’s definitely something to run with. So for example, rather than coding:
margin-top: 10px;margin-right: 2px;margin-bottom: 10px;

margin-left: 5px;
With shorthand, you can simply code:
margin: 10px 2px 10px 5px;
The order goes clockwise, but an easy way to remember is by using TRouBLe as an acronym of sorts – or Top, Right, Bottom, Left. Shorthand can even be taken a step further if you have repeating values. So if you want a top and bottom margin of 10px, and a left and right margin of 5px, you can code:
margin: 10px 5px;
If your margin on all sides is 10px, simplify it even more with:
margin: 10px;
Cool huh? Ok you get the idea now.

Go global

Another well known and yet underused tactic for swiftly setting page styles is by using a global selector. You can “zero out” any default browser settings for margin and padding, which will inadvertently affect your design, with one simple rule:
*{margin: 0; padding: 0;}
This global rule seriously reduces code bloat by saving you from repeating margin/padding settings all the way down the cascade. The asterisk functions as a wildcard, and any declarations set forth under it will be applied to everything, so be careful adding anything to this. ;)

That concludes Part I of this tutorial series. If you enjoyed this article feel free to comment with any optimization tips of your own, and I hope you’ll check back soon for Part II!

kuler

With tools like this, working more color into a design can be as simple as discovering a palette someone else created! Available online or as a desktop widget, kuler makes it fun to browse and create schemes. Start with a base color and build your palette from there within a sleek, smart UI. Changing your palette is only a matter of clicking a different base color or changing a rule. Scrubby sliders allow for infinite combinations, dependent only on your imagination.

kuler from Adobe Labs

ColorBlender

Blend to your heart’s content with this online palette creation tool. Automatically create a scheme of coordinating colors, or directly edit individual colors to make a palette of your own design. When you’re satisfied, easily export to Photoshop or Illustrator. You can also save blends to go back to later.

ColorCombos

This one has a neat feature where you can enter any URL and it retrieves the color scheme used by that site. For me, this find was a huge time-saver, because I had been using ColorZilla to pick colors manually from sites I thought had a nice scheme. It was painstakingly slow. (Note: the latest version o Colorzilla allows viewing and saving palettes found on a website via the DOM Color Analyzer.) ColorCombos also has a nice testing feature, where you can enter multiple hex codes to see how your colors work together in close proximity.

ColorJack

Offers a variety of color picking and palette suggestion tools. The Sphere section shows you a color wheel and palette suggestion of six colors. Make adjustments a wheel, sliders, or choosing from one of several formulas. The Studio offers palette suggestions of three or more coordinating colors. Everything can be adjusted using the available functions or by entering your own values. There’s also a Spin button, which loads a random color scheme. ColorJack also has export features.

ColorJack

ColorSchemer

Aside from selling software, ColorSchemer provides a gallery of user created palettes you can browse freely, along with a search feature where you can enter a hex code which returns any palette containing that color. This is great if you have a base color in mind, but you’re having trouble finding or matching colors. The gallery is also a good source if you just need a little nudge of inspiration. :)

As a sidenote, an ever-present source of inspiration for choosing a palette can be found in your very own photos. Here are some great examples of color schemes sampled directly from photos.