Page MenuHomePhabricator

[EPIC] Page content should use full page width so users don't have to scroll horizontally
Open, LowPublic

Description

We have pages today on mobile that are broader than the viewport or that have elements that are smaller. The long run goal should be to eliminate them all and there's couple things that will help us reach that goal:

  • Emulate mobile view on desktop preview page T85587 to make it easier for users to know what it looks like on mobile
  • Fine tune the CSS to make sure it doesn't happen
  • Use a tool in CI to find these pages. Use the same tool on production to find the pages and fix the problems.

One thing that makes this more complicated is that there are problems that we can find with PhantomJS/Chrome emulating a mobile phone, and some where we need to test on real devices.

Here's a couple of examples of what it looks like today:

Barack Obama landscape mode - some elements full width some half

Barack Obama portrait mode - some elements are to wide so we can scroll horizontal

Bounty (only Safari iOS) - there's elements that totally makes the width wrong

A good start would be to find a tool/create a tool that can find these issues and try to get a feeling on how big the problem is.

Event Timeline

Peter created this task.Jun 5 2016, 7:55 PM
Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptJun 5 2016, 7:55 PM
MBinder_WMF renamed this task from Use the full width (no more no less) to Page content should use full page width so users don't have to scroll horizontally.Aug 25 2016, 8:13 PM
MBinder_WMF triaged this task as Low priority.
MBinder_WMF moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.
Jdlrobson added a subscriber: Jdlrobson.

Emulate mobile view on desktop preview page T85587 to make it easier for users to know what it looks like on mobile

This is captured on T85587

Fine tune the CSS to make sure it doesn't happen

Most of these styles come from editors. When TemplateStyles arrives we'll be able to fix this.

Use a tool in CI to find these pages. Use the same tool on production to find the pages and fix the problems.

@Peter do you mind if I repurpose this task for this specific item? This seems very actionable and useful to help the other 2 problems although I'm not sure exactly what a solution would look like.

I'm not sure what the best way to log this would be.

The best place to do so would be within the edit preview as an edit warning, but I'm not sure how feasible this is in client side code inside Vector.

Can we throw warnings in JavaScript similar to how we do in PHP? Ideally, we'd then be able to identify problems programatically.

Jdlrobson renamed this task from Page content should use full page width so users don't have to scroll horizontally to [EPIC] Page content should use full page width so users don't have to scroll horizontally.Jun 5 2017, 6:07 PM
Jdlrobson added projects: VisualEditor, Epic.
Jdlrobson moved this task from Needs Prioritization to 2014-15 Q4 on the Readers-Web-Backlog board.
Jdlrobson moved this task from Backlog to Later on the Readers-Web-Backlog (Tracking) board.
TheDJ added a subscriber: TheDJ.Sep 19 2017, 1:33 PM
Jdlrobson moved this task from Backlog to Team: web on the MobileFrontend board.Jul 24 2020, 2:43 AM
Jdlrobson moved this task from Team: web to Epics on the MobileFrontend board.Jul 24 2020, 3:11 PM