Remember to comment on this week’s post if you want a chance to win prizes. Seth Godin’s DVD set worth $800 is up for grabs!

• Should you sign your blog comments? Or is it redundant?
• “A Small Sheik Escaped” and other Editing Exercises to Energize Your Writing
• 7 Essential Ways to Build Trust in Your Business: I think great service goes a long way. Usually those who care about their customers also do good work.
• Blogger Relations: I don’t need a new best friend.
• Writing the Farewell Symphony: Though I took a break from blogging, I still had to manage the prizes and intros. But what would happen if this place went silent for two weeks?
• The Future of the Future: Good-bye knowledge worker… Hello, knowledge entrepreneur [Link: My sister]
• A Guide to CSS Support in Email: Still difficult to make all email clients happy.
• Newsmap: Visually captures the Google News news aggregator in a treemap.

And for fun because we’re allowed…

• Ordinary Online Store… Or is it…? (other than not being in English)
• Mind Bluff: Optical illusions, mind games, puzzles, brain teasers, etc.
• 10 Funniest Apple-Ad Parodies
• Office OFFline Web Comic: Funny!

In the last few years, books on CSS have crowded the book shelves as designers clamored to better understand how to use the mighty tool that blew away tables. This, however, isn’t just another book on CSS its syntax, and positioning. Professional CSS uses real Web sites to show how the designer did the work and why the designer took the specific steps or approach with the design. One hundred people can build the same site, but do it 100 different ways. Certain methods work better than others and the authors back up their decisions with clear explanations.

Get the inside story on Blogger’s rounded corners and rollovers; FastCompany.com’s three-column layout; strategies for style switching; the process of revamping the giant ESPN.com site from tables to CSS; the evolution of The University of Florida’s site as many sites realistically evolve throughout the years, and a look at the structure of The PGA Championship Web site. Then the book ties it all together using Christopher Schmitt’s personal site as the closing chapter.

Don’t expect start-to-finish walkthroughs and how-tos for the sites. This would take more than a book to do. The authors pick a few areas and hone in on them. The book as a whole should be enough to give readers an idea of how to work through a site from the beginning to the end. An intermediate or experienced designer can take her skills and knowledge to another level thanks to the thorough and clear explanations accompanying them.

The first two chapters are different animals from the rest of the book. Chapter 1 is The Planning and Development of Your Site and Chapter 2 covers Best Practices for XHTML and CSS. Some people might find them a waste, while others might appreciate them. These two topics are better covered in the later chapters, as they look at the planning of real sites rather than dealing with theories.

For instance, one chapter looks at how the decision to convert ESPN.com to a CSS-based site came about. Additionally, the author describes how the three content modes (regular, skirmish, and war) are managed on the front page depending on the importance of the headline. ‘Regular’ mode describes basic news items — like who won the game, who got traded, and an update on a strike. ‘Skirmish’ typically reports on record breaking events while ‘War’ is the Boston Red Sox winning the World Series. This is planning and strategy. Because the information is tied with to a real scenario, readers are more apt to come up with ways to adapt the concepts for their own sites.

The XHTML and CSS best practices chapter is more about the rules than about the best ways of doing things. Closing empty elements like the line break with a slash on the end like this <br /> is a rule example. Creating left-side menus using list items instead of line breaks is a best practice. The chapter focuses on the former.

The book closes with four helpful appendices. Troubleshooting CSS is the most useful. It has tips on how to find where the CSS “bugs” are — much like troubleshooting code. It also contains other resources where readers can go for help. This section is only a few pages long, but packs lot of useful information in a small space.

Reading about the processes and techniques used in these projects taps into a collective of some of the best designers. The reader is a “fly on the wall” listening to the authors describe how they work — offering advice along the way that can be used in the reader’s projects. Expect a few “ah ha” moments in which you suddenly find a better way to approach a challenge. After all, five heads are better than one.

With five authors, some might wonder about the different writing styles. Since every chapter covers a different Web site, readers will find themselves more interested in the process and less affected by the differences in writing style. Intermediate and expert designers will find this solid book complements their other CSS resources nicely.

