Simian Design

The Wilkinson Residence, designed by Robert Harvey Oshatz, is in Portland Oregon. It’s gorgeous, and breathtaking. It also is awful. This sort of high-profile, self-indulgent  project, which I LOVE, is what architects are drawn too. And why most houses look like they do; there is no money there.  I mean this took some serious cash.

Plus can you imagine the upkeep of this house? Already you can see issues with some dripping and mold it looks like in some of the photos.

But at the same time, this is EXACTLY the type of Space-Age Bachelor Pad I’d want when I hit the lotto. It really is gorgeous. I just wish we had elements of this in normal, day-to-day architecture. If we had stuff like this that the majority of people lived in, how could we not, as a society, have jet-packs? It’s simply demand it, wouldn’t it?

NOW THIS is a motorcycle. I mean, sign me up. If you own and ride one of these, it automatically makes you cooler than 99% of the people out there. This is the 1949 MOTO MAJOR 350.

Torinese engineer Salvatore Majorca created the revolutionary Moto Major straight after WWII. Apparently it was an engineering rather than styling exercise, but 60 years on, its shape is still breathtaking. The wheels, in particular, would not look out of place on many modern motorcycle

Theresa Neil has an excellent article up on 12 standard design patterns.  These concepts are central to enterprise application and web productivity application design.

The image shown here is just a high-level overview of what those patterns are, and she delves into what each of these patterns are and what encompasses them.

Quick quote in regards to the Master/Detail pattern:

Master/Detail screen pattern can be vertical or horizontal. Ideal for creating an efficient user experience by allowing the user to stay in the same screen while navigating between items. Horizontal layout is a good choice when the user needs to see more information in the master list than just a few identifiers- or when the master view is comprised of a set of items that each have additional details.

A very useful article.    Lots of really good info.

Richard Rudder has written a great article on how Font-weight is still broken in all but one browser.  It’s something that I myself have never really bothered with much, as it hasn’t seemed to work, and so I’ve stuck to the tried and true ‘font-weight: bold’ and ‘font-weight: normal’.  If I wanted a heavier font, I specified a heavier font in the ‘font-family’, or ‘font’ declaration.

Since its inception in 1996, CSS has provided a way of displaying these other weights through use a numerical scale with the font-weight property. This is still almost entirely broken in every current browser except Firefox 3 on Mac.

Wow.  It’s always been there.

As well as the normal and bold keywords, font-weight also takes nine numerical values of 100, 200, through to 900. These numbers span the scale from ultra-light to ultra-black, with normal defined as 400 and bold defined as 700. So to specify a ‘light’ weight you would write font-weight :300. Here’s a rough guide matching the numeric scale to common weight terms:

100	ultra-light, extra-light
200	light, thin
300	book
400	regular, normal
500	medium
600	semibold, demibold
700	bold
800	heavy, black, extra-bold
900	ultra-black, extra-black, fat

It’s a great article, with great examples. And it’s a crying shame this doesn’t work in more browsers.  There are workarounds he talks about, but just don’t seem worth it.    Thankfully Webkit seems to be working on this issue.

Frankly it’s really depressing that this bug is still present after 12 years, and regardless of success or otherwise in Acid tests, these browsers cannot truly say they support even CSS 1 fully or correctly. I hope we see fixes soon (apparantly already done in WebKit). I know fonts are a tricky subject in operating systems, but if it can be done in Firefox 3/Mac then surely other browsers can quickly follow.

Ultimate House is a tv show produced for Discovery.  It follows the story of two projects, one self-build and one restoration that are have high aspirations.  Through the series they will take you inside some extraordinary homes they could find. 

The real gem is in the gallery.  While I like the design, it’s not super-clear on how to get to the static images of the amazing spaces.  Click on the main top graphic to go to the image gallery.

The Villa Kaleidoscope treehouse, the lighthouse, the house of spiritual retreat, bow wow japan are just a few stunning examples that are to be found in here.

Looks like the show might be worth checking out.

Flickr recently released a Flickr site custom tailored for the iPhone.  They wrote about some of the rules they learnt doing this site, which I find fascinating.  I’m pulling out the main points, but you really need to go read the detailed description of why they’re doing things the way they are.

1. Don’t Use a JavaScript Library or CSS Framework
2. Load Page Fragments Instead of Full Pages
3. Don’t Build for Just One Device
4. Optimize Everything
5. Tell the User What is Happening

