Difference between revisions of "Nuvola Skin"

Revision as of 22:18, 22 November 2010

In the summer of 2009, I created the Nuvola skin for MediaWiki. I had originally started it in the summer of 2006 (less than a year after I had gotten my website.) It is based off of the Nuvola icon set for KDE 3 by David Vignoni and the MediaWiki homepage design draft I adopted for my homepage. It is based off of the Monobook skin, which is the MediaWiki default. I kept the content area and layout, because I liked it. I wanted to create a new skin because all of the MediaWiki skins suck. With Wordpress, everyone installs a new skin, and every site looks unique. With MediaWiki, almost no one uses a new skin.

I did not get much done in 2006, except some new file icons and a start to the CSS. I did do a full design on paper which I can not find anymore. In 2009, I decided to finish the skin. The skin is comprised of 3 main elements: far better drop downs, a new sidebar, and a new footer.

Drop Downs

The drop downs for MediaWiki were the first things I ever really coded with CSS. They were ugly and never really fit in with the site design. In addition, they did not work well in all browsers (although I can not conclusively determine that the new ones work better or if the browser manufactures changed their code). Lastly, the HTML code appeared before the content. On a text based browser, you had to scroll though the drop down menus every time, and it was not the best for search engines. The new skin puts the drop downs at the bottom of the HTML code and the CSS makes it display at the top. The drop downs also have icons and are spaced much nicer.

The drop downs are now hard coded to speed up the site. The old ones were dynamically created as the "sitenotice", and I think I could do that again except for IE8 which requires strict nesting adherence that MediaWiki did not do for me.

Sidebar

Because I removed the old personal area and page tabs, a lot more items needed to go in the sidebar. The challenge was to differentiate between the items to make them easy to scan. I dropped some duplicate items, such as the link to the Main Page because people know to click on the logo to go home. On browsers which support CSS print stylesheets (aka Not IE6), there is no print view icon. I want people to break out of the habit of looking for the print view button. I originally planned to put a notice saying "just hit print," but I decided against it.

I did not think that the old site bar made it easy for people to start editing. That is why I made the edit button big and yellow.

I also worked with commenting to make it easier to let people make a comment. The "comment" link is the same as clicking the comments tab and then clicking on the "+" tab. I still have a "View comments" link to go to the comments page. The links change colors depending on if they are active; "comment" lights up if a user is logged in (because must be logged in to edit), and "view comments" only lights up if there are comments.

I did not like the current split between navigation and toolbox; it seemed like some items should be in the other one and items were mixed between page specific (ie related changes) and site specific (ie special pages). Instead, I combined all of the links relating to the current page on top, and put the links to other pages on the site under the search bar (using the search bar as a divider).

I hid the rest of the personal links in a drop down. Modern browsers support hiding links under drop downs so skin authors can now be unafraid to use this technique. I think that MediaWiki should put it's best foot forward with a skin that uses "tricks" like drop downs. If a user insists on running in a reduced mode, than that user can switch themes (or a user agent sniffer could - for instance IE < 6).

Footer

I made the footer all about me. Most of my visitors arrive from Google, so I want them to find out a bit about me and some of my projects. I used to have a flickr widget and the MIT badge integrated in the sidebar, but that made the sidebar a mess of navigation and about me. In addition, I wanted to highlight my friendfeed. I had originally used the friendfeed widget code in my April 2009 homepage minor-redesign. I use their widget code, but apply my custom CSS rules on top of it to style it so that it is more compact. In the center column, I have my most recent 10 flickr sets. The flickr JS widget I was using before showed 3 random photos from my photostream. I organize using sets on flickr, so I wanted to highlight them. I wrote some PHP backend code which called the flickr API. It was surprisingly easy to do since the flickr API is so beautiful! In the third column, I added some lines about me and all of my site logos, which used to be in the header and sidebar. I really like the way the copyright statement turned out.

The 3 columns are fluid-width. It was a challenge to be able to maximize the space among all window-widths and it required a lot of fine tuning.

Extra Non-Skin Items

Google Search

I made some hacks to the internal pages for my site which makes it easier to use. They are not part of a skin per say. For search results, I display Google Custom Search results below MW search results in an iframe. I was able to "hack" the Google results so that it would search the query the user had entered. This is handy because the MW search is not the best and Google might have some results. It also allowed me to remove the separate Google box I had before.

Scribd iPaper

For documents, I have used the Scribd iPaper plug in JS to automatically display documents in the browser using Flash. This is a big usability boost because the document is immediately visible. Most users are looking to read, not edit the document. This presents the document quickly. A user does not need to hunt for a tiny download link. Plus, of course, it helps users who do not have Microsoft Word.

This was actually fairly easy to do using the Scribd API.

Current Status and Known Issues

The code is a bit of a hack and is only tested on my rules (ie must be logged in to edit). In addition, I keep finding and fixing stuff. Lastly, I am OK with this rendering a bit different in different browsers. I use the -moz-rounded-corners to have rounded corners in Firefox. Corners display square in other browsers. You may not be OK with this.

Plus, 4 level drop downs, the unprotect link, the ajax "watch" link, and the above mentioned Scribd mod are all broken, but should be fairly easy to fix when I get some time.

Raw Source

• http://wiki.theplaz.com/w/skins/nuvola/main.css?207
• http://wiki.theplaz.com/w/skins/common/commonPrint.css?207
• You can see the rest with your favorite webpage deconstruction tool: Web Developer Toolbar, Firebug, etc

Optimization

I used YSlow to do front-end optimization. I combined most of the images into 2 "sprites". It was the first time I ever used that technique. I minified and combined CSS and JS pages. I think that MediaWiki should have that feature since it would speed things up. I also played with HTML headings, expires, and e-tags to maximize caching. Right now, only the page and the Google Analytics code will load when you switch pages. I still have some back-end work to do, so the site is not as speedy as I would like.