<p>Greetings, fellow editors
</p><p>I have been working on some methods to structure a large volume of information and handle navigation of pages clusters (main article and subspaces + partials ecosystem) such as event pages, guides, combat mechanics and of course our front page. Without an index of these pages clusters, it is very difficult for readers find information in the cluster and for our editors to update the pages.
</p><p>I have been working on the issue for a while and I have reached some interesting results I would like to share. After that, I will invite everyone to take a look at the new front page design in a sandbox and give feedback / suggestions to improve the design before I make it official.
</p>
<h2><span class="mw-headline" id="Shiny_new_toys">Shiny new toys</span></h2>
<p>What I came up with last December is navigation hubs--a map of a cluster similar to
Template:Tutorialportal or
Template:Equipmentlist but designed as an individual page instead of a simple table. This allows the application of
visual hierarchy to the index without compromising the hierarchy of the page containing the index.
</p>
<div style="float:left;width:50%;">
<div style="position:relative;overflow:hidden;height:150px;margin:5px;background:rgba(250,250,255,0.1);;border:none">
<div style="position:absolute;z-index:2;overflow-y:scroll;overflow-x: hidden;height:150px;width:100%;">
<h3><span class="mw-headline" id="Tiles">Tiles</span></h3>
<p>This results in the creation of
Template:Tile. The template is designed to act like an item in search results. It gives a short snippet of the page and a link to the full page.
</p><p>The snippet is created by clipping a partial transclusion of the full page. Vertical scrollbar can be enabled as an option
</p>
</div>
</div>
<hr></div>
<div style="float:left;width:50%;">
<div style="position:relative;overflow:hidden;height:210px;margin:5px;background:rgba(148,101,55,0.4);;border:none">
<div style="position:absolute;top:-80px;opacity:0.2;z-index:1;">

</div>
<div style="position:absolute;z-index:2;overflow-y:hidden;overflow-x: hidden;height:160px;width:100%;">
<h3><span class="mw-headline" id=""></span></h3>
<p>
</p>
<dl><dt>Description
</dt><dd>A template to generate metro-styled tiles.
</dd><dd>These are float:left HTML dividers and they can be stacked horizontally or vertically, creating highly customized table cells.
</dd><dd>To stop tiles and other content from stacking horizontally, put
{{Clear}} where the stacking should stop
</dd><dt>Syntax
</dt><dd>Fill in the form below. Some fields can be omitted (see simplified sample for mandatory fields)
<dl><dd>
{{Tile</dd><dd>
| header=</dd><dd>
| content=
</dd><dd>
| image=</dd><dd>
| source=</dd><dd>
| size=
</dd><dd>
| width=</dd><dd>
| height=</dd><dd>
| rgba=</dd><dd>
| text-color=
</dd><dd>
| text-height=
</dd><dd>
| image-pos=
</dd><dd>
| opacity=
</dd><dd>
| source-pos=
</dd><dd>
| float=
</dd><dd>
}}
</dd></dl></dd></dl><dl><dt>Main arguments
</dt><dd>
header
<dl><dd>Set the text in h3 header. Default value is hidden
</dd></dl></dd><dd>
content
<dl><dd>Set the content written on top of the tile. To source the content from a partial within the main namespace, use
{{:<Page>}}
</dd></dl></dd><dd>
image
<dl><dd>Set the background overlay image. Default is hidden.
</dd></dl></dd><dd>
source
<dl><dd>This field creates a footer with a "See more >" link to the sourced partial. Default is hidden.
</dd></dl></dd></dl><dl><dt>Styling arguments
</dt><dd>
width
<dl><dd>Set the width of the tile. Default value is 50%.
</dd></dl></dd><dd>
height
<dl><dd>Set the height of the tile. Default value is 360px
</dd></dl></dd><dd>
rgba
<dl><dd>Set the color and opacity of the tile (see
CSS3 Colors tutorial for more information). Default value is 250,250,255,0.1
</dd></dl></dd><dd>
text-color
<dl><dd>Set the color of the text. This color styling is not restricted to rgba definition. Default value is set by the wiki's theme.
</dd></dl></dd><dd>
text-height
<dl><dd>Set the height of the inner text box. The text box is set to hidden overflow; texts that go outside the set height are cropped. Default value is 288px.
</dd></dl></dd><dd>
image-pos
<dl><dd>Set the position of the background image within the tile. Default value is top:0px;left:0px
</dd><dd>
opacity
</dd><dd>Set the opacity of the background image. Default value is 0.2
</dd><dd>
source-pos
</dd><dd>Set the position of the "See more" link and the footer. Default value is bottom:20px;right:10px;
</dd><dd>
float
</dd><dd>Set the float direction of the tile. Default value is left.
</dd></dl></dd></dl><dl><dt>Full width tile
</dt></dl>
{{Tile
|header=Resources management
|content={{:Sandbox/Guides/Resources}}
|source=Sandbox/Guides/Resources
|image=CL_Ooyodo_Kai_321_Full.png
|rgba=188,191,195,0.2
|width=100%
}}
<div style="float:left;width:100%">
<div style="position:relative;overflow:hidden;height:360px;margin:5px;background:rgba(188,191,195,0.2);;border:none">
<div style="position:absolute;top:0px;left:0px;opacity:0.2;z-index:1;">

