Jump to content

PCGamingWiki will use a Single Sign On (SSO) system to bridge wiki and forum accounts which is ready for testing. You may login using the 'Login with PCGamingWiki' button on both the wiki and the forum, which will soon be the only option. If you have any issues please message Andytizer on Discord.

Nicereddy

PCGamingWiki Skin v3.0

Recommended Posts

Soeb and I have been secretly working on a new skin for the wiki, and I figured I'd update you guys on our progress.

 

Here's a beautiful in-dev screenshot I took:

 

NJlRcmi.png

 

Note that this skin is still in Early Accessâ„¢, so there are some bugs I need to work out before I'm done.

 

(Don't do gradients, kids. They're bad for you.)

Share this post


Link to post
Share on other sites

This is very interesting!

 

Some things to consider-

integration with IP Board as it currently stands, or IP Board 4

responsiveness onto tablet/smartphone

social - we were thinking of switching the privacy-invasive iframes for static buttons, but they still need a place somewhere

is it possible to add new tabs? I'm thinking it would be nice to add new functionality, e.g. Controls:Game - might show all default controls for that game

Share this post


Link to post
Share on other sites

This is very interesting!

 

Some things to consider-

integration with IP Board as it currently stands, or IP Board 4

responsiveness onto tablet/smartphone

social - we were thinking of switching the privacy-invasive iframes for static buttons, but they still need a place somewhere

is it possible to add new tabs? I'm thinking it would be nice to add new functionality, e.g. Controls:Game - might show all default controls for that game

 

I'll need to give some thought as to where we should put the IPBoard integration as I can definitely see it's usefulness. I think we may want to try parsing the forums ourselves, since IPBoard loads about as quickly as molasses and would really clash with the skin.

 

iframes are the devil, so if we can avoid those that would be vastly preferable. I'm currently planning on placing the social icons in the footer, since they serve the same purpose as the social buttons without compromising our design or slowing down page load (based on tests Soeb and I have done, Twitter and Facebook seem to be the primary causes for our slow loading times). Hopefully I can get your blessing on that, since I think the benefits are fairly significant.

 

I've worked to make it responsive (the sidebar hides once you get below a certain browser window width, among some other changes), but right now I think it'd be best to just let the MobileFrontend extension handle that.

 

As for the tabs, that's outside my domain. Soeb or Garrett will likely be able to better answer that.

Share this post


Link to post
Share on other sites
is it possible to add new tabs? I'm thinking it would be nice to add new functionality, e.g. Controls:Game - might show all default controls for that game

 

MediaWiki has no native capability for awareness of additional associated namespaces. I think that would require a custom extension to avoid resorting to really nasty hacks in the skin. An alternate solution would be to use subpages, linking to those pages through links or templates in the content area rather than as part of the skin.

 

Your example of controls seems like it would be veering too much into the territory of a game guide.

Share this post


Link to post
Share on other sites

After doing some initial tests, I tried loading the Half-Life 2 article on both the production and dev wikis for comparison.

 

Note that there are a few variables that will effect this, namely advertisements (none on either since I was logged in) and the IPBoard integration on the production wiki. We currently intend to only show recent replies on the home page once we finish this up, more on that when we actually make it happen :P

 

Anyway, here's the data:

  • Production wiki: 90 requests, 479 KB transferred
  • Development wiki: 47 requests, 392 KB transferred

 

So we've managed to cut a little over 85 KB of data from the page load and almost halved the requests. In theory this should make our servers withstand larger influxes of traffic (emphasis on in theory, I am not a network engineer).

 

I'm not sure where else we can optimize it, most of the weight is currently from the cover photo and game screenshots (my icons are all incredibly small because they're SVGs :D). I'll have to work with Soeb to see if we can get longer lasting caching of things like our logo image, etc.

Share this post


Link to post
Share on other sites

I like the new look so far. The left side seems like it has too much wasted space now (as I mentioned to Soeb on IRC) but it's actually the same width as on the current skin.

 

Note that MediaWiki renders SVG as PNG rather than using the SVG file directly, so only SVG files that are part of the skin will actually be loaded as SVG.

 

EDIT: maybe the footer should include a mini disclaimer about affiliates (like IsThereAnyDeal.com and elsewhere) since so many of the stores covered on the wiki now have affiliate tags applied.

Share this post


Link to post
Share on other sites

I am super impressed with the progress on the skin, kudos guys.

 

Initially I added a 'link' to each H2 - this is a bit hackish as it uses javascript. Also it's not a good solution as it is 'inside' the H2 tag which isn't great semantically.

 

