Simian Design

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.

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.

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.

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…

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.

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!, a redesign of Yahoo! by Khoi Vhin.  The results are stunning.

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)

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.