Content is rightfully the heart of Wikia — it’s what we’re all here for: reading, creating, editing, and administering the information you care about. Page views on tablets are increasing, and the current experience on these smaller screens is a “zoomed-out” version of the desktop view (which is hard to read, hard to click on, etc.) We also know that users with larger monitor resolutions can be better supported if we utilize the available space on those displays. And for the past few years we've heard strong feedback that the article content space on any device is too small. With Darwin, one of our goals is to make content be the “king” by giving it a better share of real estate on the page, no matter the display.
Common convention on websites today is to use a responsive page layout, which means detecting screen resolution and delivering an experience based on that information. There are many types of responsive page layouts and a fluid layout was the best fit with our goals, as stated above. Darwin's fluid layout will be used on tablets and anything larger; smartphones will still use the ‘Wikiamobile’ skin as they do today.
Here’s how fluid layout works on Wikia.
The right rail at 300px wide
Right Rail
We didn’t want to make the right rail fluid. Why? At the end of the day it only needs to be 300px wide to support our medium rectangle ad — an ad that’s a reality of keeping Wikia running because it’s the best performing ad we have. We determined that the right rail modules work just as well in a static 300px width, and we wanted to return extra pixels to the article content space (the current rail is 330px wide). So with Darwin, the rail will always stay at 300px wide, no matter what resolution you have.
On tablets and other smaller displays, the right rail content will shift to display below the main content area, allowing the article to remain the focus. The one exception is the Search box, which shifts into the wiki header area.
Article Content
This is where you’ll see the biggest impact. Long live the King! Darwin has a minimum article content space of around 700px, no matter what resolution you’re on. For instance, the most standard resolution for users on Wikia is 1366px, representing about 25% of our total visits. With the fluid layout, users on that resolution will see the increased minimum article content space of about 700px (an increase of 30px from today). 35% of Wikia users are on displays larger than 1366px and can support more than 700px, so those users will see an even larger content space.
*This post formerly noted incorrect pixel amounts in the section above; these have since been corrected.
A maximum is just as important as a minimum. There comes a point where readability and layout suffer from a content area that’s too big, and the text and images get stretched too far horizontally. With that in mind we’ve established the maximum article content space at 1270px. This gives a huge jump to the article content space on large resolutions (an increase of 600px from today!) but ensures that we don’t allow article content to stretch so big that it’s hard to read and edit.
Add a photo to this galleryFont Size
If we grew the content space but maintained the current font size of 13px, readability and layout would still suffer on the larger supported resolutions. So Darwin will increase the standard font size to 14px, for all displays.
Embedded Media — Templates, Tables, Images, Videos, etc.
What does fluid layout mean for article content that's not just plain text? It depends on several factors, like what type of content it is and how it was coded by the community. For tables, templates and other highly customized content, using percentage-width values in the code will often be a better strategy with the fluid layout. This means that instead of using a hard-coded width value like '150px', you use a different value like '75%' that isn’t associated with a concrete unit of measure, but rather is flexible value and can easily adapt to a fluid page layout.
Tables will receive some great benefit from this change. I think we all agree that most larger tables would work better outside of the current 670px constraint. We solve this today by adding the jagged-edge “wide table popup” tool. With a fluid layout, tables will show as much as the content space on your resolution will allow. If the content space is still not big enough for the given table, we’ll continue to show the popup viewer.
For some templates, like infoboxes, a static size is usually desired, and content coded to have a fixed width won't be affected by the shift to a fluid layout.
Images and videos with standard coding will maintain their static size as well. However, tables with percentage-width coding can be used to display media so that it increases in size with the page layout.
Main Pages
The existing main page column tags will still function as they do today, with the right column simply reduced to 300px wide to match the right rail size on the rest of your pages. We know main page coding is often complex, with many containers and templates, and we've created Help:Darwin with some tips for making the transition easier when the time comes. Here again, coding with percentage width is the best approach.
Previewing Edits
Readers on various displays will have different viewing experiences. But most editors only have one screen in front of them. To help the conscientious editor know what others will see, we're planning on introducing some additional preview options. In addition to seeing, by default, how the published content will look on your own display size, you will also able to see the page at its minimum and maximum size.
This updated preview function is not part of the initial Darwin release, but will be coming soon! Watch for future blog post letting you know that you can check it out on the Community Test Wikia.
What will I need to change?
There will likely be changes necessary for wikias with heavily customized CSS. But since Darwin's wider release date is still to be determined, you'll have plenty of time to experiment with changes by using the Community Test Wikia and discuss options with other users in the Darwin Forum. We've prepared Help:Darwin with some technical details, and as we approach a wide release, Wikia's Community Development team will be available to help out as needed.
With regard to displaying general content, those who have a detailed eye may want to adjust their paragraph breaks, templates, tables, etc. to make them look as nice as possible. But you can be confident that in most cases, no updates will be needed on your article pages and your readers will only benefit when fluid layout arrives on your Wikia community.