I noticed the new Wikipedia version has a cool 'hover' link where a link appears when you mouseover the H2. I wonder if we can do something comparable to that?

Share this post


Link to post
Share on other sites

Random question: Would the new skin support different colour schemes?

 

If so, adding various colour schemes would be a cool idea (ex. Original Steam format, Terminal look, etc.)

In theory you could do it with personal CSS styles, but they wouldn't be official.

 

 

I am super impressed with the progress on the skin, kudos guys.

 

Initially I added a 'link' to each H2 - this is a bit hackish as it uses javascript. Also it's not a good solution as it is 'inside' the H2 tag which isn't great semantically.

 

I noticed the new Wikipedia version has a cool 'hover' link where a link appears when you mouseover the H2. I wonder if we can do something comparable to that?

I liked that when I noticed it as well. I want to add it, but I'm not sure if it'd be weird should the floating ToC happen to float over the link icon as the user hovers. Probably not a huge problem, so I'd be willing to implement it.

Share this post


Link to post
Share on other sites

@ThatOneReaper if you'd like a personal custom color scheme, I can help set up a quick little CSS template to get you going. I'm just not too keen on officially supporting them, since that'd just create more stuff to keep updated.

Share this post


Link to post
Share on other sites

@Garrett: would it be possible to modify the way the Stub/Cleanup/Development tags work? I'm having a problem where the tags have different styles depending on what tag they are, which is rather annoying.

 

Case in point: http://dev.pcgamingwiki.com/wiki/Grand_Theft_Auto_V

 

Using both a Stub and Cleanup tag causes a space between the two that I can't fix without merging the templates into one single div. Something like this would be nice:

{{Notice|Stub|Cleanup}}

Although we should probably ask the community to make sure we get all the edge cases taken care of.

 

 

I also wanted to get everyone's thoughts on using white for the stub/cleanup icons vs. keeping them as they are?

Share this post


Link to post
Share on other sites

Some CSS change seem to be the source of the problem. Those templates don't have that issue on the old skin. It would be better to fix it in the CSS.

Share this post


Link to post
Share on other sites

This is really, really good I'm absolutely loving the new design. I assume all the font and such is placeholder? The navigation bar at the top would definitely need to be changed to be a bit easier on the eyes and the stub/cleanup icons could be reduced in size to be inline with the text but aside from that it's very clean and organized. I absolutely look forward to seeing this progress further.

Share this post


Link to post
Share on other sites

This is really, really good I'm absolutely loving the new design. I assume all the font and such is placeholder? The navigation bar at the top would definitely need to be changed to be a bit easier on the eyes and the stub/cleanup icons could be reduced in size to be inline with the text but aside from that it's very clean and organized. I absolutely look forward to seeing this progress further.

