Heading Style Gallery


Whenever I'm doing a site with a lot of plain text content, I try to do some styling of the headings (h1,h2,...) to give it more visual appeal. Then it becomes "OK, what to do Image6.png
different that I haven't done before?" It would be nice to have a gallery to get ideas from.

After seeing Chris Heilmann's excellent CSS Table Gallery, I thought it would be nice to have a similar gallery of simple heading styling. So, I've created a Heading Style Gallery containing simple styling of headings using only CSS. The site allows user submission of a styling which is immediately loaded on the site. The submission allows for uploaded background images, and gives the submitter a chance to tweak the style afterwards.

Styling an FAQ


Almost every site has some kind of FAQ page and it seems everyone does it a little differently. I've done about a half-dozen variations over the years and had designed one a few years ago using a table with a graphic for the Q and A letters. I liked the look, but wanted to get away from the tables.

After a few experimentations, I've come up with one I like using CSS for all styling and clean HTML code. It retains the large colorful Q and A letters, plus a background color for the questions. See a sample page using this method.

faq.gif

The CSS code for this:

.question {
font-weight: bold;
background-color: #ded;
padding: 0 0 .1em 0;
margin-bottom: 0;
margin-left: 1.5em;
}
.answer {
margin-top: 0;
margin-left: 1.5em;
}
.question span {
background-color: #fff;
padding: .2em .5em .2em .2em;
font-size: 150%;
color: #f00;
margin-left: -1.5em;
}
.answer span {
font-weight: bold;
padding: 0 .5em 0 .2em;
font-size: 150%;
color: #008000;
margin-left: -1.5em;
}

And the HTML:

<p class="question"><span>Q</span>How?</p>
<p class="answer"><span>A</span>This</p>

Zen of CSS


zen.jpgI just finished the new book from Dave Shea and Molly Holzschlag, The Zen of CSS Design. This book uses examples from the CSS Zen Garden site as the source for discussions on how to create beautiful CSS-based Web sites. My initial scan of the book had me thinking it was a deconstruction of 35 of the designs. And while a chapter does deconstruct six of the designs, the remainder of the book is a look at modern topics on CSS design and uses some of the designs as a sort of starting point. This book is more than just analysis of the Zen designs, it is a good reference and idea generator for web designers using CSS for creating web sites. I strongly recommend it.

SXSW 2005


Just returned from my first SXSW conference in Austin. A few highlights/lowlights:


  • Had to put up with a lingering cold. Four to five times a day I'd get into a coughing spell where I thought I'd have to leave the session because I could not stop.

  • Since I felt crappy most of the time I was there, I didn't get to any of the parties or traipse around much. Only thing exciting was visiting the Velveeta Room for some stand up comedy. They stood, I sat.

  • Did get most of the book I was reading, Mortal Fear, by my new favorite author, Greg Iles, finished. Second book I've read by him, and I'll probably buy his newest which is now on the NY Times bestseller list.

  • Was nice to see in person the many web design bloggers that I read on a regular basis. People like Jeffrey Zeldman, Doug Bowman, Dan Cederholm & Dave Shea. These people are like rock stars to the web design community. Zeldman's keynote on the first day was overflowing with people, and he really didn't have much to say of any importance.

  • First conference I've ever been to that showed a film clip of some yahoo talking about the advantages of masturbating to online porn vs magazine porn. You had to be there.

  • Jalapeno Pork Chops at the Iron Cactus. To die for.

  • Never been to a conference where so many people brought their laptops to the sessions. Either live blogging or taking notes or visiting the web sites being talked about in the session. Ninety percent of them were Macs.

  • Bought the new Zen of CSS Design book by Dave Shea and Molly Holzschlag and had them autograph it. Beautiful book to accompany the beautiful designs on the CSS Zen Garden.

  • Organizers need to realize the conference has gotten too big for where they're having it. Half the sessions I attended had all seats taken and people sitting in the aisles and standing in and out of the doorway.

Web Site Theft


Encountered my first case of outright theft of a site design I did. My employer's web site, which I designed and authored, showed up on another site today with their content and a few color changes. I thought it looked quite familiar. Opening up the source code showed how familiar. It was the exact same code. Headers, footers, CSS, everything, even the comments. Not just one page. The entire site, give or take a few.

Needless to say I was a little hot. I fired off an e-mail to their County administrator and my local webmasters group. I received an extreme apology with the caveats of a newbie thinking it was OK to "use our ideas" on their site. Ideas, yes. Complete source code, No.

We all will admit to hijacking some code or ideas from other sites, once in awhile. Heck, how are we ever going to learn new techniques. But to just save the source code as your own, and even put your own Copyright on it? Where is the common sense or ethics?