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



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.

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 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:



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 breakpoint, 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 see how things look on your sandbox or a wikia, all you need is a query string parameter. Check out the directions below to see the parameters you need to preview each element.

To preview breakpoints and typography:

Add ?oasisbreakpoints=1&oasistypography=1 after the URL

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

The breakpoint changes will go into effect tomorrow (April 16) sitewide. We understand that the typography changes could lead to some unintended consequences, so our plan is to launch those changes on April 30. This gives the whole community some time to experiment. 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 through Special:Contact.

Update - April 16, 2015
We need to do some further testing to make sure everything is working properly so breakpoint changes will not go into effect until Tuesday (April 21).