The font right now is Segoe UI, which I rather like. Are you seeing something different (Linux doesn't come with Segoe, AFAIK), or would you just prefer a different font?

Share this post


Link to post
Share on other sites

Some CSS change seem to be the source of the problem. Those templates don't have that issue on the old skin. It would be better to fix it in the CSS.

I'll have to play around some more with it then. In order to get it working the way I want, with the tag spanning the full width of the page, I need to use absolute positioning. Unfortunately, this takes it "out of the document flow", which requires I utilize extra padding <div>'s so content doesn't run under the tags. So that's why the tags aren't working the same as they were in the previous version. 

Share this post


Link to post
Share on other sites

The font right now is Segoe UI, which I rather like. Are you seeing something different (Linux doesn't come with Segoe, AFAIK), or would you just prefer a different font?

 

p5oC3M.png

 

This is currently what I see. The one in your screenshot however would be absolutely fine:

 

Q8hS9V.png

 

Just seems like it needs to be bolded. Maybe it's a CSS issue between browsers? I'm currently running Firefox.

Share this post


Link to post
Share on other sites

Oh, I noticed this but forgot to mention it - definitely an issue, but mostly with Windows having the worst font rendering. Looks all pretty on Linux.

 

But yeah, something has to be changed there.

Simple fix, don't use Windows :P

Share this post


Link to post
Share on other sites

Mirh has suggested that the wiki should have hover tooltips for references like on Wikipedia. This would definitely be a great addition. This feature is handled by the Reference Tooltips gadget which currently isn't installed on either the normal or dev wiki.

Share this post


Link to post
Share on other sites

p5oC3M.png

 

This is currently what I see. The one in your screenshot however would be absolutely fine:

 

Q8hS9V.png

 

Just seems like it needs to be bolded. Maybe it's a CSS issue between browsers? I'm currently running Firefox.

 

Unfortunately I can't test this very well since Windows renders text differently from OS X, but I've applied font smoothing for WebKit browsers and Firefox. I think that should fix your issue?

 

It didn't, I'm not sure why the font rendering is all messed up on Windows :/

 

Considering the font we're using - Segoe UI - is the bloody typeface they used in Microsoft's logo you'd think they'd have optimized it for use with Windows.

Share this post


Link to post
Share on other sites

Repost from IRC: I like the colors, but I'd prefer single pixel line border around tables instead of dark glow. Here is my mockup and with system requirements table with tabs idea:

 

8sFki4F.png

Share this post


Link to post
Share on other sites

I really like the tabbed system requirements table idea, so I'll keep pestering Soeb about that one ;)

 

As for the border, I personally like the drop shadow from a stylistic perspective, and I think it has enough contrast to be able to differentiate. I can increase the darkness of the drop shadow if you think that'd help, but I'm going to be a bit stubborn about changing it unless there are any other alternatives besides the border.

Share this post


Link to post
Share on other sites

It definitely has enough contrast to differentiate, I just feel like 5 pixel wide border is a bit too much. This is just a personal preference though, keep the shadow if you like it more.

Share this post


Link to post
Share on other sites

Some feedback regarding the look (after some review):

  • There should be some dividers for the table headers. It would keep it more organized and slightly easier to read. Use white for the colour.
  • Put back in the wiki-style table of contents. Just the button by itself makes it look "incomplete".
    • A suggestion: add the old TOC back while using the current button as a "constant" version when the main list is not visible (i.e. hide the button when at the top of the page).

Otherwise, I can't find any other glaring issues for now. Looks good.

Share this post


Link to post
Share on other sites

Adding on to the above, the Home page will also be rebuilt from the ground up. Hopefully loading a lot faster than the current home page by relying less on external scripts (twitter, YouTube, IPBoard).

 

EDIT: Also we made it sort of work on mobile!

Share this post


Link to post
Share on other sites

This post will be regularly updated.

 

Most recently we've switched all commonly used icons to SVG files - one of the many little things to look forward to.

 

To give some idea of what will be changing once we release the new skin:

  • All talk pages will be replaced by Flow
  • Developer/Publisher pages will be replaced with a simpler common namespace
  • Support for GSM in the Save game cloud sync table will be dropped (to not show preference towards custom solutions, plus it's mostly irrelevant)
  • Tabs (Preview/Changes) will be disabled in WikiEditor. You can still see a preview using the buttons at the bottom
  • Thumbs on pages will no longer be done in the usual MediaWiki format. This is to ensure uniform size across the wiki as well as better styling options
  • Infoboxes will now require an image at least 300px in width. Sorry, Steam covers won't cut it now
  • Game data tables, by limiting the values the System column can take. Sorry, but screw the nonsense in there - UPDATE: First steps taken on the prod wiki. Values other than (Windows, OS X, Linux, Mac OS, DOS, Steam, Origin, Uplay) place the page in the invalid template usage category.

Most other templates are keeping their usual look and inner workings. When we're ready to release the new skin, there will not be a period during which we'll be offering the old look - too many changes had to be made to make it all work the way it does.

 

Since the planned release is more than a month a way at this point, there's still a possibility more changes will be introduced, including:

  • System requirements tables, including template code (see the tabs above, as suggested by LDK) - no promises on this one though
  • Input settings tables, by expanding them to include more information
  • References, though probably without interference to the work of editors

Something not entirely related that I'd like to add is improved Upload pages. This is the ensure proper information about the source (covers), patch version (settings), and other minor information is provided. I am hoping to start a drive on converting/fixing old File pages some time at the beginning of next month. Why? By default, clicking on an image will now show a larger version with details right below the file. Doing this will take perfect advantage of the improved information sharing.

 

For an example of the various changes, watch Borderlands 2. Refer to Braid for new notice styles.

 

Everything above is still subject to changes, and we're always open to discussions on any of those topics. We're hoping to improve the experience of not only the readers, but also the editors of the wiki, so if you have any ideas as to what would make editing easier for you, don't hesitate to come forward.

While I like most of these changes, there are some nagging issues:

  • "Support for GSM in the Save game cloud sync table will be dropped (to not show preference towards custom solutions, plus it's mostly irrelevant)"
    • Define "mostly irrelevant". The service supports games that other services won't. I'm also not aware of any existing service that does what GSM can.
  • "Tabs (Preview/Changes) will be disabled in WikiEditor. You can still see a preview using the buttons at the bottom"
    • The tabs load much faster than the "Preview" button. That, and it adds unnecessary bulk to the page while I'm editing. I only use the "Preview" button when confirming links I added.
  • "Infoboxes will now require an image at least 300px in width. Sorry, Steam covers won't cut it now".
    • For the older pages like Bejeweled, the current Steam cover wouldn't be qualified (292×136). However, Steam covers got a new standard size some time ago (460x215). I would keep using Steam covers as an option since some games don't have retail releases.

On another note, if we are updating the tables, some suggestions:

  • Input Settings
    • Add in a field called "Input protocols" (or "Input APIs") that state what API the game is using (XInput, DirectInput, etc.)
  • API table
    • Add in a field called "VESA-compliant" that states if the game requires/supports VESA-compliant video cards (at least, this is how I understand this mode). For DOS games only.
  • Middleware table
    • Remove the "Input" row. It's borderline useless and I rarely encounter a game that uses the field.
  • System requirements
    • Do we have a field for sound cards? It would be useful for DOS games to state all supported sound chipsets instead of repeating the information from the API table.

One final thing: I would highly recommend that we finish/fix up the Editing Guide before we go public with the redesign. We should launch them both at the same time to drive home the "refreshed" feel of the wiki.

Share this post


Link to post
Share on other sites
On another note, if we are updating the tables, some suggestions:

  • Input Settings
    • Add in a field called "Input protocols" (or "Input APIs") that state what API the game is using (XInput, DirectInput, etc.)
  • Middleware table
    • Remove the "Input" row. It's borderline useless and I rarely encounter a game that uses the field.

The same might possibly apply to Audio API row.

I mean:

  • assuming the user is under Vista or newer Windows (and we already assume this)
  • given we ought to point out that every time a game is using DirectSound under those systems, audio is either degraded or just stereo

99% of times we should say in surround sound row that DirectSound hw restoration is required (and for the remainder 99% we'll have to say it's probably going to suck).

So, if we already mention it there, moving audio middleware row in audio template (and maybe merging it with EAX support row) might be a wise move.

 

Even though, I'm not really sure about details, and I'd like to hear other opinions.

Share this post


Link to post
Share on other sites

Work on the home page has begun!

 

Right now we're planning on including the following:

 

* Search & Suggested games (automatically selected daily from the Featured articles list which Soeb is working on implementing)

* Statistics

* Upcoming releases

* Project links

* Recent blog posts

* Recent forum posts

* Twitter feed

 

Thoughts?

Share this post


Link to post
Share on other sites

Progress Update:

 

We're very very nearly done! Home page is being finished up, thanks to Soeb for doing the beginning bits for the IPBoard integration for me, since I was too lazy to do it myself :P

 

GTWyeJ9.jpg

Share this post


Link to post
Share on other sites
Some thoughts on the Home page so far:

 

1. Looks really good on my MacBook Pro (1440x900 viewport) and on a tablet which suits the 2-column layout. However on a 1920px width screen, the content looks a bit out of place as it is centred - but the sidebar is stuck on the left with a big gap. It looks even stranger on a super high res screen because of the white space. My suggestion (just a suggestion, it's probably not the right move) is to fix the width and centre the content just for the Home page, for example:

 

.page-Home div#body-content input[type=search] 

{

position:inherit;

margin-top:10px;

}

.page-Home #main-column {

max-width:1100px;

}

.page-Home #masthead {

justify-content:center;

}

 

p6ANNNq.jpg

 

2. Instead of a 'Statistics' box we could have a 'Welcome' box which basically says, 'PCGamingWiki aims to list fixes and workarounds for every single PC game' - underneath this we can include stats, other welcome info.

 

3. Currently the 300x250 ad is not being placed nicely on the Home page. It's pretty essential for it to be displayed properly. I wonder if there's another way to 'call in' that ad on the home page, and put it inside the content.

 

4. Right now the sidebar isn't in the responsive view - this means that a lot of people won't be able to view the 'Games' list as OS categories Windows, OS X and Linux. These are amongst our most popular pages on the site. Perhaps we can integrate this into the Home just below the Welcome box.

 

5. We've removed RecentChanges from the front page, mostly because it doesn't cache properly. I'd love to get it if it can cache, but if it not then RecentChanges link needs to be somewhere on the Home page, as it is no longer on the sidebar.

 

6. I think if we can get the sidebar back that would probably be the best option!

 

 

Great work so far, looking forward to seeing this thing come together :).

Share this post


Link to post
Share on other sites

 

Some thoughts on the Home page so far:
 
1. Looks really good on my MacBook Pro (1440x900 viewport) and on a tablet which suits the 2-column layout. However on a 1920px width screen, the content looks a bit out of place as it is centred - but the sidebar is stuck on the left with a big gap. It looks even stranger on a super high res screen because of the white space. My suggestion (just a suggestion, it's probably not the right move) is to fix the width and centre the content just for the Home page, for example:
 
.page-Home div#body-content input[type=search] 
{
position:inherit;
margin-top:10px;
}
.page-Home #main-column {
max-width:1100px;
}
.page-Home #masthead {
justify-content:center;
}
 
 
 
