New skin - PCGamingWiki: Overclocked

[Nicereddy 109]

After more than six months in development, we’re very happy to announce that our new PCGamingWiki skin is ready for release!

 

The skin has been developed primarily by our admins Nicereddy and Soeb, who handled the front-end design/development and back-end development (server, MediaWiki upgrades, etc.) respectively.As always, you can support our work and help pay for the site's hosting costs by becoming a patron on Patreon. It'd be greatly appreciated!

 

What's new

A lot, to the say the least!

 

Faster load times, decreased content payload

The home page, for example, has gone from 92 requests, more than 1000 KB of content, and a load time of 8.97 seconds all the way down to 26 requests, 686 KB of content, and a 2.33 second load time. A huge performance gain!

 

Game article pages have also seen significant improvement. Our article on Half-Life 2 has gone from 76 requests, 443 KB of content, and a load time of 4.47 seconds down to 26 requests, 370 KB of content, and a load time of 2.60 seconds.

 

Your load times may differ slightly depending on network speed, how hard our servers are currently being hit by traffic, and device/browser. The above statistics were the average of 5 tests each in Chrome 43, with a logged-in user (therefore without ads) on August 23, 2015 using a 2014 Retina MacBook Pro.

 

Based on Google's PageSpeed Insights test, we've made significant strides with regards to speed and UX on all platforms. Our previous home page's scores on Mobile Speed, Mobile UX, and overall Desktop were 64, 60, and 74 respectively. With the redesigned home page, the scores for Mobile UX and overall Desktop have become 96 and 82 respectively, an increase of 44 points overall! Mobile speed hasn't changed – and therefore isn't listed - because the majority of the points knocked off are from ads, which causes the score to jump randomly between as low as 55 and as high as 72.

 

How did we manage to get such an insane speed boost?

There were a lot of places where the wiki wasn’t doing things as optimally as we would have liked. We used separate files for every one of our icons, embedded information about posts on our forums in the sidebar of every page, and had a lot of extra, unnecessary stuff left over by MediaWiki.

 

In order to decrease the number of resources browsers download to load our articles, we’ve embedded almost all of our icons into the CSS stylesheets, combining dozens of files into one stylesheet.

 

We’ve also optimized the icons to be as small as possible while still looking essentially the same, credit to Soeb for his painstaking work on that front.

A lot of unnecessary resources have been cut off, which also contributed significantly to the savings.

 

Mobile support with responsive design

We want to make our content accessible to as many people as possible, so now the site is optimized for mobile devices as well as desktop. If you run into a problem with a game, it’s probably a lot easier to get on your phone and follow a step-by-step solution from there than it is to constantly switch between your browser and a game. Or if you’ve got a Steam Machine hooked up to your TV, checking for a fix on your phone is a lot easier than trying to use the built-in browser/keyboard with a controller. There are lots of other use cases for PCGamingWiki on a phone or tablet, and we think this’ll be pretty useful for a lot of people.

 

This also makes us, at least as far as we know, the first wiki ever to utilize a fully responsive design! Responsive design means that everyone gets the same content, no "m.pcgamingwiki.com", the content just changes to better fit the browser window.

 

Editing guide

After a year of work, ThatOneReaper deserves a huge amount of recognition, as well as congratulations, for his efforts in creating a comprehensive guide to editing PCGamingWiki. After multiple unsuccessful past attempts by other editors, this is a big deal, and will be a great help to future editors. Thank you to everyone who contributed to its development over the last year with their feedback and suggestions! If you’re interested in contributing information and fixes to the wiki, the Editing Guide is the perfect place to start.

 

Comparison images

 

 

 

Home page

 

 

 

 

 

Half-Life 2 article

 

 

 

 

Borderlands 2 Input Settings

 

 

 

 

Donate page

 

 

 

 

Mobile site

 

Miscellaneous improvements

The header's user information has been condensed into a simple dropdown userbar, heavily inspired by a cancelled Wikimedia extension built for Wikipedia. The Table of Contents has been moved to a floating button which expands when pressed. If you're not a fan, this feature can be disabled in Preferences. Clicking images now opens them in a lightbox, thanks to the MediaViewer extension. And of course, every aspect of the wiki's design has been polished, improved, and iterated upon.

 

Thank you

Thank you to each and every of our editors – whether you’ve made five edits or five thousand – your contributions are greatly appreciated, by other editors as well as the community as a whole.

 

If you’d like to support us, and help us better serve you all with faster servers, better loading times, and more comprehensive coverage of new titles, we’d love for you to check out our Patreon.

 

Thank you for the tremendous support over the last three and a half years, we hope this update helps make the wiki even more useful to the PC gaming community.

 

- The PCGamingWiki Team

 

Click here to view the article

[Andytizer 109]

Fantastic work on the new skin, it really really great! The biggest change is the well-executed mobile/tablet responsiveness which has always been an issue and had begun to affect search engine visibility of the site as well.

[RaTcHeT302 105]

Was the new design never tested on anything else other than Chrome and Mac? The font rendering looks completely different on Windows. Some elements are pretty much broken on Firefox.

[Nicereddy 109]

Was the new design never tested on anything else other than Chrome and Mac? The font rendering looks completely different on Windows. Some elements are pretty much broken on Firefox.

It was tested in Firefox on Mac and Firefox on Linux as well. The font rendering problems are caused by Windows' font rendering, and can't be fixed without messing up the text for OS X/Linux users.

[RaTcHeT302 105]

The main page isn't being rendered correctly for me at all though, or at the tables not supposed to be aligned?

 

