Last modified: 2012-09-27 01:10:59 UTC
As of last week, the most popular screen resolution of web surfers is now 1366 x 768. However, our page layout is optimized for 800 x 600 (which was the most popular screen res when the monobook skin was introduced). In other words, it's rather cramped by current standards. Since we can detect for window size with CSS media rules, there's no reason we need to keep it so cramped for people with large windows. For anyone with a reasonably large window, we should add some white-space padding. This is now a common practice for interface-heavy websites like Gmail. I think the main priority for adding whitespace should be around the content area (div#content), as this area needs adequate whitespace to visually separate it from the functional parts of the interface. It also just looks a lot more elegant with more space around the article content (more like a page from a book). I would suggest adding at least 0.5em of padding around div#content for people with adequate window size. As to what constitutes "adequate window size", I would suggest 800px, i.e. media="screen and (min-device-width: 800px)".
Created attachment 10426 [details] Adds an HD style sheet for the Vector skin which is activated by a media query This patch adds an HD style sheet for vector which adjusts various margin and padding properties to give the page a less crammed-together feel. All properties transition over 250ms and only activated if the browser is 1024px wide or greater.
See: https://gerrit.wikimedia.org/r/#change,5205 The only change was to use 900px instead of 1024px as the threshold. This should make it possible for 1024px wide screens to use the HD layout even if their browser isn't full screen, the window has a border, a scroll bar is visible, etc.
Created attachment 10427 [details] Screenshots of SD and HD versions of Vector This shows the differences between the two modes.
A new patchset has been added to https://gerrit.wikimedia.org/r/#change,5205 which removes the animation of top position from the personal tools, and instead gives the extra room above them to both layouts.
Looks good to me.
