Design Signatures
I’ve spent a bit of time over the last month designing a new blog that I’ll be launching soon, and in doing so, I’ve become aware of some design and coding habits which, when put together, clearly compromise a bit of a “design signature”. If you’ve designed more than five sites in your site, you likely have a design signature too, although it’s probably different than most other designers and coders you know. You may not even know you have it, but you do.
Here’s part of what makes up my design signature:
- I start with a CSS reset
- For column layouts, I float every column (usually left but sometimes both left and right)
- I use the clearfix class to clear all of my containers
- I use dotted underlines for body-copy links that change to solid underlines on hover, and no underlines for links that appear within navigational lists
- I use desaturated colors for visited links
- I employ fixed-width centered layouts using a container div, auto margins, and a center text-align on the body
I almost can’t even think about producing a page template until all of these elements are in place, and no design would feel right to me without them. Additionally, I know the browser implications of them so well that I scarcely have to even test in IE anymore.
Do you have any design signatures of your own? If so, what are they and how do they affect your work?
It’s also what you don’t see that can form part of a “signature”. For example, using comments to annotate/ separate sections of template code, conditional comments to ring IE support to otherwise standards-compliant CSS, and the way you organize your stylesheets, etc.
I find it’s pretty hard to keep clean code with complex WordPress themes; PHP seems to insert line breaks and tabs all over. As a fellow WordPress user I do try at least to keep a “clean head” despite debris injected by too many plug-ins ;-) I use the theme functions.php file for this:
http://www.bioneural.net/2008/01/12/spring-clean-your-wordpress-head/
P.S. Another head-cleaning tip: I remove the WordPress version from the template (I notice you retain it Mike). My understanding is that advertising your installed version to would-be hackers is best avoided: if they don’t know your version, they might be less inclined to target your site with a known version-specific exploit.
Interesting idea. I’m currently in the process of developing a personal design framework, so I guess I’ve already inadvertently noted a few of my own design conventions.
For columns I float rather than position. I actually try to stay away from using position unless there is no other way.
I like to use horizontal rules as my clear element. I’ve found that in 99% of cases, when CSS is stripped away the now visible horizontal rules divide the remaining content pretty logically by section.
I don’t underline links outside of the main content at all. Links inside the content get bottom borders.
After experimenting with fluid-width layouts for a while, I’m back to almost exclusive fixed-width centered layouts, but I like the main content area to be the center, and any sidebar will be offset to the side to give the page a slight unbalanced feel.
I don’t aim for pixel perfect designs, which tends to help the design be IE friendly sans-hacks
Inputs, selects and textareas get active and inactive states
Gotta create the standard left and right classes to use to quickly float an element
And then there is all the fun stuff to get a proper grid working, setting the line height, adding the proper margins to paragraphs, images, lists, etc..
Bruce,
That plug-in looks interesting. It’s useful beyond just header cleanliness as well. A site is probably going to load faster if it’s not calling five different versions of jquery, used by five different plug-ins. I’ve recently just edited out all of the jquery calls from the plugin themselves, but that obviously hinders proper upgrading.
Rather than having to add individual js and css file calls for plugins that need them, I wish WordPress would allow the css and js to be added directly to the end of the already existing main stylesheet and javascript file. The only downside would be requiring the css and js files to be processed by php each time, but I wonder just how much extra load that would place on the server…
Anyway, as useful as plug-ins are, they can ugly up the end product code real fast.
I think I would typically do every single thing you laid out here, Mike, but there’s always that period where you start to explore.
Also, I’ve changed my approach to simply try to mimic every single thing the msnbc.com design team does because it’s always badass.
My signature is similar to yours… CSS reset, floating columns, clearfix and fixed-width, centered designs. I don’t generally have a rule for links but I’m going to now consider it.
The one thing that I would add about my signature is that I have some id / class names that I consistently use such as container (for the primary div within the body), masthead, footer, etc.
To be redundant, I’ll agree with most of what is being said above (container divs with auto left and right margins, floating columns, cleared floats, etc…). One additional thing I do (which goes back to what Bruce is speaking about) which isn’t seen is using comments to note each of the ending div tags (so I can keep track of structure without loosing my mind). I also always use unordered lists when creating navigation links.
About CSS Resets,
I’ve noticed several resets that list out all the elements, but the first reset I ever saw (and which I’ve always used) worked with the universal selector *, i.e.
* {
margin: 0px;
padding: 0px;
… }
Is there a functional difference between the two (aside from being able to exclude some elements), or is it just a matter of preference?
On a side note, I love the way you do your links Mike.
Wow … center text-align … sill sportin’ for the 5’s eh?
@Michael – Awesome idea about the comments for closing divs. It’s a surprisingly simple solution for a problem that anyone working in html has encountered many times. I really should have thought of that by now.
I always create a CSS ‘table of contents’ for easy future reference. Hmmm, that’s not much of a signature. :-(
You guys make me think I should go back to college! There is so much to learn technically, but I hope my ‘design signature’ comes from my visual senses. Looking forward to the new blog Mike. (Your’s is the very first blog I came across!)
For me it’s usually all in the commenting of my CSS and organization. Usually it includes some type of basic information at the top: site name, author, last modified, email address. Sometimes a color legend and a table of contents if the doc is really long. And then in the way I break it down: structure, typography, lists, images, links, nav, footer, then sections for page-specific styles.
Mike, I noticed in your styles.css file you have div{ position: relative; }
What the reasoning behind this?
Josh: Aha, good question. I totally forgot that I did that. I don’t do it all the time, and I used to do it more so than I do it now, but the reasoning was such that any div on the page could be used as an origin for absolutely positioned divs inside of it. I used to make heavier use of absolute positioning so I just set all divs to relative by default and they just unset them if I needed to, but now I work in reverse: setting them only as I go along.
Trey: Good question. Perhaps it’s a browser compatibility thing? Maybe there is some old browser out there that doesn’t support the universal selector.
This is a great idea. Inspired me to write my own blog post on Design signatures: http://nimbupani.com/blog/learn-to-write-css-without-hacks.html
[…] Mike Davidson shares his design signature: […]
A nifty trick to simplify the clearing process:
.clearfix{ overflow: auto; }
That’s it. It seems too good to be true, but I’ve tested it across browsers and platforms and am yet to come across an issue with it.
@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.
@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!
Hello Mike
What tehnique do you use for 3 column liquid layouts?
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!
[…] Davidson describes his design signature in a recent post. I realized then how much I like his link […]
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.
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.
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 <abbr> 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.
@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?
@josh Make sure your containing element has a width set, Josh. That’s a piece that is required by IE6.
Abby, way to come through in the clutch, thank you much.
Here’s my list: http://blog.derekpcollins.com/post/48000728/design-signature
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.
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.
[…] 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”. […]