Introduction

The Laboratory is my testing site where I investigate, tinker, and mess around with different web design and development topics such as typography, layouts, HTML5 and CSS3. Some of things created here may be incorporated into the current site, or rolled into a future re-design. Projects may in various states of completion, so things may look a little strange. Screwing up things that should be easy is a distinct possibility.

I’ll also keep track of different resources such as articles, references or software tools I’ve found to be useful.

Projects

Typography Test Page
Investigating different typefaces and setting type: size, leading, and maintaining a vertical rhythm.
Layout Page
Grids are the new rounded corners. Hopefully by the time I get the hang of them, they won’t have gone out of style. Experimenting with responsive web design and media queries will be next.
HTML5 and CSS3 Experiments
Gradients, transitions, shadows…and rounded corners.
Navigation Lists
Horizontal, vertical, tabbed, dynamic.
Color Palettes
I suck at this.

Tweak List

A random list of other minor changes to make my current site.

  1. Tweak overall typography
  2. Update About page
  3. Implement footnotes
  4. New header image + typeface
  5. Create smaller floated image classes
  6. Incorporate Twitter feed
  7. Incorporate Pinboard

Tools

Useful tools and software used on these projects and my site overall. I’m always on the lookout for new widgets. I haven’t used a Windows machine at home in over eight years, so these are all Mac programs.

BBEdit
The grand-daddy of text editors. One of the first pieces of software I purchased when I got interested in web design.
Coda
Great integrated editor from Panic, including FTP. What I'm currently using.
Espresso
Another integrated editor, from the makers of CSSEdit.
TextMate
The favorite son of many web designers and developers. Long overdue for an update. Somewhat over-rated, but I admit I haven’t scratched the service of it’s capabilities. It is a low profile editor that has replaced Text Edit for quick needs.
Snippets
Great little program to store snippets of code, markup, what-have-you.
xScope
Invaluable group of tools for measuring elements on screen.
Little Snapper
When I find inspiration or examples of great design on the web, I file them away with this.
Color Snapper
Tiny menubar utility for detecting and storing any colors on the screen.
WhatFont
Javascript bookmarklet for identifying fonts on web pages.
Syncotype
Another Javascript bookmarklet, this one for displaying a horizontal grid for maintaining a consistent vertical rhythm (see the Typography page.) I used the original by Rob Goodlatte forever, but in the course of writing this page, I found Samuel Bowles improved version.