CSS Design

Building Web Pages the Right Way

When I began designing websites, my biggest concern was the finished product. I didn't care that the code was bloated as long as my site looked good in IE and Netscape. Tables, pixel shims, font tags -- nothing was off limits. Then I discovered XHTML and CSS. By embracing web standards, my productivity went way up and my clients' sites are now accessible by all.

Designers can no longer afford to simply design sites. We have to offer more to our clients or become obsolete. I hope this lens will educate readers about web standards, design techniques, SEO, web marketing and every other topic that is vital to embrace and understand.

Don't Code in HTML!

Read this before you open NotePad

It's important that you use XHTML to write "well-formed" documents that will work in all browsers. Below are some simple rules to follow to make sure your code is accessible by all.

Write your code in lowercase. Uppercase tags will not validate.
Close all tags. This includes non-empty elements (<p>, <strong>, etc.) and empty elements (<img />, <br />, etc.). Notice the empty elements are closed by adding " />" to the end of the element.
Properly nest your elements. Instead of writing sloppy code, take the time to close your elements in reverse order.
Validate your code: validator.w3.org
It's fast and easy.
Check your work in more than one browser. Most designers gave up on IE a long time ago, but close to 90% of the web-surfing public didn't. Don't ignore the browser you despise.

Amazon XHTML Titles

Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)

by: Dan Cederholm

Avg. Customer Rating:

Amazon Price: $29.91 (as of 01/08/2010)

Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

by: Dan Cederholm

Avg. Customer Rating:

Amazon Price: (as of 01/08/2010)

XHTML Black Book: A Complete Guide to Mastering XHTML

by: Steven Holzner

Avg. Customer Rating:

Amazon Price: (as of 01/08/2010)

Dump font face

Separate content from display using CSS

Allow your site's visitors to experience pages that load quickly the way you intended. Follow these simple rules to get started with style sheets.

Never use a font tag again. All fonts (and colors, backgrounds, borders, padding, etc.) should be defined in an external style sheet. This allows you to make changes to the appearance of your entire site by editing one document.
Forget using tables as a layout device. Tables are great for displaying tabular data, but they are woefully inadequate as a design tool. How many times have we all gotten lost in a never-ending maze of nested tables? Using divs and CSS positioning, designers have learned to blow the doors off old design limitations.
Just as we did with our XHTML, we need to validate our CSS: jigsaw.w3.org/css-validator/

CSS Texts

The Zen of CSS Design: Visual Enlightenment for the Web

by: Dave Shea, Molly E. Holzschlag

Avg. Customer Rating:

Amazon Price: $29.69 (as of 01/08/2010)

Stylin' with CSS: A Designer's Guide

by: Charles Wyke-Smith

Avg. Customer Rating:

Amazon Price: $25.54 (as of 01/08/2010)

Designing CSS Web Pages

by: Christopher Schmitt

Avg. Customer Rating:

Amazon Price: $29.99 (as of 01/08/2010)

Designing With Web Standards

by: Jeffrey Zeldman

Avg. Customer Rating:

Amazon Price: $27.54 (as of 01/08/2010)

Design Software

Can you imagine working without these titles?

Dreamweaver and Photoshop are a necessity for me. The latter was always an obvious choice, but I can't say the same for the former. I used to code all my sites using Notepad. Every link, every tag, every table cell was done from scratch -- it was my badge of honor. Then I got smart and bought Dreamweaver. My productivity went way up. You'll definitely make back the money you spend.

There will be sticker shock when you buy the suites, but you will get what you pay for. Buying just two of the products included in either of the suites will cost you more than if you went all in. For those wanting an all-in-one purchase, the Adobe/Macromedia Web Bundle is a designer's dream.

Adobe Creative Suite 4 Design Premium

Avg. Customer Rating:

Amazon Price: $1,645.00 (as of 01/08/2010)

Adobe Creative Suite 4 Design Premium Upgrade

Avg. Customer Rating:

Amazon Price: $588.99 (as of 01/08/2010)

Adobe Creative Suite 4 Master Collection

Avg. Customer Rating:

Amazon Price: $2,377.00 (as of 01/08/2010)

meyerweb.com

CSS guru

Fetching RSS feed... please stand by

Meyer's CSS Texts

No frills, just solutions

Eric Meyer on CSS: Mastering the Language of Web Design

by: Eric Meyer

Avg. Customer Rating:

Amazon Price: (as of 01/08/2010)

More Eric Meyer on CSS (Voices That Matter)

by: Eric Meyer

Avg. Customer Rating:

Amazon Price: $35.04 (as of 01/08/2010)

