Sneak Peek: Our Shiny New Header!

As we mentioned in our August newsletter, super coder Sarken and the rest of AD&T have been working hard on a redesign of the AO3 header. This new header will include drop-down menus to make site navigation easier. We're excited about our new header and we'd like to give you a little sneak peek before it goes live!

Presenting: the new header!

This is what the new header looks like without any expanded menus:

Note that the new header does not in any way affect the organization of the dashboard. The header will not affect the layout of any other pages either.

To make it easier to navigate the site, the header has four main drop downs: Fandoms, Browse, Search, and About. For example, clicking on "Fandoms" will show you this:

The "Fandoms" menu is organized by media type. Clicking on a media type will lead to the media type's main listing of all fandoms that belong to that media type. "Browse" and "Search" offer ways to look for content by works, people, bookmarks, tags, and collections - options that are available on our current header but which will now be condensed into two menus. The "About" menu will have links to the blog, the FAQ, and the volunteer page. These four main menus are available to all users.

To sign in, look to the top right corner of the page:

Clicking on "Log In" in the upper right corner will show the log in menu - now a drop down menu, instead of a menu that goes across the top of the page.

If a user is accessing the site from the homepage or from other pages (such as a parent fandom page), there will be an option to access dashboard features:

Clicking on "Hi, [user]!" shows a menu for users to get to specific areas of their dashboard without having to go to their main dashboard page. This menu will not include everything on the dashboard page, just the options shown here: My Dashboard, My Subscriptions (#), My Works (#), My Bookmarks (#), My Collections (#), My Sign-ups (#), My Assignments (#), My History, and Preferences.

Links with (#) will only show up if a user has something saved or uploaded under that link. For example, if a user has fourteen bookmarks uploaded, the link will read "My Bookmarks (14)". If a user has no bookmarks, "My Bookmarks" will not show up. The same goes for subscriptions, works, collections, sign-ups, and assignments. "My History" will only show up if you have history enabled under your preferences.

The header will also be visible on the mobile layout:

As we can see here, the "Fandoms" menu has the exact same options for mobile users. The mobile header reflects the new header; mobile users will have access to the same menus and options as desktop users.

How you can help us

We've been making sure that this header works without Javascript. However, to make this new header as accessible as possible, we'd like feedback from users who use screen readers and other assistive technology. If you're willing to help us out, please contact Support.

When do we get it?

We're hoping to roll out the new header by the end of February. Stay tuned for further details when it goes live!