layout
Split view
also called split views (hig), two pane layout (community), dual pane (community), side by side panes (community)
A layout of two or more side by side panes where a choice in the leading pane decides what the trailing pane shows.
The arrangement is older than the web: a file browser, a mail client, and a settings window all put the index on the left and the thing you picked on the right. What makes it a split view rather than two boxes next to each other is the dependency. The leading pane holds a selection, the trailing pane is that selection expanded, and the selection stays visible while you read it, so moving to the next item costs one click instead of a click and a trip back.
Two properties are worth writing down. The panes have their own size rules: the leading one is usually resizable within a minimum and a maximum, and the trailing one takes what is left, which is why the divider clamps in the specimen rather than letting the sidebar disappear. And selection persists: the row you came from stays marked, because a detail pane with no visible source reads as a page that arrived from nowhere.
Apple’s vocabulary allows a third column, which is the same relationship applied twice: mailbox, message list, message. Past three the pattern collapses under its own width, and past two it needs a plan for what happens when the window is too narrow to hold them all. That plan is the same everywhere: the panes stop being side by side and become a stack you navigate, list first, detail pushed in over it, with a back control that reverses the push. Building the narrow case as an afterthought is how a split view ends up with a detail pane nobody can get out of.
Which word?
| If you want | say |
|---|---|
| two panes where one drives the other | split view |
| a panel that slides in from an edge and can stay open | drawer |
| the classic fixed, fluid, fixed three column page | holy grail layout |
| navigation that lives beside the content, not above it | sidebar |
| browse a list, read one item, keep both in view | list detail |
| the app is only part of the screen | multi-window mode |
| two equally weighted choices on one page | split screen layout |
Related
Implementations
Specimens illustrate the concept; for production use, start here.
| hig | Split views |