AO3 News

Post Header

When we redesigned the Archive in 2011, most people were accessing the site on desktop devices, so we designed the layout and skin system with larger screens in mind. A lot has changed in the last four years, and the majority of our traffic now comes from small-screen devices like tablets and phones, so we're making some changes to our layout and skin system to reflect this new reality.

Currently, the Archive determines which layout you see based on how many pixels wide your browser window is. If you're browsing in a window that's 640 pixels or narrower, you see a single-column version of the layout. Otherwise, you see the default layout. However, our default layout was designed for larger screens, so if your browser width is between 640 and 1024 pixels, Dashboard pages with filters might not look their best:

A user's works page with the Dashboard, works, and filters arranged in three columns. The filters partially cut off due to screen size.

Soon we will be adding a new breakpoint to help anyone who has been seeing a slightly squished version of the Archive. The resulting layout will be a halfway point between the default and mobile layouts: the Dashboard will appear at the top of the main content, just below the main navigation, but the filters will still be on the right side of the page.

A user's works page with the Dashboard on the top and the main content and filters arranged in two columns.

We will also stop using pixels to define these breakpoints and instead switch to a relative unit known as ems. Em units are based on font size, and using them to set our breakpoints means the Archive layout will work better for anyone who has changed the default font size in their browser. For example, setting the font size to Very Large in Google Chrome cuts off the text in the filters and makes the work blurbs very narrow and long, even if you are looking at the Archive in a window that is 1024 pixels wide:

A user's works page with the browser font size set to Very Large and the Dashboard, main content, and filters arranged in three columns. The filters are almost completely hidden.

Once we add the new breakpoint, the Dashboard will appear at the top of the page, giving the filters and blurbs more room and making the page easier to browse:

A user's works page with the browser font size set to Very Large. The Dashbaord is now at the top of the page and the main content and filters are in two columns.

The new breakpoints of 42em and 62em will be available for use in skins, and any skins using the existing 640px breakpoint will automatically be converted to the new 42em setting.

These breakpoints don't correspond to the dimensions of any particular device -- there are too many devices for that to be a practical approach -- but are instead based on the point at which the Archive's default layout begins experiencing problems. We realize that's not ideal for skin makers who have chosen to remake the layout entirely, but it should be a positive change for the majority of skin users, and we're looking into adding customizable breakpoints in the future to allow you to target any and all devices you use to browse the Archive.

As always, if you have any questions or experience any problems, please contact our Support volunteers, who will be glad to help!