Title: Professional CSS: Cascading Style Sheets for Web Design
Author: Christopher Schmitt, Mark Trammell, Ethan Marcotte, Todd Dominey, Dunstan Orchard
Publisher: WROX
ISBN: 0764588338
Date: July 2005
Format: Paperback
Pages: 434
Cover Price: USD: $39.99 Amazon: $26.39

Quickly: if you or anyone you know is familiar with WEP, WAP, IPSEC, please help. Email me if you know of experts and I’ll contact them. Thanks.

I’ve been so busy lately that as soon as I remember to do something, I forget. For the past couple of weeks, I wanted to write the meryl’s notes newsletter for June. It looks like I’m going to miss it as there’s no chance I’ll get it done and distributed today. Since the newsletter is informal, I didn’t want to kill myself to get it done when I have two others to distribute and a third in the making. Heck, I didn’t have time to write my daughter, who is at camp, an email yesterday (first time I’ve missed since she’s been gone).

Been getting to know Coldfusion (cfm). Am having a blast. I use the concepts I learned to create dynamic pages in PHP. It’s tricky since PHP and CFM are different, so when I find a problem in the code, I can’t use PHP as guidance. Databases don’t come to me naturally. It’s weird because I love geeky stuff and software, but my brain isn’t wired for it. But I did get the database working with Coldfusion and have other ideas for other projects. I’ll report on how I do things in cfm soon.

Reading Why I Deleted Email Interviews inspired my newest article, Why I Am Stuck Doing E-mail Interviews. Donna’s article is excellent and that’s why I was motivated to write my perspective. I try to educate people on the idiosyncrasies of leading life as a person who is deaf at Bionic Ear Blog. In fact, doing this blog helped me discover things about me that my hearing loss impacted. I grew up with an “I can do anything except talk on the phone without the relay” attitude. Now, I’m older and wiser and accept that’s not the case.
(more…)

This book is for CSS haters, people frustrated with CSS, and those making the transition to CSS-based design. I fall under the frustrated crowd. My site has been using CSS for a few years now and yet, I still waste a full day trying to get something to look right. Other resources are better served for those who haven’t touched an inkling of CSS. Once you have basic grounding in CSS, then come back to this one.

While reading the book, I wipe away my history with CSS so I can see it from it perspective of a person new or relatively new to CSS. Based on the title, it’s true you don’t have to read the book from front to back; however, it flows well so it is possible to read it cover-to-cover.

The introduction indicates the book is not a tutorial. The first chapter uses a different format from the rest of the book and provides a CSS refresher. The chapter is also useful for getting your CSS vocabulary straight with its describing CSS selectors, tag selectors, pseudo-class selectors, and class selectors.

Every item in the book begins with “How do I…?” with the solution following. Tips, important notes, and warnings are sprinkled throughout the chapters. The book’s layout is friendly for scanning and finding what you need. Screen shots and sample code support the content to help those who appreciate visual aids.

A good way to use the book is while you’re working on a site and you get stuck. For instance, you’re working on a form. In the old days, many of us used two-column tables to organize the form. You want to do the same thing with CSS. Here you would refer to Chapter 6: Forms and User Interfaces and check out “How do I lay out a two-column form using CSS instead of a table?” Or use the index to look up “forms” and underneath is “two-column forms.”

While my background gives you the impression that I expect sites to follow Web standards 100 percent, I actually don’t. Mega-sites like ESPN and ABC News would fail standards validation, but I give them much credit because they’re massive and dynamic. So in Chapter 9, Andrew shows how to do scrollbars and rounded corners, which only work in Internet Explorer and Mozilla respectively. No harm comes to anyone who can’t see one or the other.

Andrew also helps you create CSS drop-down menus, something I don’t encourage because it’s problematic in many ways. Even so, I’ve written articles showing how to do this because it’s a foundation for designing with advanced CSS techniques and helps you become more comfortable with CSS.

