Simian Design, by Tony Stephens

  • elsewhere

    • Label Placement on Forms

      When creating a web form, one of the many choices you must make is how you are going to align your labels with your inputs. This is not a trivial decision, as this placement affects the readability/usability of your form, completion rates, speed of completion, and ultimately the satisfaction level of the users trying to get through your form.

      August 5 at 12:44 pm
    • A Scenic Night in Binbrook

      July 5, 2008 I had the pleasure of observing and photographing the stars at a local conservation area and dark sky site in Binbrook, Ontario, Canada. I imaged this scene with an unmodified Canon 40D, Sigma 17-70mm lens (17mm @f2.8) and standard camera tripod with no tracking. This is a stack of 15x20sec exposures @ ISO 800 on the Milkyway down to the tree line, and another single 20sec exposure on the rest of the landscape below to create a two frame composite. Stacking was done in Deep Sky Stacker and processing was done in PS with layers. I was really lucky that the the water was beautiful and still enough so that the stars casted a nice reflection in the water. In this shot you can also see Jupiter, various nebulas in the MilkyWay, Rho Ophiuchus and the light dome from a distant town. Published: NASA Astronomy Picture of the Day SkyNews Photo of the week #349

      August 5 at 12:35 pm
    • Concept Ships

      A great site with a collection of space ship designs, art and concepts. Great for the inner geek in you.

      August 5 at 12:26 pm

Pixels to Ems Conversion

A really great chart to determine the Pixels to Ems Conversion Table for CSS. Thank you Jon Tan.  A quick over-view/sampling below.

px font-size em equivalent 1px in ems
11 0.689 0.091
12 0.750 0.083
14 0.875 0.071
16 1.000 0.063
18 1.125 0.056
20 1.250 0.050

What this chart allows you to do is determine the em width of something. Say you have something that is 770px wide, and using a font-size of 1em. You know then that the em-width of the layout is: 1 ÷ 16 × 770 = 48.125em.

10 best CSS hacks

The 10 best CSS hacks is a great list. Defintely worth checking out.

  1. Vertical align div
  2. Min-height
  3. PNG Transparency
  4. Autoclear
  5. Reset CSS (incredibly important)
  6. Scrolling Render IE
  7. Opacity
  8. PRE Tag
  9. LI Background Repeat IE
  10. Targeting Browsers

Good stuff.

Reset CSS

Eric Meyers Reset CSS has found a permanent home now. Reset CSS is a useful tool to help you default a lot of generic styles built into browsers.

” The reset styles given here are intentionally very generic. There isn’t any default color or background set for the body element, for example. I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.”

Also be sure to check out his diagnositic css file as well.

“With a diagnostic stylesheet, you can quickly see where your markup might have some trouble. If you want to see this in action, there are two demos to check out:”

Incredibly useful tools, check them out.

Identify links with CSS and Icons.

Poolie Studios has a nice collection off icons that he uses to iconify links.  This process is a fairly lightweight, unobtrusive way to show what your links are.

a[href$=".pdf"] { BLAH BLAH } is the core of the it all.  This CSS selector object (easily done via jQuery for older browsers) allows you to showcase exactly what your links are.

I’m not 100% positive that this is always a good idea, but this is a nice collection of icons that fit the link sizes, and thus I’m linking it to you.