CSS Development Shortcut From Me To You

I’ve just uploaded pnh_tag_test.html (UPDATE: see note at end of post)

Its just a simple document that I thought I’d share… but for all its simplicity it does a lot of work.

So what is it?

Over time as part of my development process I’ve evolved a large file of HTML tags and content that gets included into the templates I build and used as a base for CSS coding and testing. Just use your favorite include method or copy & paste the content into your HTML document and start working.

Early in the development process, somewhere between evaluating a static PSD file and having functional templates there comes a time to code the styles for the display and typography on a page. Since a few paragraphs of lorem ipsum typically isn’t enough to work with, this expanded sample makes a great time saver.

But what continues to impress me is not the time saved in having a document with a bunch of tags already dummied up. It’s not the number of times I’ve dropped the file into a template and caught some sizing problems somewhere or that margins on adjacent elements aren’t playing well together. No, the real value has proven to be in the use of this document for review and reference further along in the process. Designers love seeing everything there in one place for them to comment on and it makes for an easy deliverable to keep clients involved with the build while you’re working out details with more complex content areas.

Surely its not the only tool in the development and review process, but for just a silly chunk of markup it has proven as an invaluable tool so I thought it time to share.

UPDATE 2010.08.15 An updated version of this file, which I still use often on projects, can now be found on GitHub in the PNHTagTest Project.

Comments Temporarily(?) Removed