Page MenuHomePhabricator

increase whitespace for large window sizes
Closed, ResolvedPublic

Description

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)".


Version: 1.20.x
Severity: enhancement

Details

Reference
bz36047

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 12:20 AM
bzimport set Reference to bz36047.
bzimport added a subscriber: Unknown Object (MLST).

Created attachment 10426
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.

Attached:

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
Screenshots of SD and HD versions of Vector

This shows the differences between the two modes.

Attached:

Vector-SD-and-HD-Comparison.jpg (1×966 px, 92 KB)

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.