Jump to content
Andytizer

PCGamingWiki redesign and new features

Recommended Posts

After implementing the lovely new Forums, I took it on myself to improve PCGamingWiki skin to help integrate these aspects together to create a better user experience. Building in the forum's navigation was not an easy thing to do, but after much development it is now ready to be used.A list of new features:

  • Full single-sign on (SSO) - use the same account to login to PCGamingWiki and our Forums
  • Comment in our News section (like this article!) using the same account.
  • Files - upload, sort and rate obscure PC game fixes.
  • Gallery - upload screenshots.
  • Image comparison slider for Forums and News BBCode (see below).
Some things we are working on:
  • IRC autologin (nearly there)
  • New editorial system for uploading your own articles and promoting them to the front page.
  • New Wiki Home page.
Please report any bugs by commenting on this article.

 

Here's an image comparison shot of Saints Row IV:

The code (you can also use the button in the editor, in between the speech icon and h2):

[compimg]http://community.pcgamingwiki.com/uploads/gallery/album_2/med_gallery_1_2_53704.jpg|http://community.pcgamingwiki.com/uploads/gallery/album_2/gallery_1_2_39639.jpg|800|450|FOV stock|FOV modded[/compimg]

 

Click here to view the article

Share this post


Link to post
Share on other sites

Nice work andy. Some brief points about the new wiki layout

 

1) if the wiki/forums/news tabs are along the top they don't need to be duplicated on the sidebar as well.

2) The sidebar needs to be slimmed down - with the new design it is distracting now.

3) I think we should ditch or at least remove pictures from news/replies/review codes etc on the sidebar as well - with the new narrower article section it is distracting when trying to read.

Share this post


Link to post
Share on other sites

Can we (you?) like expend the website horizontally? Or squish some elements? Because I have 1440x900 monitor and some pages look like this:

kUDAlMkl.png

 

When it should be more like this (I used a scale function there is in Firefox to make it fit):

ZQ1pxBul.png

 

So, can we make it somehow look correct from resolutions 1366x768 (which seems to be pretty common amongs many laptops) and up? Or is someone already working on it?

Share this post


Link to post
Share on other sites

Can we (you?) like expend the website horizontally? Or squish some elements? Because I have 1440x900 monitor and some pages look like this ... So, can we make it somehow look correct from resolutions 1366x768 (which seems to be pretty common amongs many laptops) and up? Or is someone already working on it?

 

I have increased the min-width from 1200px to 1280px for desktop views so this should fix that issue for you. I use 1366x768 primarily so this has fixed that issue for me too. The other thing we could probably do is make the tables a bit more 'squishable' so that it doesn't have that odd behaviour - the Video settings template does collapse a bit and we should get the others to do the same.

Share this post


Link to post
Share on other sites

Couldn't you use both CSS min-width and max-width to have the central content area fit a certain minimum size when necessary while still expanding to fully fit a reasonable maximum size (1920px or whatever)? The default MediaWiki skin works like that.

Share this post


Link to post
Share on other sites

Here's our wrapper div:

 

#wrapper {
margin: 0 auto;
width: 87% !important;
min-width: 1250px;
position: relative; 
}
The max-width is not defined, but basically it will go up to 87% wide. Are you suggested we set a maximum width? The last time I suggested this it didn't go down too well (although this was about a year ago) - people really hated the idea of fixed width website!

Share this post


Link to post
Share on other sites

Relative widths waste space. See Wikipedia etc. for how the default MediaWiki skin completely fills the screen for all normal widescreen resolutions; as it is the new layout is wasting around 150 pixels on my 1440-wide monitor and it will be even worse on 1080-wide displays since you've used a percentage.

Share this post


Link to post
Share on other sites

44igrHx.png

 

Just a small problem I have with the design. On the sidebar the "Wiki" and "Toolbox" sections are dropdowns' whereas everything else opens automatically. I also think either the font is differently sized or just different? Not sure, but it looks weird to me. Personally, I'd prefer if those were opened automatically, the dropdown removed, aligned to the left, and then resized to the proper font-size.

 

EDIT:

 

cpzUiBf.png

 

I also discovered this. There's a little while line going across the header. Might just be me?