The first four chapters are available at no cost as a PDF file. To get the chapters, you will have to give up an email address. That’s generous considering there are nine chapters in the book. Plus, the site has the codes from the book for downloading. What about the rest? Yes, it’s worth it because the later chapters cover forms, CSS positioning (a biggie especially for designers struggling to drop the table habit), and techniques such as creating rounded corners with CSS that works across browsers.

The announcement of IE 7 coming out late this year will have little impact on the book except in the areas covering browser-specific issues. It depends on what Microsoft does with the new version of IE. I suspect Andrew will release a new edition when the time is right. Meanwhile, right now is a great time to get this handy book.

If you order the book from SitePoint, you get a $9.95 CSS Reference Poster free of charge.

Title: The CSS Anthology: 101 Essential Tips, Tricks, and Hacks
Author: Rachel Andrew
Publisher: SitePoint
ISBN: 0957921888
Date: November 2004
Format: Paperback
Pages: 376
Cover Price (of course, you won’t pay these prices. They’ll be discounted): US: 39.95
CDN: 57.95
UK: 20.79

If you’re not familiar with O’Reilly’s cookbook series (image of layout), they’re books with a basic formula: Problem, Solution, and Discussion sections for every ‘recipe.’ Each recipe is a script, program, command, or piece of code for implementing within a large part of a whole.

Simple example, you’re creating a Web site and you need to add a form. You can look up a recipe for creating just the form. In CSS Cookbook, get recipes for using CSS to create pull quotes, to add a background image, to build various types of layouts, and to manage forms.

This book is for those who know HTML and have a basic understanding of CSS. Like any food cookbook, the recipes are there when you’re ready for them. It’s not for reading from cover to cover. When you get stuck on a problem or want to know how to create a printer-friendly page, refer to the recipe.

The main issue with the book is its use of tables in some of the recipes. With the growing number of Web sites moving towards Web standards compliance, tables are finally going away as a layout tool. Their only purpose is for organizing data.

Don’t expect recipes on fly-out or drop down menus. This is not a bad thing as CSS is not the ideal way to create such menus as there are many problems with implementing them. However, the book could use more recipes as others in the Cookbook series have 400, 500, and even 700 pages. This one is just 270 pages.

Schmitt does an excellent job of explaining each problem and solution with his minimal jargon and easy writing style. The table of contents provides the list of the types of problems covered in this book. If these are things you wish to implement, then you’ll be happy with the purchase.

Title: CSS Cookbook
Author: Christopher Schmitt
Publisher: O’Reilly
ISBN: 0596005768
Date: August 2004
Format: Paperback
Pages: 270
Cover Price (of course, you won’t pay these prices – they’re the original cover prices and they’ve been discounted):
US: $34.95
CDN: $50.95
UK: £28.50

Take out your designer’s scapel and prepare to give forms an extreme makeover without <tables>. Slight exaggeration, but adding a splash of color and changing the layout dramatically changes a room and the same concept applies to forms. The form code is also accessible. Note the <label for>, <id>, and <name> tags. See Quirksmode for an excellent explanation of name vs. id.

Read the tutorial.

Have you recently converted your Web site to rely on CSS (Cascading Style Sheets)? Did you take over someone else’s job after they left the company? Do you want to know what others have done on their Web site without having to crawl through the "View Source?" All you need is a modern browser and a text editor to make use of a powerful tool that will make you wonder why you never thought of it before.

Creating your own user style sheets gives you the ability to:

• find legacy markup
• understand how a Web site is laid out
• ensure the site is accessible for people with disabilities
• conduct fast usability testing

Before you create your own CSS files to use for testing, let’s review the CSS rules. When on a typical Web site using the normal CSS rules, the Web site author’s CSS rules take precedence over the user’s styles. However, if you add “!important” to your CSS sheets, they will override the author’s CSS.

One of the more common legacy markups is the use of FONT around the content throughout the Web page. It’s the first thing most Web designers replace with CSS. Even using FIND / REPLACE, it’s possible to overlook some leftover FONT tags within the HTML document. To test for remaining FONT tags, create a short CSS file in a text editor as follows or download the files and bookmarklets:

font, font * {
font-weight: bold !important;
background: red !important;
color: yellow !important;
padding: 0.25em !important
}

