Page MenuHomePhabricator

Drop tablet threshold to 720px
Closed, ResolvedPublic

Description

Try browsing categories of media on the mobile web site − such as this example on Wikimedia Commons on 720px ( Samsung Galaxy S5 mini.)

With a big screen, five images are displayed per row. If reducing, this wraps to four images (good so far), and then to one image per row, even though there is a lot of space available − see attachment

.

This makes it very hard and ugly to browser Wikimedia Commons categories.

To improve rendering in this browser and other similar devices I would suggest we switch the threshold for tablets down to 720px.

Reproduced under Chromium, Firefox, and Firefox for Android

See also: T55130: Categories should be displayed in a responsive table and be mobile friendly.

Event Timeline

JeanFred created this task.Dec 10 2014, 6:26 PM
JeanFred raised the priority of this task from to Needs Triage.
JeanFred updated the task description. (Show Details)
JeanFred added a project: Readers-Web-Backlog.
JeanFred changed Security from none to None.
JeanFred added a subscriber: JeanFred.

Thanks for taking notice of this.

Two small things:

1/ I cannot wait for Trello duplication in Wikimedia bug reporting to be well behind us ;

2/ I understand this is probably of no importance, and never meant as a bad thing, and is just an internal thing, and whatever. But it is not exactly pleasant to read that a problem you reported was moved to list « Meh ». It does not sound exactly very welcoming (at least to my non-native ears).

Jdlrobson added a subscriber: Jdlrobson.

Styling the galleries is currently very tricky due to the way the parser works and the fact the parser knows nothing about the resolution that the gallery will be rendered on.

We did our best to style galleries / category galleries on mobile but I think there is little more we can do here technically without help from Parsoid or rewriting the parser.

If anyone has a suggested way forward please let me know.

This is not actionable so moving back to in discussion. I'm not sure how we solve this one.

Something I do not get: the desktop site does wrap galleries in categories properly, doesn’t it?

@JeanFred define properly.. if you look closely you will see inline styles setting widths on each of the gallerybox class elements. In the example you gave (https://commons.m.wikimedia.org/wiki/Category:Foreground_flowers) it sets a width of 155px using an inline style. Given a mobile device usually has a maximum width of 155px the problem here is as soon as you have 3 of these, the rendering breaks.

https://commons.wikimedia.org/wiki/Category:Foreground_flowers has the same issue
Open up your JavaScript console and run:
$( '#bodyContent' ).css( { width: 320, border: 'solid 1px red' } )

You'll see the commons categories only span one line and are hard to read there also.

At 768px on the mobile site, the category renders nicely.
We probably want to something in between 320px and 768px.

Out of interest the screenshot you posted - what screen resolution is that and what browser?

Steinsplitter moved this task from Incoming to Backlog on the Commons board.Mar 11 2015, 12:50 PM
Jaredzimmerman-WMF triaged this task as Low priority.Mar 12 2015, 3:05 AM
Jaredzimmerman-WMF moved this task from Incoming to Stalled/More Info Needed on the Design board.
Nemo_bis updated the task description. (Show Details)Apr 23 2015, 1:47 PM
Restricted Application added a subscriber: Steinsplitter. · View Herald TranscriptAug 18 2015, 5:17 PM
Jdlrobson closed this task as Resolved.Nov 4 2015, 5:30 PM
Jdlrobson claimed this task.

I can't replicate this any more.

JeanFred reopened this task as Open.Nov 4 2015, 9:14 PM

I can't replicate this any more.

Well.

Chromium 45Firefox 41.0.2Firefox for Android

Could you let me know what browser resolution you are using on all of those?

They look better than the original screenshot in the description.

The screenshots you share should only occur on browsers with resolutions between 320 and 768px which are very rare.

At 768px I see this on all browsers:

Could you let me know what browser resolution you are using on all of those?

Anything equal or inferior to 768.

ChromiumFirefox

They look better than the original screenshot in the description.

As I have been answered in T78174#987651, please « define better »

The screenshots you share should only occur on browsers with resolutions between 320 and 768px which are very rare.

I am using a Samsung Galaxy S5 mini. I was not under the impression that it was either antediluvian (released 15 months ago ?) or confidential device, but I can be mistaken. Specs indicate a resolution of 720.

Thanks for clarifying. The resolution of the device really sheds some light. I'll update the bug.
We may want to drop the 768px threshold to 720px to compensate.

Jdlrobson renamed this task from Display of images in categories on mobile web site present only one image per row starting at some resolution. to Drop tablet threshold to 720px.Nov 4 2015, 10:41 PM
Jdlrobson raised the priority of this task from Low to Normal.
Jdlrobson updated the task description. (Show Details)

(I'd rather get everything rendering optimised for your device - it seems you are getting a mobile experience rather than the tablet one you deserve)

Change 260510 had a related patch set uploaded (by Jdlrobson):
Decrease tablet threshold to 720px

https://gerrit.wikimedia.org/r/260510

@Jdlrobson: I'm removing Google-Code-In-2015 again here because you have provided a patch yourself.

Please don't fixate too much on the number being the wrong. We can change it again if necessary. The important thing is to cover the original bug and improve things a little bit more.

Change 260510 merged by jenkins-bot:
Decrease tablet threshold to 720px

https://gerrit.wikimedia.org/r/260510

Jdlrobson closed this task as Resolved.Dec 23 2015, 9:15 PM