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.

Vertical Text

I’m working on a project that requires some vertical text.  But I was unsure as to the “correct” way for the vertical text to be set, 90 degrees clockwise or counter-clockwise.  Luckily, I didn’t have to do a lot of research, as it’s been done for me. Robust Vertical Text Layout outlines the basic rules for vertical text for me.

In a purely physical layout scheme, each of these text layout properties would be given as an absolute: The inline progression of this run of English is top to bottom, its glyph orientation is 90 degrees clockwise, its block progression is from right to left.

But absolutes don’t hold much water.

For scripts in a non-native orientation, the natural inline text flow depends on the direction of line stacking: the text is most comfortably laid out as if the whole text block were merely rotated from the horizontal. For example, English text in vertical lines that stack from left to right will face with the glyphs’ tops towards the left and the text direction running from bottom to top. The same text, by the same logic, would in a right-to-left line stacking context face right and flow within each line from top to bottom.

Basically it boils down to this from what I can determine: Have the bottom of the text point in the direction of the block progression.

The New Delicious.

Just started taking a look at the preview for the new Delicious.

It looks like it’s taking a giant step forward in terms of UI.  It is very different, and I do think there will be a “re-learning” of the interface.  While this is a bad thing, especially with such a large user-base, I think it might be a good thing.

I found the old Delicious dated, and cramped at times.  The links, tags, other people linking, save this, etc were all crammed in together.  There were differentiated okay, but still it felt like a bunch of feature creep.  Welcome features, but creep nonetheless.

This new UI spaces things out nicely.  I also really like the date separation and tag separation.

Granted, these are my first impressions.  Like after using it for 10 minutes.  This could easily change after using it more.  But Delicious might be winning me back…

Spruce up your search box

d’bug has a nice writeup on recreating the search field using CSS.

Normally I wouldn’t be a giant fan of changing the default input/form fields in a browser.  I think having those standards that everyone recognizes and know how to use is a powerful tool. Deviating too much from them is a risky proposition at times.   At least in my opinion it is.
But that being said, his end result is nice.  It seems to work.  And as a concept piece it’s cool. Go check it out.

Setting Type on the Web to a Baseline Grid

From A List Apart: Setting Type on the Web to a Baseline Grid.

“We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid.”

A nice writeup to an odd problem that does plague sites.

Yeeaahh!

Yeeaahh!, a redesign of Yahoo! by Khoi Vhin.  The results are stunning.

The default SharePoint content placeholders

Whenever you starting monkeying with the default Master Pages for Sharepoint 2007, you’re presented with a myriad of these “default” content placeholders.

Well now we know what each of the default content placeholders actually do. (The PlaceHolderMiniConsole was the one that lead me to finding this out.)

(below is taken from the site, copied here for your conveinance)

Content placeholder Description
PlaceHolderBodyAreaClass Additional body styles in the page header
PlaceHolderBodyLeftBorder Border element for the main page body
PlaceHolderBodyRightMargin Right margin of the main page body
PlaceHolderCalendarNavigator Shows a date-picker for navigating in a calendar when a calendar is visible on the page
PlaceHolderFormDigest The “form digest” security control
PlaceHolderGlobalNavigation The global navigation breadcrumb
PlaceHolderHorizontalNav Top navigation menu for the page
PlaceHolderLeftActions Bottom of the left navigation area
PlaceHolderLeftNavBar Left navigation area
PlaceHolderLeftNavBarBorder Border element on the left navigation bar
PlaceHolderLeftNavBarDataSource Data source for the left navigation menu
PlaceHolderLeftNavBarTop Top of the left navigation area
PlaceHolderMain Main content of the page
PlaceHolderMiniConsole A place to show page-level commands, for example, WIKI commands such as Edit Page, History, and Incoming Links
PlaceHolderNavSpacer The width of the left navigation area
PlaceHolderPageDescription Description of the page contents
PlaceHolderPageImage Page icon in the upper-left area of the page
PlaceHolderSearchArea Search box area
PlaceHolderSiteName Site name
PlaceHolderTitleAreaClass Additional styles in the page header
PlaceHolderTitleAreaSeparator Shows shadows for the title area
PlaceHolderTitleBreadcrumb Main content breadcrumb area
PlaceHolderPageTitleInTitleArea Page title shown immediately below the breadcrumbs
PlaceHolderTitleLeftBorder Left border of the title area
PlaceHolderTitleRightMargin Right margin of the title area
PlaceHolderTopNavBar Top navigation area
PlaceHolderUtilityContent Extra content at the bottom of the page
SPNavigation Empty by default in Windows SharePoint Services 3.0. Can be used for additional page editing controls.
WSSDesignConsole The page editing controls when the page is in Edit Page mode (in the browser, click Site Actions, and then click Edit Page)

The new Roger Black

Roger Black has just relaunched with a great new design.  Red, white and black, big and bold.  It’s very pleasing to the eye.

One thing I really like a great deal is the way the pages load.  When I click on a highlight, the center most column loads with the new content.  But while it looks like a quick-load, in fact the entire page loads.  You get a new URL with that content loaded.  The URL is user friendly and the page loads transparently.

I don’t think I like the weight of all the headings.  They seem to conflict to one another, and the visual hierachry isn’t as clear as I think it could be.

But all in all it’s a great design.  Nice and clear, open and inviting.

Layout Grid Bookmarklet

Andy Budd created a great Bookmarklet that overlays a visible grid over your page.  This was inspired over a post by Khoi Vin about using a grid as a background when you’re creating a layout.  It’s a very useful tool.  I suggest you grab it if you do any web layout stuff at all.

Tabs within a textarea

Tabs within textareas. The real secret is if (event.keyCode == 9) which checks for the tab within the textarea.

The script is even extra smart and checks for backspaces, deletes, cursort movement, etc.  It’s really quite smart.   Go check it out.