This is what it looks like without my fixes.

[Marioysikax 83]

Was the new design never tested on anything else other than Chrome and Mac? The font rendering looks completely different on Windows. Some elements are pretty much broken on Firefox.

Well, it was publicly available to be tested by anyone for good month. Font rendering does look bit differend, but not worse. Maybe pixel or two larger font would've been nicer though. 

 

The main page isn't being rendered correctly for me at all though, or at the tables not supposed to be aligned?

 

This is what it looks like without my fixes.

There should be ads placed there if you aren't logged in. (and according to screenshot you aren't)

[Rich246 1]

Any chance of a dark/night mode theme?

[Nicereddy 109]

Any chance of a dark/night mode theme?

I've done this before with another site, it's incredibly difficult to maintain, especially if you don't have full control over the site's CSS (which we don't, because of MediaWiki). So unfortunately, this isn't planned.

[Rich246 1]

I've done this before with another site, it's incredibly difficult to maintain, especially if you don't have full control over the site's CSS (which we don't, because of MediaWiki). So unfortunately, this isn't planned.

I'd be happy with something very basic, just black in place of white, and black text something not black. :P

[DAOWAce 2]

Can't change the appearance anymore, huh?

 

I've always reverted back to the old MediaWiki look because I prefer it over the new-gen bloated mobile stuff that websites keep getting changed to. Unfortunately, that option is gone on PCGW, so it looks like I'm going to have to live with this new redesign.

 

Loads much faster, yes, but from a usability and visual standpoint, it's much worse to me.  I'd rather have a delayed page load than discomfort when viewing the site (though thankfully the article pages didn't change too much).

 

Even the font causes me some minor eye strain (Windows/Pale Moon); is there any way to change this on my end?

[RaTcHeT302 105]

Can't change the appearance anymore, huh?

 

I've always reverted back to the old MediaWiki look because I prefer it over the new-gen bloated mobile stuff that websites keep getting changed to. Unfortunately, that option is gone on PCGW, so it looks like I'm going to have to live with this new redesign.

 

Loads much faster, yes, but from a usability and visual standpoint, it's much worse to me.  I'd rather have a delayed page load than discomfort when viewing the site (though thankfully the article pages didn't change too much).

 

Even the font causes me some minor eye strain (Windows/Pale Moon); is there any way to change this on my end?

You should be able to through a custom wiki stylesheet, maybe, I can't really help you with that right now though.

 

Well, it was publicly available to be tested by anyone for good month. Font rendering does look bit differend, but not worse. Maybe pixel or two larger font would've been nicer though. 

 

There should be ads placed there if you aren't logged in. (and according to screenshot you aren't)

That's an odd place for an ad.

[BONKERS 26]

I'm not alone i'm guessing in that I was very fond of the old site layout and format on Windows/Firefox. And I am sad to see it go.

I will adjust however. One thing I really miss a lot is seeing the latest edits right on the front page. But like I said. I'll adjust!

Thanks for the work.

[Nicereddy 109]

I'm not alone i'm guessing in that I was very fond of the old site layout and format on Windows/Firefox. And I am sad to see it go.

 

I will adjust however. One thing I really miss a lot is seeing the latest edits right on the front page. But like I said. I'll adjust!

 

Thanks for the work.

Thank you for having an open mind :)

 

I'll miss the edits on the front page as well, I'm kind of thinking we should bring them back, or at least make a link to them more prominent.

[Garrett 175]

The wiki now shows up as "mobile-friendly" in Google searches on mobile devices, so the redesign also meets the expected standards in that regard.

[BONKERS 26]

Thank you for having an open mind :)

 

I'll miss the editest on the front page as well, I'm kind of thinking we should bring them back, or at least make a link to them more prominent.

Yup, I find myself already becoming acustomed to it.

 

Would there be by chance, any ability to set that as something like a user side option? To see the latest edits on the front page at like the very bottom?

[Illage2 1]

Love the new design.

[Nicereddy 109]

Yup, I find myself already becoming acustomed to it.

 

Would there be by chance, any ability to set that as something like a user side option? To see the latest edits on the front page at like the very bottom?

That'd be better answered by Soeb.

 

Love the new design.

Thank you :)

[GeneralFailer 1]

The tooltip for the "DRM-free" icon now says "Digital Rights Management (DRM)" which will be confusing for those not familiar with wiki's icons.

[Blackbird 49]

All DRM tooltips in general need more specific ones, but nobody responded to me :(

[Section 31 0]

Why does the front page with the new skin looks horribly broken on screen resolution over 2K (the laptop I'm using is 3200 x 1800) when viewed with the good ol' Fox browser?

 

[Nicereddy 109]

What version of Waterfox are you on? If I remember correctly, Waterfox is based off an older version of Firefox, and hasn't necessarily moved at the same speed as Firefox with implementing new web features. I may be wrong about that, though.

[Section 31 0]

Apologize. I typed too fast. Turned out I was using Waterfox version 27.x something, and some other sites also look broken when viewed with it. I just updated to the latest Waterfox (version 40.1.0) and the front page looks normal now, or at least that's what I assume.

[Nicereddy 109]

Ah, okay. Good to know it works :)

[Mars icecream 49]

​As I've said developing mobile app is completely unnecessary, it makes no sense to pour resources to development. Mobile application wouldn't bring in any money.

​If the mobile site is works fine (it does!), dedicated app can actually make the user experience worse.

[Nicereddy 109]

All DRM tooltips in general need more specific ones, but nobody responded to me :(

Missed this the first time through this thread, bumping.