2. Instead of a 'Statistics' box we could have a 'Welcome' box which basically says, 'PCGamingWiki aims to list fixes and workarounds for every single PC game' - underneath this we can include stats, other welcome info.
 
3. Currently the 300x250 ad is not being placed nicely on the Home page. It's pretty essential for it to be displayed properly. I wonder if there's another way to 'call in' that ad on the home page, and put it inside the content.
 
4. Right now the sidebar isn't in the responsive view - this means that a lot of people won't be able to view the 'Games' list as OS categories Windows, OS X and Linux. These are amongst our most popular pages on the site. Perhaps we can integrate this into the Home just below the Welcome box.
 
5. We've removed RecentChanges from the front page, mostly because it doesn't cache properly. I'd love to get it if it can cache, but if it not then RecentChanges link needs to be somewhere on the Home page, as it is no longer on the sidebar.
 
6. I think if we can get the sidebar back that would probably be the best option!
 
 
Great work so far, looking forward to seeing this thing come together :).

 

 

1. I'm on a MacBook Pro with a 2560x1600 viewport (1280x800 in CSS pixels), but I also have a second screen that's 1600x800, and on that it's really obvious that there's a problem with the size of the content, on larger screens it only gets worse.

 

The problem I've run into is this: I dislike all possible solutions to this problem using CSS, and using JS would be overly complex, slow down the page, and cause its own problems. It would also take longer to develop.

 