Now they’ve put together a library just for the iPhone that handles many of these items. The iUI framework seems to be a iPhone version of the YUI framework, but it’s a good start.

I don’t like the default SharePoint breadcrumbs. They annoy me in multiple ways.  And I’m not alone in my disdain.

MOSS 2007 has two breadcrumbs that are included on the master page.  Not one, but two.  The Global Breadcrumb appears in the upper left of a default SharePoint site, and it shows the site levels as a person delves into a site.   A very high-level breadcrumb.  

The Page Level breadcrumb is also included on the master page, wrapped in a content placeholder.   This allows the master page to provide default information, but allowing the pages to replace that default content with it’s own.  If on the page level you empty out that content placeholder, you can zero out the Page Level breadcrumbs.  Annoying.

Heather Solomon has a great writeup on breadcrumbs (shocker), which is well worth a read.  I particularly like the demo image she provides showing the difference between the two main providers you can choose from.

The next challenge with the breadcrumb is the site map provider it uses.  There are several available in SharePoint, and two that are used predominantly for WSS and MOSS sites in the breadcrumb.   The problem is the WSS one is great for lists and libraries, and the MOSS one is great for publishing pages.  But they each are not great for the other. 

Breadcrumb with site map provider best for WSS: 
<asp:SiteMapPath SiteMapProvider=”SPContentMapProvider“ id=”ContentMap” SkipLinkText=”" NodeStyle-CssClass=”ms-sitemapdirectional” runat=”server”/>

Breadcrumb with site map provider best for MOSS (publishing sites):
<asp:SiteMapPath ID=”siteMapPath” Runat=”server” SiteMapProvider=”CurrentNavSiteMapProviderNoEncode“ RenderCurrentNodeAsLink=”false” CurrentNodeStyle-CssClass=”breadcrumbCurrent” NodeStyle-CssClass=”ms-sitemapdirectional”/>

The main issue with the WSS site map provider is it will show directories you don’t want it to (mainly the Pages library) in the breadcrumb, and on some pages it will show “.aspx” on the end of the page name. The MOSS site map provider is more graceful, it just doesn’t show the list or library name in the breadcrumb.

There is also a great collection of reference links at the bottom of the post as well.

Crayola crayons currently come in 120 colors including 23 reds, 20 greens, 19 blues, 16 purples, 14 oranges, 11 browns, 8 yellows, 2 grays, 2 coppers, 2 blacks, 1 white, 1 gold and 1 silver.

Aaron at ColorSchemer.com created a fun list of all 120 Crayon Colors with their hex codes and RGB values.  COLOURlovers reproduced this list along with several fun facts.

“the scent of Crayola crayons is among the 20 most recognizable to American adults. Coffee and peanut butter are 1 and 2.”

“Crayola crayon colour names rarely change. However, there are exceptions. In 1958, Prussian blue was changed to midnight blue in response to teacher recommendations that children could no longer relate to Prussian history. In 1962, the colour flesh was changed to peach recognizing that not everyone’s flesh is the same shade.”

But the real gem of this article is the color and hex listing.  Midnight blue (formerly Prussian blue) is the hex code of: #1A4876.   Peach (formerly flesh) is #FFCFAB.

What a great list.

38 things that Ogilvy & Mather have found that helps when creating Advertising that just flat-out SELLS.  Ogilvy & Mather have been giants in the advertising world for a while, and they know what they are talking about.  David Ogilvy has written us this gem of an article that articulates these 38 things.  It’s a great read if you’re at all interested in advertising.  Highlights are listed below.

1. How should you position your product?  This is by far the most important decision.
2. Create a large promise, a benefit for the customer.
3. Brand image.
4. Big Ideas.  Big ideas are usually simple ideas.  “THe problem, when solved, will be simple”.
5. First-class Ticket.
6. Don’t be a bore.
7. Innovate.
8. Be suspicious of awards.
9. Psychological segmentation.
10. Don’t bury news.
11. Go the whole hog.  This is a great point.  Don’t attempt too many things, you’ll achieve nothing.  Boil your strategy down to one simple promise, and go the whole hog in delivering that promise.

They also have 12 points in what works well in television, and 13 for print. It’s a great list, and I’m just loving digging through this genius.

32. Yes, people read long copy.  Readership falls off rapidly up to fifty words, but drops very little between fifty and five hundred words.(!)  “The more your tell, the more you sell”.  This is fascinating.  That’s a HUGE number, fifty and five hundred with a minor drop-off.

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

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.