Comments on: Design Signatures

By: My Design Signature

My Design Signature — Sun, 18 Jan 2009 10:05:01 +0000

[…] Mike Davidson recently wrote about how he has come to recognize some of his design and coding habits that result in what he calls a “design signature”. […]

By: Eric Meyer

Eric Meyer — Sun, 07 Sep 2008 19:53:42 +0000

Comin’ in long after the fact, but since the question of “why not just a simple universal selector” was brought up and I helped popularize the “big grouped selector” approach, here’s a gory exploration:

http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

Not everyone agrees with me, but that’s why I did it.

By: James

James — Wed, 03 Sep 2008 08:59:52 +0000

I always start with one of these http://blog.html.it/layoutgala/ same markup, different css, 40 different layouts, plain and simple!

Throw in a reset.css for sure, stick to html 4.01 (when will ppl learn to forget xhtml, it was just a buzz, love hixie). I never have problems with IE anymore, nor safari or any browser, they always render the same without fault. I also like my jquery, and controller based css files.

By: Derek P. Collins

Derek P. Collins — Sat, 30 Aug 2008 04:40:18 +0000

Here’s my list: http://blog.derekpcollins.com/post/48000728/design-signature

By: Josh

Josh — Fri, 29 Aug 2008 17:44:45 +0000

Abby, way to come through in the clutch, thank you much.

By: Abby Larsen

Abby Larsen — Fri, 29 Aug 2008 17:08:58 +0000

@josh Make sure your containing element has a width set, Josh. That’s a piece that is required by IE6.

By: Josh

Josh — Fri, 29 Aug 2008 16:48:19 +0000

@abby, @chuck

Wow, what a marvelous gem that bit of code is. No more div.clear to clear a bunch of floats. However this doesn’t seem to want to work in IE6. How do you address this issue?

By: Miriam

Miriam — Fri, 29 Aug 2008 14:25:26 +0000

comments to note each of the ending div tags
Oh, absolutely! I don’t see this much in the wild but is a tremendous help.

My hand is recognizable in my base framework with…
fixed width; .wrap / .colwrap + two floated columns
color reference at the top
contents
style order (position, size, margin/padding, type, border, bg)
typography is NOT broken in to a separate area
I don’t put the closing brace on a separate line
mini-icons via :after for external links, pdf files
definition lists are the best. things. ever. (almost)
comments on low-priority fix items, initialized for easy finding later
use of for all kinds of things like alert icons, required field indicators, open/close arrows

I’m loving that overflow: clear trick. I wish there were a list-header tag. I wish there were easy color vars.

Thanks for pointing out that WordPress link, Bruce! I’m in the middle of reworking a messed up (code-wise) WP blog and forum, and that’s very handy.

By: Ivan

Ivan — Wed, 27 Aug 2008 23:04:19 +0000

It’s cool when you come across other peoples methods that match your own. It makes you realise that we are all trying to achieve the same goals. Thanks for sharing this. The only other thing I do (which some people have possibly suggested here) is use a core draft html template with all of the main containers (consistently named) and links to CSS and JS etc so I can get a framework design up and running in minutes. This really speeds the process up and makes sure I have all the correct syntax and meta data I need. Thanks for the heads up about clearfix too, I was still using the original position is everything approach.

By: Mike D.

Mike D. — Wed, 27 Aug 2008 17:53:55 +0000

Ionut: I really don’t do liquid layouts much, but I’d probably stick with the float-float-float method. When everything (or nothing) is floated, things just seem to work better.

By: Giving Credit Where Credit’s Due at blogan

Giving Credit Where Credit’s Due at blogan — Wed, 27 Aug 2008 14:28:13 +0000

[…] Davidson describes his design signature in a recent post. I realized then how much I like his link […]

By: Turtle design

Turtle design — Wed, 27 Aug 2008 04:19:00 +0000

Love the checklist for new sites, and really looking forward to the new site!

After years of web designing, a client asked me ‘could you remove the dotted line around links when i click them’ in firefox. I just discovered the ‘outline:none’ bit of CSS and now i’m gonna have to go back and add it to all our existing sites, and its gone straight in the template for future sites.

I had no idea you could do this!

By: Ionut Popa

Ionut Popa — Tue, 26 Aug 2008 23:46:01 +0000

Hello Mike
What tehnique do you use for 3 column liquid layouts?

By: Abby Larsen

Abby Larsen — Tue, 26 Aug 2008 21:17:35 +0000

@Chuck

I used to use overflow:auto but switched to overflow:hidden when “auto” caused some (documented) buggy behavior in FireFox when scrolling — strange horizontal lines appeared. Maybe that has been fixed in FF since, but I haven’t stopped using “hidden”. It just works in everything and also expands containers to contain floated content, too! No more needless floats! No more superfluous elements used just for clearing! One caveat: Just remember to remove that overflow:hidden from you print stylesheet!

By: Chris Coyier

Chris Coyier — Tue, 26 Aug 2008 20:16:44 +0000

@Mike & Trey: The universal selector is pretty universally supported, but it gets criticized for being “computationally intensive” since it requires the browser to apply that rule to every single page element no matter what. Also, if you include something like border: 0; as a part of it, it breaks some browser-specific form styling defaults, which some folks don’t like.