As a part of my project to make the Free Software Directory mobile friendly, I can add extensions, modify the code, and format the pages the way I like. I have complete freedom to experiment on their development site as much as I want. It's wonderful to be able to work on something I really enjoy under the guidance of experienced mentors.

What is the Free Software Directory?

The Free Software Directory is a project of the Free Software Foundation that catalogs free software and allows people to download free software with verified free licenses. In 2011, it was re-launched as a wiki, using MediaWiki and Semantic MediaWiki to give users greater freedom to add, use or modify its textual data.

My work:

After setting up Trisquel (a fully free operating system and GNU/Linux distribution) on my machine and getting access to the development server, I was good to go by the second day of my internship. I had already done a lot of research, so I knew what I was going for.

MediaWiki offers a simple way to make any wiki mobile-optimized. The extension MobileFrontend provides various site transformations that make your wiki mobile-friendly. It comes with useful features like a mobile menu and section collapsing, and has a very simple reader-oriented interface. It can be installed very easily. People with less experience don't need to spend time learning how to understand complex code. The CSS of the mobile theme can also be edited to achieve desired customizations using MediaWiki:Mobile.css (which is a Web page on your wiki, a counterpart of MediaWiki:Common.css). In short, MobileFrontend can give a very effective mobile-optimized view without much hassle. (For more information, see the project page.)

I installed MobileFrontend from the MediaWiki extension distributor and extracted the files locally. Then I uploaded them to the extensions directory in the root, i.e. /var/www/w/extensions.

Next, I had to edit LocalSettings.php. I used Vim for that. Vim is a very efficient and simple text editor. I was going to use Vim for the first time, so I spent some time before that going through Vimtutor.

After ensuring that the extension was installed properly, I couldn't wait to see how the site looked on mobile. I opened its mobile view on my desktop, and that was when I realized that while MobileFrontend is able to make most of the pages mobile optimized, it doesn't necessarily make it "mobile friendly." I checked the development site for various bugs and text which was not properly aligned.

Issues I faced:

1. The HeaderTabs extension is incompatible with MobileFrontend. Only the first tab is displayed, and the rest of the tabs (and their text) disappear. The FSD uses HeaderTabs to display various entries. It was necessary to either fix those or disable them for mobile view. The solution: I was able to disable HeaderTabs using MobileDetect extension. It introduces a function called mobiledetect(), which returns true when a mobile device is detected, and false otherwise. I added a simple if statement in LocalSettings.php which excluded HeaderTabs from loading on mobile browsers.
2. The mobile menu looks incomplete; there doesn't seem to be an easy way to add important links to the mobile menu.
3. Noticed by Ian (one of my mentors): 2 column view doesn't merge into a single column during mobile view, i.e. things that appear on the right column in a wide desktop view should come in-line in the mobile view. This is caused by the styling of the form: float: left; float: right, etc. Solution: I replaced those styles with div classes left-float and right-float. Then I defined those classes in MediaWiki:Common.css and used a media query to bring the 2 columns in-line for screen size lesser than 800 px.
4. Suggested by Andrew (my mentor), tables appear crammed in small screens. I am currently working on this issue. With the help of flexboxes and CSS, I am trying to make long horizontal tables appear vertical during mobile view.

Things I plan to work on in the coming week:

1. Add the FSD logo to the mobile site
2. Theme the mobile site so that it looks more like the FSF Directory theme
3. Find a way to enable mobile view on desktops of smaller sizes (less than 800 px)
4. And most importantly, spend time learning, researching, and building something useful.