Two secrets of Mac app design

1. Splitview resizing

Open Mail. Resize the window via the resize-thing at the bottom right corner of the window.

Note that the width of the source list (mailboxes and things) on the left stays at a constant width as you resize the window. (Same is true in iTunes and iPhoto. Colloquy and Coda. Etc.)

Note also that the horizontal splitter stays in the same place — the message view shrinks and grows, but the splitter stays in the same place.

It gives a feeling of physical stability, I think. For a counter-example, try Safari’s bookmarks manager — the source list on the left does not stay at a constant width as you resize the window. And it feels a little weird.

2. Source list x origin

Consider this detail from Mail’s source list:

Mail’s source list

Now consider this from an app made by an independent developer:

______’s source list

Set aside that the second app isn’t using the source list background color or selection gradient — note the extra outline between the selection and the window border.

Here they are blown up, so you can see what I’m talking about:

Mail’s source list blown up

______’s source list blown up

Here’s the secret: the x origin for the source list needs to be -1, not 0, to hide that outline. (Or maybe you can set it not to be bordered, or whatever — as long as that outline doesn’t show.)

17 Apr 2008