Right now, using breakpoints to create more columns could work, but the problem with that is the content would end up flowing from a theoretical third column into the second when it gets smaller, meaning the third column would either be awkwardly small or the second awkwardly large (depending on viewport width). The columns CSS property will fix these problems pretty much in their entirety, but that won't be a viable solution until October or November of this year. Firefox, Chrome, and Safari all support it right now, albeit prefixed. Unfortunately, Chrome and Safari's implementations of the spec are incomplete and very buggy. Trust me, I've tried to use them on other projects of mine, they are horrific.

 

The idea is that we'd wait for this to have proper support in Chrome and Safari this fall (Firefox should be fine even if it remains prefixed), then we can use it for the home page. It would allow the content to flow into more columns when the viewport width allows for it. It also includes the ability to "equalize" content so that the columns are as similar in height as possible.

 

As a hotfix, your suggestion may work, but I'm unsure if it would be annoying to use. Regardless, we're definitely going to get complaints for this problem, so it's something we need to work on fixing.

 

 

2. I've tried to have the header serve as the welcome card, as I assume searching or getting article suggestions would work as a navigational flow for a significant portion of users. I'd definitely be willing to try a welcome card with some navigational elements (e.g. OS categories and the like), recent changes, and statistics, but I'll need to give some thought on its implementation first.

 

 

3. I blame Soeb, it's his job to fix it :P

 

In all seriousness, this is a significant problem, especially since it messes with the header layout. I'm not sure exactly how to get the ad placed on the page, but I have some ideas.

 

 

4. See 2

 

5. See 2

 

6. That's planned eventually, but I want to get the skin out sooner rather than later, so its been pushed back for now.

Share this post


Link to post
Share on other sites

1. Sounds great.

 

2. Perhaps we can swap the header cards with OS links, e.g. below the search bar display 3/4 buttons with icons: All Games / Windows / OS X / Linux - these are commonly used navigation elements from the sidebar.

 

The Welcome card could be something like this:

 

Welcome

PCGamingWiki aims to list fixes and workarounds for every single PC game

About | Patreon / PayPal | Editing guide | Recent changes

{{Stats}}

 

3. Ideally the MPU ad would sit under the header. Maybe there's a way we can customise the Home page so that it uses a different PHP file skin from the rest of the site, then we could hard code a lot of the features we want inside it.

Share this post


Link to post
Share on other sites

Do you have a list of the other blocks we may include on the Home page? I recall discussing this at some point.

 

It would be nice to generate some lists of games automatically so that users can be drawn to the most popular articles at the minute, e.g.

Most visited game articles in the last 24 hours

Most visited articles all-time

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Who's Online   0 Members, 0 Anonymous, 93 Guests (See full list)

    There are no registered users currently online

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Forum Statistics

    1,193
    Total Topics
    6,717
    Total Posts
×