Share this post


Link to post
Share on other sites

cpzUiBf.png

 

I also discovered this. There's a little while line going across the header. Might just be me?

Can you tell me the resolution/browser/OS you are using? I can probably fix this if I can recreate the issue, it's actually similar to what I see on my iPhone.

 

I've adjusted the text below the toolbar to adjust the line-height, but I'm having an issue with overwriting the style, this should do it but it isn't working:

div#mw-panel div.portal div.body ul li { line-height:0.7em; }

I will also consider disabling the Vector extension's collapsable tabs, but I think the shorter line-height should fix the issue for you.

Share this post


Link to post
Share on other sites

I'm using 1366x768/Chromium (fully updated)/Ubuntu 13.04.

 

It only happens when I zoom out to 90% in Chromium, so you may be able to do it no matter what resolution your screen is.

Share this post


Link to post
Share on other sites

I'm using 1366x768/Chromium (fully updated)/Ubuntu 13.04.

 

It only happens when I zoom out to 90% in Chromium, so you may be able to do it no matter what resolution your screen is.

I believe I have fixed the issue for up to 75% zoom. However I will need further CSS help to get this to degrade properly at even lower zoom levels.

 

Could we have the blue background on the wiki too? A la http://i.imgur.com/UPRncbH.png

I would really like this too having a proper background and boxshadow that matches the rest of IPB. The solution is to have a different background by changing the body's background colour. However I am running into an issue where the sidebar height and background are not matching up correctly resulting in the following look.

bg.png

 

I wonder if it's possible to get Masked' Turk to consult on this one quickly?

Share this post


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

  • Found PCGamingWiki useful? Please consider making a Donation or visiting our Patreon.
  • Similar Content

    • By Nicereddy
      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

      [compimg]http://i.imgur.com/hozXFqj.png|http://i.imgur.com/36ogGom.png|720|450|Before|After[/compimg]
       
       
       
       
       

      Half-Life 2 article

      [compimg]http://i.imgur.com/o63g3Uu.png|http://i.imgur.com/nczkUE1.png|720|450|Before|After[/compimg]
       
       
       
       

      Borderlands 2 Input Settings

      [compimg]http://i.imgur.com/Etdw3g4.png|http://i.imgur.com/ASq3WhN.png|720|450|Before|After[/compimg]
       
       
       
       

      Donate page

      [compimg]http://i.imgur.com/geYbyV1.png|http://i.imgur.com/jsU8tpj.png|720|450|Before|After[/compimg]
       
       
       
       

      Mobile site

      [compimg]http://i.imgur.com/QIcDbXD.jpg|http://i.imgur.com/wAaig1v.jpg|375|667|Before|After[/compimg]

       

      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
    • By Nicereddy
      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
    • By Andytizer
      A list of new features:
      Full single-sign on (SSO) - use the same account to login to PCGamingWiki and our Forums
      Comment in our News section (like this article!) using the same account.
      Files - upload, sort and rate obscure PC game fixes.
      Gallery - upload screenshots.
      Image comparison slider for Forums and News BBCode (see below).

      Some things we are working on:
      IRC autologin (nearly there)
      New editorial system for uploading your own articles and promoting them to the front page.
      New Wiki Home page.

      Please report any bugs by commenting on this article.
       
      Here's an image comparison shot of Saints Row IV:
      [compimg]http://community.pcgamingwiki.com/uploads/gallery/album_2/med_gallery_1_2_53704.jpg|http://community.pcgamingwiki.com/uploads/gallery/album_2/gallery_1_2_39639.jpg|800|450|FOV stock|FOV modded[/compimg]
      The code (you can also use the button in the editor, in between the speech icon and h2):
      [compimg]http://community.pcgamingwiki.com/uploads/gallery/album_2/med_gallery_1_2_53704.jpg|http://community.pcgamingwiki.com/uploads/gallery/album_2/gallery_1_2_39639.jpg|800|450|FOV stock|FOV modded[/compimg]
  • Who's Online   0 Members, 0 Anonymous, 309 Guests (See full list)

    There are no registered users currently online

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Forum Statistics

    1,325
    Total Topics
    7,201
    Total Posts
×
×
  • Create New...