Board Thread:Darwin/@comment-5275700-20131113005820

Fluid layout will be releasing to all Wikia communities very soon! This is the first in a series of Forum posts that will help admins prepare for the change.

The main page is often one of the most complicated pages on a wikia, with many possible functions from menus and news feeds to art showcases and policy updates. The content is typically organized by using the column tags, which creates a right column the same size as the article page's right rail.

The left column
The most important content on the main page is usually found in the left column. Like the article space on other pages, this area has fluid behavior to ensure it remains the primary focus for the reader. When creating and modifying any containers for the left column, it’s best to use a percentage for the width property so that the proportions of the layout are the same for all viewers. For example, if a centered container is set to use 80% of the available width, users will always see a margin of 10% on either side, whether they’re on a small laptop or a larger gaming monitor. Previously, with a fixed-width layout, defining a pixel width of 536px would have made a container use 80% of the left column’s horizontal space. But with a fixed-width value on a fluid page, the container wouldn’t get wider along with the overall layout, and might appear odd to users on larger screens.

Content inside main page containers can have fluid behavior as well. Text passages will automatically wrap by default, just like on fluid article pages. The Characters gallery on the Breaking Bad main page and the Champions roster on the League of Legends main page are both great examples of image lists that automatically adjust to the variable width.

Right column
Darwin’s fluid layout reduced the right column on articles (also called the “right rail”) from 330px wide to 300px wide. This same change is applied to the main page right column. Right column content that’s set to always be 330px wide may need to be adjusted. It’s fine to simply subtract 30px from any of the values that you have now, but note one thing &mdash; when a Wikia community is viewed on an iPad (or another tablet) in “portrait” orientation, the main page right column’s content moves below the left column. (The same thing happens to the right rail on articles.)

You don’t have to have an iPad to observe this behavior. Just make your browser window narrower when viewing a community with fluid layout (like Community Central) and you’ll see the right column’s content move to the bottom of the page. Also note that the items float left. So for these reasons, you may want to consider defining your right column containers’ width as 100% as well. This will allow them to use the maximum possible space in the tablet-portrait configuration of the main page.

Sliders
Slider galleries are most often used on main pages. The dimensions of a slider are always 670px by 360px, and a slider will always be center-aligned in the space it occupies. In a fluid main page left column, users on larger screens will see margins on both sides of a slider. If you’d like to do more with that background space, it’s possible to place a slider inside its own container, as seen on the Spanish Yu-Gi-Oh! main page.

If you have any tips to share or examples of how to make great fluid main pages, please feel free to reply on this thread! If you’re an admin and you’d like some help preparing your community for fluid layout, let us know here.

For more tips on getting ready for fluid layout, see also:
 * Preparing your background for fluid layout
 * Fluid layout and custom CSS

 