</div>
<div style="position:absolute;z-index:2;overflow-y:hidden;overflow-x: hidden;height:288px;width:100%;">
<h3><span class="mw-headline" id="Resources_management">Resources management</span></h3>
<p>
Sandbox/Guides/Resources
</p>
</div>
<div style="position:absolute;z-index:3;height:16px;bottom:20px;right:10px;">
<p>
<span style="font-size:12px;">See more ></span>
</p>
</div>
</div>
<hr></div>
<dl><dt>Double height tile
</dt></dl>
{{Tile
|header=Resources management
|content={{:Sandbox/Guides/Resources}}
|source=Sandbox/Guides/Resources
|image=CL_Ooyodo_Kai_321_Full.png
|rgba=188,191,195,0.2
|height=741px
|text-height=628px
}}
<div style="float:left;width:50%;">
<div style="position:relative;overflow:hidden;height:741px;margin:5px;background:rgba(188,191,195,0.2);;border:none">
<div style="position:absolute;top:0px;left:0px;opacity:0.2;z-index:1;">

</div>
<div style="position:absolute;z-index:2;overflow-y:hidden;overflow-x: hidden;height:628px;width:100%;">
<h3><span class="mw-headline" id="Resources_management_2">Resources management</span></h3>
<p>
Sandbox/Guides/Resources
</p>
</div>
<div style="position:absolute;z-index:3;height:16px;bottom:20px;right:10px;">
<p>
<span style="font-size:12px;">See more ></span>
</p>
</div>
</div>
<hr></div>
<div style="clear:both;"></div>
<dl><dt>Quarter tile
</dt></dl>
{{Tile
|image=CL_Ooyodo_Kai_321_Full.png
|rgba=188,191,195,0.2
|size=300px
|width=25%
|height=180px
|text-height=113px
}}
{{Tile
|header=high opacity
|image=CL_Ooyodo_Kai_321_Full.png
|rgba=188,191,195,1
|size=300px
|width=25%
|height=180px
|text-height=113px
|opacity=1
}}
{{Tile
|header=reposition
|image=CL_Ooyodo_Kai_321_Full.png
|rgba=188,191,195,0.2
|size=300px
|width=25%
|height=180px
|text-height=113px
|image-pos=top:-60px;left:-60px
}}
{{Tile
|header=default
|size=300px
|width=25%
|height=180px
|text-height=113px
|image-pos=top:-60px;left:-60px
}}
<div style="float:left;width:25%">
<div style="position:relative;overflow:hidden;height:180px;margin:5px;background:rgba(188,191,195,0.2);;border:none">
<div style="position:absolute;top:0px;left:0px;opacity:0.2;z-index:1;">

</div>
<div style="position:absolute;z-index:2;overflow-y:hidden;overflow-x: hidden;height:113px;width:100%;">
<h3><span class="mw-headline" id="_2"></span></h3>
</div>
</div>
<hr></div>
<div style="float:left;width:25%">
<div style="position:relative;overflow:hidden;height:180px;margin:5px;background:rgba(188,191,195,1);;border:none">
<div style="position:absolute;top:0px;left:0px;opacity:1;z-index:1;">

</div>
<div style="position:absolute;z-index:2;overflow-y:hidden;overflow-x: hidden;height:113px;width:100%;">
<h3><span class="mw-headline" id="high_opacity">high opacity</span></h3>
</div>
</div>
<hr></div>
<div style="float:left;width:25%">
<div style="position:relative;overflow:hidden;height:180px;margin:5px;background:rgba(188,191,195,0.2);;border:none">
<div style="position:absolute;top:-60px;left:-60px;opacity:0.2;z-index:1;">