CSS Pocket Reference (Pocket Reference (O'Reilly))

by: Eric A Meyer

Avg. Customer Rating:

Amazon Price: $9.95 (as of 01/08/2010)

CSS Web Site Design Hands on Training

by: Eric Meyer

Avg. Customer Rating:

Amazon Price: $31.49 (as of 01/08/2010)

Choosing Colors

Looking for inspiration

I'm often asked by young designers how I choose colors. My response is usually "the client" (why do they always pick blue?). But selecting a palette can be a daunting task. It was actually easier when we were limited to 216 web-safe colors, but the results were often common and uninspired.

Now we have millions of colors from which to choose. With so many options, how do we come up with workable palettes? Setting aside the many online sources for a minute, inspiration can come from our everyday lives. Nature is a great place to start: trees in autumn can provide us with a warm color set; rose gardens offer brilliant reds, yellows and greens; sunsets have a variety of colors that change moment to moment. Paintings, prints and photographs should also stimulate your brain. Finally, inspiration can also come from the mundane; we simply need to open our eyes to see it.

As mentioned above, there are some great online resources to aid in your search for colors. Sites like ColorBlender and ColorSchemer Online allow you to manipulate hex values by moving RBG sliders or inputting values into appropriate fields. ColorSchemer also provides palettes supplied by readers and more advanced color selection tools available for download.

Finally, other websites can provide inspiration. Using the Firefox Colorzilla extension, we can find exact color values without taking a screen capture and opening Photoshop. Use these other sites as a source of inspiration, but don't copy another designer's work. At least change the hex values a little bit!

Amazon's Books on Color

Color Index: Over 1100 Color Combinations, CMYK and RGB Formulas, for Print and Web Media

by: Jim Krause

Avg. Customer Rating:

Amazon Price: $16.31 (as of 01/08/2010)

Web Color Expert: All That You Need to Create Fantastic Web Color (Web Expert)

by: Keith Martin

Avg. Customer Rating:

Amazon Price: (as of 01/08/2010)

Color Harmony for the Web: A Guide for Creating Great Color Schemes On-Line

by: Cailin Boyle

Avg. Customer Rating:

Amazon Price: (as of 01/08/2010)

Color Logic for Web Site Design (Color Voodoo #5)

by: Jill Morton

Avg. Customer Rating:

Amazon Price: $36.99 (as of 01/08/2010)

mezzoblue.com

Zen Garden creator Dave Shea

Fetching RSS feed... please stand by

Links

Just some of many I frequent

CSS Zen Garden: A demonstration of what can be accomplished visually through CSS-based design.
Eric Meyer: CSS guru.
Jeffrey Zeldman: Author of Designing with Web Standards and founder of A List Apart (see below).
A List Apart: A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.
mezzoblue.com: Home to Dave Shea, creator of the CSS Zen Garden.
lynda.com: I\'ve learned a lot from Lynda\'s books on html design and Photoshop. Her online library is a great tool for designers and developers alike.
World Wide Web Consortium: The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential.
W3 Schools: Fantastic (and free) online resource covering a wide range of web-related topics.

Zeldman's Headlines

Fetching RSS feed... please stand by

Zeldman's Books

Designing With Web Standards

by: Jeffrey Zeldman

Avg. Customer Rating:

Amazon Price: $27.54 (as of 01/08/2010)

Taking Your Talent to the Web: A Guide for the Transitioning Designer

by: Jeffrey Zeldman

Avg. Customer Rating:

Amazon Price: (as of 01/08/2010)

New YouTube vids

No videos were selected.

curated content from YouTube

CSS Tweets

barfsurfer Jan 8, 2010 @ 9:34 am

RT @jeffdonthemic: Need to do CSS modification for the #salesforce Customer Portal to match your web site? Check out this guide! http:// ...
CSSfaxien_com Jan 8, 2010 @ 9:34 am

La marque CSS deposée à l'INNORPI http://bit.ly/66KA84
SuMajestadJose Jan 8, 2010 @ 9:34 am

RT @smashingmag: Web Fonts Specimen: A Typographic CSS Framework - http://bit.ly/1u6moX
dmclark Jan 8, 2010 @ 9:33 am

Great tip! RT @Jennison: RT @awoods #webdesign #accessibility tip: in css, changing a:hover to a:hover, a:focus will help keyboard users
darthkitkat43 Jan 8, 2010 @ 9:31 am

@VaPoRWaNdZ >>> http://bit.ly/59rRj6 <<< thats my Blog 'Twitter Mimic " i designed it in CSS and some html codes =)
debmowry Jan 8, 2010 @ 9:31 am

Anybody out there can recommend some good 1-3 day workshops for web programming close to Charlotte? Not HTML/CSS but more PHP or the like.
webdep Jan 8, 2010 @ 9:31 am

CSSとjQueryで作るカラフルなアナログ時計: Flashを使わずにアナログ時計を作りたい。そんなときにおすすめなのが、『A Colorfu...続きはこちら http://bit.ly/7ysEhy
DanFreund Jan 8, 2010 @ 9:30 am

CSS work today. Looking for some php and video editing co-workers. Work with me one day a week and we'll pull ahead of the curve in 2010.
nopavlina Jan 8, 2010 @ 9:30 am

If I need a CSS tutorial, I’ll search on CSS tutorial.
alkotdesign Jan 8, 2010 @ 9:30 am

@djonssondesign no worries, i saw it next to my site on http://www.css-design-yorkshire.com/ :)

automatically generated by Twitter

Have Anything to Add?

submit

Reply

joshuabrown joshuabrown Oct 14, 2009 @ 4:45 pm | in reply to goldenecho

The line break tag closes immediately -- <br />

Tags that don't wrap other content simply need a forward slash before the close bracket.

Reply

RealNerd RealNerd Nov 12, 2009 @ 2:23 pm

Great example, thanks!

Reply

goldenecho goldenecho Oct 9, 2009 @ 4:08 pm

I don't understand the whole closing a BR tag. Where does it close? Immediately? After the content? HUH? It was so simple when no closing tag was required, and I really wish THAT was the standard because it would make so much more sense. But alas, I don't make the rules.

Reply

Marc_Sandford Marc_Sandford Apr 20, 2009 @ 11:47 am

Very useful. I just book marked your lens. This is exactly the sort of info I need. I'm slowly picking up CSS, mostly for changing the look of my wordpress blogs. Many wordpress themes aren't very flexible, so it helps to know how to code.