The * (asterisk) indicates a selection of all elements that descend from a font element. If the author has wrapped font around a link, this rule will select it. Save the file as “font.css” without the quotation marks. Be sure to use “!important” after each element to ensure it overrides the Web site’s CSS markup. See a screenshot.

In Internet Explorer, go to TOOLS > INTERNET OPTIONS > ACCESSIBILITY > Click the box beneath USER STYLE SHEET to “format documents using my style sheet” and use BROWSE to find the font.css file you just created. Netscape 6+ requires you have a user profile set up in advance.

Enter your Web site or other URL to test out the font.css file. Whenever you see RED highlights with yellow text, it indicates the text is marked up with the <FONT> tag. If the text is highlighted in red with yellow text, this is a link that has the <FONT> tag.

To test to see how the tags balance, put a border on everything. Create another style sheet with the following:

* {
border: 1px solid red !important;
padding: 0.5em !important;
margin: 0.5em !important
}

Save the file and select it as the user style sheet. Enter the URL and see all the solid red lines, which indicate the elements within the page.

One of the most valuable tools for making images accessible to users with sight impairments is the use of ALT within the <IMG> tag. Use CSS to help you identify images that have ALT text. Create and save another file using the following:

img {
visibility: hidden !important;
}
img[alt] {
visibility: visible !important;
}
img[alt=""] {
visibility: hidden !important;
}

This will hide images that have the ALT text included in the source code. However, it will only work in Mozilla and derivatives (such as Netscape). Explorer doesn’t yet support attribute selectors so the ALT-hider will fail, but you can utilize other attributes to identify image-related issues. It’s also a way to see how users who have graphics turned off view your page. Instead of using HIDDEN / VISIBLE, change the CSS to use borders or other color items to identify the images.

CSS can help you identify JavaScript code to see how well your Web page works for users who have JavaScript turned off. If you use banner ads, you may want to test your page by hiding the banner because users often ignore such ads. Change the height and width of your page to see how it would view on a handheld device or WebTV. These are just a few of the many ways to use CSS to test, find tags, or view page layout.

After creating the various CSS test files, save them for later use. CSS makes it effortless to change colors, visibility, and sizes of everything on a page. Unleash the quick, cheap, and easy power of CSS whenever you’re ready to make the leap from HTML to XHTML compliance, redesign your pages with CSS or other tools, ensure accessibility for all visitors, or conduct usability testing.

Thanks to Eric Meyer for introducing this amazing tool and helping with the article.

The CSS test files help you destruct a Web site, whether it be for finding leftover <font> tags or for seeing how a Web site has been constructed. For details on how to use these files, refer to the Blast Sites with User CSS Sheets article.

Depending on which browser you’re using, you may have to right-mouse click onto the file to save it or click on the file and save it.

Update: Bookmarklets available from Traumwind. Thanks much.

• ALT text in images
• Anchors
• Banners
• Borders
• Divs
• Fonts
• Font sizes (H tags, Big, Small)
• Forms
• Images
• JavaScript
• Links
• Readability
• Screen sizes (PDAs)
• Spacers
• Tables
• Text
• Wash out images

Designing and maintaining Web pages takes a lot of time, but using CSS can save considerable time. If you want to change the font color on all your Web pages, then all you have to do is go to the external CSS file and change it in one place as opposed to going to every HTML page and changing it in the FONT tag.

CSS is not without its drawbacks. Netscape 4.x and other CSS incompatible browsers are still heavily used today and don’t properly display CSS. Furthermore, the growth of wireless devices connected to the Internet makes it a greater challenge.

To overcome the browser challenges, start by determining which browser to use as the baseline. The decision largely depends on your audience. If you have an existing Web site, study its statistics to determine whether or not you want to reach the Netscape 4.x audience. Makiko Itoh of PRODOK.com states that there are three approaches you can consider:

• Make Netscape 4.x the baseline browser – this approach is the most challenging because of the workarounds needed to make it look identical in 4.x.
• Make Internet Explorer 5.0 the baseline browser – This method makes the presentation plain for the Netscape 4.x audience.
• Compromise – Looks best in Netscape 6.x, Explorer 5.5 and higher, and looks satisfactory in Netscape 4.x.