</div>
<div style="position:absolute;z-index:2;overflow-y:hidden;overflow-x: hidden;height:113px;width:100%;">
<h3><span class="mw-headline" id="reposition">reposition</span></h3>
</div>
</div>
<hr></div>
<div style="float:left;width:25%">
<div style="position:relative;overflow:hidden;height:180px;margin:5px;background:rgba(250,250,255,0.1);;border:none">
<div style="position:absolute;z-index:2;overflow-y:hidden;overflow-x: hidden;height:113px;width:100%;">
<h3><span class="mw-headline" id="blank">blank</span></h3>
</div>
</div>
<hr></div>
</div>
<div style="position:absolute;z-index:3;height:16px;bottom:20px;right:10px;">
<p>
<span style="font-size:12px;">See more ></span>
</p>
</div>
</div>
<hr></div>
<div style="clear:both;"></div>
<p>Tiles will be competing against current
tabview +
collapsible, as well as
tabber implementations in various pages clusters. The first implementation of Tile is in
Help:Guides and it demonstrates how a navigation hub might look like.
</p>
<div style="float:left;width:80%">
<div style="position:relative;overflow:hidden;height:340px;margin:5px;background:rgba(250,250,255,0.1);;border:none">
<div style="position:absolute;z-index:2;overflow-y:hidden;overflow-x: hidden;height:300px;width:100%;">
<h3><span class="mw-headline" id="Clickbox">Clickbox</span></h3>
<p>Remember that
Template:ItemStack I introduced two years ago? When linking to a page using the built-in image link, there exists a blind spot over the text area as seen below
</p><p><span style="position:relative;display:inline;">

<span style="font-size:12px; font-weight:800; position:absolute; color:#f61; right:4px;bottom:-18px; text-shadow: #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px">x7</span></span>
This issue has then been fixed using an invisible clickbox overlay, the same kind used in interactive maps:
</p><p><span style="position:relative;display:inline;">

<span style="font-size:12px; font-weight:800; position:absolute; color:#f61; right:4px;bottom:-18px; text-shadow: #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px, #fff 0px 0px 5px">x7</span><span style="position:absolute;top:-15px;left:1px;opacity:0">

</span></span>
</p>
</div>
<div style="position:absolute;z-index:3;height:16px;bottom:20px;right:10px;">
<p>
<span style="font-size:12px;">See more ></span>
</p>
</div>
</div>
<hr></div>
<div style="float:left;width:100%">
<div style="position:relative;overflow:hidden;height:210px;margin:5px;background:rgba(250,250,255,0.1);;border:none">
<div style="position:absolute;z-index:2;overflow-y:hidden;overflow-x: hidden;height:160px;width:100%;">
<h3><span class="mw-headline" id="Animated_tiles">Animated tiles</span></h3>
<p>Combining Tile, clickbox overlay and Oasis theme's default classes and it is possible to create a variety of responsive elements. One of which is as seen below
</p>
<div class="wds-button" style="position:relative;overflow:hidden;height:80px;padding:0px;float:left;width:18%;margin:5px;border:none">
<div style="position:absolute;top:-260px;left:-70px;;opacity:0.6;z-index:1;">

</div>
<div style="position:absolute;z-index:2;left:0px;bottom:0px;overflow:hidden;height:80px;">
<div style="color:white;padding:10px"><h3><span class="mw-headline" id="Na">Na</span></h3>
</div></div>
<div style="position:absolute;z-index:3;width:100%;80px;left:0px;top:0px;overflow:hidden;opacity:0">
<p>

</p>
</div>
</div>
<div class="wds-button" style="position:relative;overflow:hidden;height:80px;padding:0px;float:left;width:18%;margin:5px;border:none">
<div style="position:absolute;top:-270px;left:-40px;;opacity:0.6;z-index:1;">

</div>
<div style="position:absolute;z-index:2;left:0px;bottom:0px;overflow:hidden;height:80px;">
<div style="color:white;padding:10px"><h3><span class="mw-headline" id="No">No</span></h3>
</div></div>
<div style="position:absolute;z-index:3;width:100%;80px;left:0px;top:0px;overflow:hidden;opacity:0">
<p>

</p>
</div>
</div>
<div class="wds-button" style="position:relative;overflow:hidden;height:80px;padding:0px;float:left;width:18%;margin:5px;border:none">
<div style="position:absolute;top:-250px;left:-10px;;opacity:0.6;z-index:1;">

</div>
<div style="position:absolute;z-index:2;left:0px;bottom:0px;overflow:hidden;height:80px;">
<div style="color:white;padding:10px"><h3><span class="mw-headline" id="De">De</span></h3>
</div></div>
<div style="position:absolute;z-index:3;width:100%;80px;left:0px;top:0px;overflow:hidden;opacity:0">
<p>

