App header

Main app area

Information and controls above the tabbed area

Tabbed area

'Medium Screen' mode

  • For medium screens, activating the task list shows it in a hovering menu.
  • Otherwise, activating it moves a lot of the page around: Not ideal as it forces things to either try to render in a smaller space, or, introduces horizontal scrolling which pushes things off screen - disorienting.
  • Clicking outside of the task list should hide it.
  • If a user transitions between screen sizes, the task list should persist, but display in the way appropriate for the screen size (as it does in this example)

'Large Screen' mode

  • Larger screens afford us some space on the right.
  • Activating the task list should put it there.
  • The space should be left clear when it's not activated, because we don't want to have forms take up huge horizontal widths as this effects readability and ease of use.
  • If a user transitions between screen sizes, the task list should persist, but display in the way appropriate for the screen size (as it does in this example)

Task List

I'm in slighlty the wrong position, I should be under the toggle really.

  • Task
  • Task
  • Task
  • Task
  • Task