Begin by creating streamlined HTML markup that is well formed and avoids all styling tags such as <FONT>, <CENTER>, and other deprecated tags. See Itoh’s example of a barebones HTML document.

Make sure you have the <DOCTYPE> line at the top of your document. If your document is not completely valid, use the Transitional DOCTYPE or no DOCTYPE.

DOCTYPE examples:

• Strict HTML 4.01: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html3/strict.dtd”>
• Transitional HTML 4.01: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd”>
• Strict XHTML 1.0: <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “DTD/xhtml1-strict.dtd”>
• Transitional XHTML 1.0: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>

Make sure you use closing tags even for <P> and list items. Two HTML elements without closing tags are <BR> and <IMG>. Be aware that XHTML does close them.

Validate the barebones markup using the W3C.org validators and HTML Tidy.

After you confirm that your HTML is clean and has closed tags, you’re ready to add CSS. Let’s review a sample line:

p {font-family: verdana, helvetica, times;}

The p represents the selector or <P> tag. Font-family is the property and must follow : along with the value(s). In this example, anytime <p> comes up in the HTML document, the content appears with the verdana font. If the computer doesn’t have verdana font loaded, then the content will use the second choice of Helvetica.

Unless the user has overridden all author styles with a personal stylesheet, the user should see the entire page in verdana.

For purposes of this article, we’ll add <STYLE> right above the closing </HEAD> section of your HTML file. Everything between /* */ are comments to help you understand what is happening.

<style media=”screen” type=”text/css”>
<!–

/* The next lines tell the browser to render anything in the <p> tag with a font size of 11 pixels and a line height (space between lines of 18 pixels
*/

p {
font-size: 11px;
line-height: 18px;
}

/* The next lines tell the browser to render anything in the <h2> tag with a font size of 15 pixels
*/

h2 {
font-size: 15px;
}

/* The next lines tell the browser to render anything in the <body>, <p>, and <h2> tags with a verdana,helvetica,arial,sans-serif font in that order. If the computer doesn’t have verdana, then the next choice is Helvetica.
*/

body,p,h2 {
font-family: verdana,helvetica,arial,sans-serif;
}
–>
</style>

Using <!– and –> tags will hide the CSS from older browsers that can’t render CSS. Save the HTML file and take a look at Itoh’s example. Congratulations, you’ve successfully added CSS to your HTML document.

If you decide that you want the <p> font size to be smaller or larger, all you have to do is change the number of pixels as follows:

p {
font-size: 10px;
line-height: 18px;
}

No more having to go through the entire document and changing the numbers in all the <FONT> tags. Expand your <STYLE> to add color and links. The BOLD items are additions to the original <STYLE> in the previous example.

p {
font-size: 11px;
line-height: 18px;
color: #eeeeee;
}

h2 {
font-size: 15px;
color: #fc0;
}

b,em {
color: #fc0;
}

body,p,h2 {
font-family: verdana,helvetica,arial,sans-serif;
}

body {
background-color: #000000;
color: #eeeeee;
}

/* a:visited are links that your visitors have visited.
*/

a:visited {
text-decoration: none;
color: #ffff99;
background-color: black;
}

/* a:link impacts all links on the page
*/

a:link {
text-decoration: underline;
color: #ff9900;
background-color: black;
}
/* a:hover changes the link when your visitor has the cursor over the link. This does not work in Netscape 4.x
*/

a:hover {
color: black;
background-color: #ffff99;
}

Making the above changes to your <STYLE> should look similar to this example. Feel free to play with the colors, sizes, and font values to see what happens to the document.

CSS offers many more options and makes it easy to change your document styles especially when using an external style sheet. If you link all your documents to one external CSS file, then you can make changes to styles in all of the documents just by modifying the values in the CSS file. The steps outlined in this article are unleashing a little bit of the power of CSS. It can go far beyond and control layouts and other design enhancing features in the latest browsers.