</p>
</div>
</div>
<div class="wds-button" style="position:relative;overflow:hidden;height:80px;padding:0px;float:left;width:18%;margin:5px;border:none">
<div style="position:absolute;top:-260px;left:-10px;;opacity:0.6;z-index:1;">

</div>
<div style="position:absolute;z-index:2;left:0px;bottom:0px;overflow:hidden;height:80px;">
<div style="color:white;padding:10px"><h3><span class="mw-headline" id="Su">Su</span></h3>
</div></div>
<div style="position:absolute;z-index:3;width:100%;80px;left:0px;top:0px;overflow:hidden;opacity:0">
<p>

</p>
</div>
</div>
</div>
<div style="position:absolute;z-index:3;height:16px;bottom:20px;right:10px;">
<p>
<span style="font-size:12px;">See more ></span>
</p>
</div>
</div>
<hr></div>
<div style="clear:both;"></div>
<h2><span class="mw-headline" id="Front_page_overhaul">Front page overhaul</span></h2>
<p>All the above elements are designed to be used in the new front page design and future navigation hubs. As the front page is a high traffic area, it is necessary to make a site-wide announcement ahead of time. I myself am very interested in hearing feedback and suggestions from everyone on how to better organize and improve the design.
</p>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:60px;border-top:none;border-left:6px solid #006cb0;overflow:hidden;display:block;margin:5px;float:left;">
<p>Click on this message to visit the sandbox page.
</p>
<div style="position:absolute;z-index:3;width:100%;60px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p>
</div>
</div>
<p>
Feedback I'm looking for in particular are:
</p>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:30px;border-top:none;border-left:6px solid lime;overflow:hidden;display:block;margin:5px;float:left;">
<p>I expected <item> to be at <location>.
</p>
<div style="position:absolute;z-index:3;width:100%;30px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:30px;border-top:none;border-left:6px solid lime;overflow:hidden;display:block;margin:5px;float:left;">
<p>I expected <action> to have <effect>.
</p>
<div style="position:absolute;z-index:3;width:100%;30px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:30px;border-top:none;border-left:6px solid lime;overflow:hidden;display:block;margin:5px;float:left;">
<p>I use <item> a lot. Please make it more accessible.
</p>
<div style="position:absolute;z-index:3;width:100%;30px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:30px;border-top:none;border-left:6px solid lime;overflow:hidden;display:block;margin:5px;float:left;">
<p>I think <item> should belong to <dropdown> or <section>
</p>
<div style="position:absolute;z-index:3;width:100%;30px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:30px;border-top:none;border-left:6px solid lime;overflow:hidden;display:block;margin:5px;float:left;">
<p>I think <item> should be on top/below/before/after <item>
</p>
<div style="position:absolute;z-index:3;width:100%;30px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:30px;border-top:none;border-left:6px solid lime;overflow:hidden;display:block;margin:5px;float:left;">
<p>I prefer <item> to be of <style> or in <color>
</p>
<div style="position:absolute;z-index:3;width:100%;30px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:30px;border-top:none;border-left:6px solid lime;overflow:hidden;display:block;margin:5px;float:left;">
<p>I find <item> to be working incorrectly in <browser> or <monitor size>
</p>
<div style="position:absolute;z-index:3;width:100%;30px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div>
<div style="clear:both;"></div>
<h3><span class="mw-headline" id="Known_issues">Known issues</span></h3>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:30px;border-top:none;border-left:6px solid red;overflow:hidden;display:block;margin:5px;float:left;">
<p>Dropdown list should be displayed on hover, not click
</p>
<div style="position:absolute;z-index:3;width:100%;30px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:30px;border-top:none;border-left:6px solid red;overflow:hidden;display:block;margin:5px;float:left;">
<p>Color of animated tiles and buttons cannot be changed
</p>
<div style="position:absolute;z-index:3;width:100%;30px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:70px;border-top:none;border-left:6px solid gray;overflow:hidden;display:block;margin:5px;float:left;">
<p><s>Broken mobile compatibility</s>
</p>
<dl><dd>Issue dropped. Wikia uses its own mobile front page which cannot be edited
</dd></dl><div style="position:absolute;z-index:3;width:100%;70px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div>
<div class="wds-global-navigation__link" style="position:relative;width:100%;height:30px;border-top:none;border-left:6px solid red;overflow:hidden;display:block;margin:5px;float:left;">
<p>Monobook skin does not have comparable Oasis's button classes
</p>
<div style="position:absolute;z-index:3;width:100%;30px;left:0px;top:-20px;overflow:hidden;opacity:0">
<p>

</p><noscript>

</noscript>
</div>
</div> </style></item></item></item></section></dropdown></item></item></effect></action></location></item>