FANDOM


As Wikia moves forward with gradual changes to the article layout in 2015, information will be added to this help page. This page includes descriptions of the changes. It also documents potential issues, their causes, and proposed solutions.

If you see a problem not addressed on this page yet, please let us know through Special:Contact, and we will do our best to work with you to get it fixed.

Breakpoints and Typography (April/May 2015)Edit

In the first stage of layout changes, Wikia is adding breakpoints to Wikia's responsive layout and introducing some related updates to typography.

Breakpoints help make page layouts more predictable by adjusting the layout to only a few specific widths, based on the user's screen size. The typography changes with increases to font size and line height occur at the largest breakpoint, which we are calling Desktop XL, currently defined as displays wider than 1595px. Other breakpoints will remain at the current (default) font size and line height.

The typography changes are meant only for headers, body copy, and basic quotes. However, certain templates may also have the text change applied if they don't have the right class, and so may appear broken.

It's possible to preview the typography changes before the global release of this update, by adding ?oasisbreakpoints=1&oasistypography=1 after the URL for a specific page. For example: http://gameofthrones.wikia.com/wiki/Tywin_Lannister?oasisbreakpoints=1&oasistypography=1

Please note that in order to see the changes take place, you must be viewing the page on a larger screen, at least 1595 px wide. This is the only way to see the Desktop XL breakpoint.

Most of the problems you might see should be fixable either by giving templates these class names or by adjusting your site CSS. This list will be a work in progress the more we, and users like you, edit on Wikia in the new layout, and Wikia staff will try our best to make sure no problem goes unsolved.

Table of ChangesEdit

Typography-table

To note:

  • The typography changes only occur at the largest "Desktop XL" breakpoint, on screens at least 1595 px wide.
  • The typography changes are meant only for headers, body copy, and basic quotes
  • Quotes are defined as elements with a "blockquote" tag.
  • Typography changes are not applied to elements with class="infobox" inside the template. If this class is not included in an infobox template, then the body copy styling will be applied to content inside the infobox. Our best practices recommend always having this class specified in your infobox templates.


How to fix templatesEdit

With the new breakpoints and typography, all elements within the highest level class selector, the WikiaArticle container (div with class="WikiaArticle", CSS selector: .WikiaArticle), will inherit the font sizes and line heights we set. Our changes will not overwrite the styles of elements (like tables) within WikiaArticle that are written in some places in our codebase or within your local CSS. If you set styles with any additional elements (e.g. .WikiaArticle .Navbox), that will take priority over the default styles we are setting.

If you want an element styled differently than the default, simply add an additional class to your stylesheet. In technical terms, this means that all elements which are styled with a more specific selector than .WikiaArticle (for instance: .WikiaArticle table, .WikiaArticle .navbox) will not be affected by our changes. In other words, if you define font-size in the class (or inline style), the font-size typography change doesn't apply.

For reference, this is the code we created:

.WikiaPage {
    .WikiaArticle {
        font-size: x; 
        line-height: y;

        .infobox {
           font-size: <old value>;
           line-height: <old value>;
        }
    }
}


BackgroundsEdit

With the new breakpoints, a little more of the background skins will be covered up by a slightly wider content space. The new 1084px width means your skin will be covered by an additional 17px of the content space, on each side. This extra coverage will also occur at the Desktop XL width we've been talking about (1238px). If you want to redesign your skin to make up for the 17px, we will be updating the Help:Background page to provide a step-by-step guide on what you need to do. Stay tuned!

FAQEdit

Common questions will be answered here.

  • What do breakpoints do?
    • Breakpoints are another way of creating a responsive website. Today we have a fluid layout which means that the site will adapt pixel by pixel. Breakpoints are different in that they adapt only at very specific points. This creates a more predictable experience which is especially important given the different ways users create content on Wikia.
  • Why has the readable space been reduced?
    • We have lowered the size of the maximum breakpoint to something more manageable for most users. The current site goes up to almost 1600px at its widest, which was causing some sizable UX (user experience) issues with modules, tables, and line lengths, among other things.
  • Why is the font size so large?
    • The font size at the largest breakpoint is set so that the number of words per line stays within an optimal reading experience. Over the years, a series of best practices have evolved that indicate a range of words and characters per line that deliver the best results. For most users, more content on the page is actually harder to consume rather than easier. The typographic changes are meant to correct this.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.