Redesigning MediaWiki with Responsive Design

The Pet Wiki Responsive DesignMost people that I know are constantly on their smartphones. Doesn’t it make sense to make the user experience for mobile as good as possible?

The Pet Wiki has been in need of an overhaul for quite some time now. The old design lasted us quite a few years, but I’ve been hankering to update the site for a while now. This time around, since we were making such drastic changes, we knew that there was no reason not to go responsive from the get go.

In case you don’t know what responsive design is, it’s formatting pages specifically for the device in which they will be displayed. That means that pages are formatted specifically for desktop, tablet and mobile browsing. The pages should look good wherever you’re viewing them. It can get a bit confusing while you are working, and it also means a lot of testing on each device, but the results are worth it.

Mobile Categories

The first thing that we did was figure out what we wanted the design to look like. I think that Wikipedia does a really nice job with their mobile design. It’s simple and it works. That sounds good to me. As they say, the biggest compliment that you can give someone is to copy them. I like to compliment Wikipedia a lot. The main thing that we copied from them is the way that they deal with long pages. Instead of making people scroll and scroll to get what they want, we put the content in dropdowns for each section. Less scroll on a mobile device is a good thing.

We changed our menu structure. Instead of having it on the left, we moved it to be horizontal under the header. For our mobile version, we use a dropdown menu for our main menu items.

Since we are using version 1.20+ of MediaWiki, the mobile switcher extension will not work on our site. Instead we added code in LocalSettings.php to switch between our mobile version and our regular skin (as suggested on the MediaWiki site). Here’s the code:

Since we diverged so much from the basic mobile version, we decided to create our own. If you want your mobile skin to look like Wikipedia’s skin, try using wptouch. Even if you don’t want to follow that skin exactly, it’s a really good place to start. I asked our wonderful developer if we could share our skin with everyone, but he said that our site is so different, that it really didn’t make any sense to do it.

At the same time that we came out with this new look and feel, we also released a Q&A section. It’s powered by Question2Answers, which is a Yahoo!Answers type of question and answer platform. We had to deal with creating a mobile design for that as well. It went pretty smoothly. One of the things that we needed to do was change the edit box to be much simpler for mobile. You don’t get all the nifty editing options that you get in the full version, but you can still ask and answer questions.

In general, what we have is a site that looks great and works well, no matter what device you are on. I am thrilled with the results.