User blog:Rupert Giles/Layout Changes: Breakpoints and Typography



''Some contents of this blog have been edited. Please read through to see what has changed!''

Hey everybody, in last year’s article layout prototype, we tested out a number of different things and we got a lot of feedback that has been instrumental in how we’re going to try and move forward. The prototype helped us learn some important things about what works and what doesn’t (for example, removing the right rail was fairly disruptive). We are still going to move forward with gradual enhancements to article layout, but our plan is to focus on specific aspects of the layout one by one. This process is similar to how we updated the global navigation in January, but it will take a longer time to get all the changes to article layout out there.

First on the list is adding breakpoints to Wikia's responsive layout, and some related updates to typography. The typography changes will only happen at the largest breakpoint, which we are calling  Desktop XL, currently defined as displays wider than 1575px. The gallery below shows some before-and-after examples of what will change at the Desktop XL layout size. Click through the gallery and continue scrolling to read more about the changes we will be making to breakpoints and typography.

The breakpoint and typography changes will go into effect sitewide on Tuesday, May 19.

Breakpoints
This is a shift from the "fluid" layout, where we instead have defined breakpoints to allow more predictable behavior, which makes it less likely for certain templates on a page to break or look "off". Our goal for breakpoints is to have the site still be responsive so that the page will adapt to larger screens, and this will be defined by browser viewport. Please note that scrollbars are considered outside the boundaries of the screen measurements.

List of each breakpoint and the corresponding screen widths:

Note: This table has changed to include new breakpoints for desktop and tablet landscape.



Typography
We want to focus on readability and line length that follow modern UX (user experience) best practices and this means adapting the experience to the view. On Wikia today, only the line length changes but not the font size or line height. With the typography update, the font size and line height will change at the Desktop XL breakpoint, and you can see the chart below for the specific details. For the desktop/tablet breakpoints, the text size is the current default on Wikia. The only increases come at the Desktop XL size.

List of typographic changes at each breakpoint:



Our intention is to apply these changes only to headers, body copy, and basic quotes. One problem we run into is, if certain templates aren’t given the right class, they may have the typography changes applied, which might break the template. We have started a list of potential issues, their causes, and proposed solutions, and most problems should be fixable either by giving templates these class names or by adjusting your site CSS. This list is located here and will be a work in progress the more we, and users like you, edit on Wikia in the new layout.

How to View the Breakpoints and Typography
If you want to preview how things will look on a wikia, all you need is a query string parameter. Check out the directions below to see the parameters you need to preview both changes.

To preview breakpoints and typography:

Add  after the URL

For example: http://gameofthrones.wikia.com/wiki/Tywin_Lannister?oasisbreakpoints=1&oasistypography=1

The breakpoint and typography changes will go into effect sitewide on Tuesday, May 19. If you spot anything broken or unusual, first check the help page to see if a solution has been documented there. If not, please let us know in the comments below or by using Special:Contact.

UPDATE: May 21, 2015
In order to resolve some scrollbar-related bugs, we have shifted the breakpoints slightly. The Desktop breakpoint is now shifted to 1084 px, and the Desktop XL breakpoint is shifted to 1595 px. The tables on the main blog post and information on the help page have been updated accordingly.