User:TheDJ/responsiveContent

Demonstration of the gadget. (Note that this video also demonstrates another script that I'm working on, called mobile Vector. Mobile Vector is NOT part of this gadget)

Responsive content is a gadget to enhance the browsing experience of Wikipedia content on narrow and wide screen formats to be more enjoyable. It is also very handy to give you an idea about how something might look like inside the mobile version of Wikipedia.

Features

Narrow layout (600px)

• Clears thumbnails from the surrounding content
• Limit the width of tables and makes them scrollable
• Limit the width of images and infoboxes to your screen width
• Smaller font size on high density displays (Retina screens), to fit a bit more content
• Full width images on Retina screens, enlarging them if required
• Reduces amboxes to a single line summary (English Wikipedia). Click to expand their descriptions.

Wide layout

• In main namespace, will move all right floating images and infoboxes into a right hand sidebar, when the window is larger than 1500px.
• In main namespace, will move all left floating images into a left hand sidebar, when the window is larger than 1900px.
• Content of sidebars is 'filled' out when possible (on retina screens)
• Increases the font size slightly
• Limits width of the content to 1900 pixels, and will then center it

Installation

To enable the script, simply:

• go to the Gadgets section of your Special:Preferences.
• under Appearance check "Improved appearance for mobile, narrow and wide screens"
• click the Save button.

Limitations

• {{Taxobox}} is not recognised as an infobox atm. This is because it is wrapped in a div.
• Left floating small mboxes are currently not supported. mbox-small-left
• Sidebars only work in the main namespace (so not in draft)
• Only works (/tested) in combination with the Vector skin.
• It adds little value to mobile users. This is because Vector is not really suitable for mobile usage. I'm working on another script, called 'mobile Vector' to improve this, but due to the large amounts of UI controls, this will take a bit more time). (See User:TheDJ/mobileVector.css)
• It cannot detect bad quality thumbnails (150px) that probably should not be good sidebar candidates (parser decision engine to add html annotations would be required here)
• {{Overlay}} as e.g. used in GNOME does not display the images where the others are.

Please report any problems on my talk page.

Porting

All code related to this gadget can be found under Special:PrefixIndex/MediaWiki:Gadget-responsiveContent. You are welcome to port this gadget over to other wikis under the term of CC BY-SA 3.0 or the GFDL.