thoughtbot playbook

Go to http://playbook.thoughtbot.com/.

As part of my apprenticeship at thoughtbot I was given the task of redesigning the navigation for their Playbook, a collection of things learned at thoughtbot that has been published for the benefit of anyone interested in building web and mobile applications.

The old Playbook had a lot of attention paid to the typography and readability, but the navigation consisted of a home page with a list of links, and links on each page for the next and previous pages. The reader had no sense of where they were in the Playbook and no ability to jump to a new section without going to the home page.

I chose to keep the existing single narrow column for the purpose of readability and focus, but to create a sidebar table of contents. This is always off to the side and out of sight, but when you hover over it's exposed edge it comes back into view so you can select a new page to read. When you jump to a new page, the section of the Playbook you are in stays expanded in the sidebar so that when you expose it again you'll still know where you are.

It is also responsive to the device it’s being viewed upon. It will size itself downwards and adjust it’s typography to fit a mobile device, and replace the hover action for the table of contents with a click.