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

Assigned To

None

Authored By

	Peter
	Jun 5 2016, 7:55 PM

Project Tags

Referenced Files

	F4133255: barack.gif
	Jun 5 2016, 7:55 PM

	F4133110: barack-landscape.gif
	Jun 5 2016, 7:55 PM

	F4133114: bounty.gif
	Jun 5 2016, 7:55 PM

Subscribers

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-landscape.gif (1,334×750 px, 3 MB)

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.

Related Objects
Search...

Status	Assigned	Task
Declined	None	T137073 [EPIC] Page content should use full page width so users don't have to scroll horizontally
Open	None	T85587 Emulate mobile view on desktop preview page
Duplicate	None	T167188 Warn users if content they have created is terrible for mobile

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 added a project: Web-Team-Backlog-Archived.Aug 25 2016, 8:06 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 Web-Team-Backlog-Archived board.

• MZMcBride subscribed.Dec 4 2016, 9:47 PM

Jdlrobson removed a project: Epic.Apr 13 2017, 11:51 PM

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 added a subtask: T85587: Emulate mobile view on desktop preview page.

Jdlrobson moved this task from Needs Prioritization to 2014-15 Q4 on the Web-Team-Backlog-Archived board.

• Deskana mentioned this in T167188: Warn users if content they have created is terrible for mobile.Jun 6 2017, 7:16 PM

• Deskana created subtask T167188: Warn users if content they have created is terrible for mobile.

• Deskana removed a project: VisualEditor.

Jdlrobson moved this task from 2014-15 Q4 to Tracking on the Web-Team-Backlog-Archived board.Jun 29 2017, 9:09 PM

Jdlrobson edited projects, added: Web-Team-Backlog-Archived (Tracking); removed: Web-Team-Backlog-Archived.

Jdlrobson moved this task from Untriaged to Discuss further on the Web-Team-Backlog-Archived (Tracking) board.

TheDJ subscribed.Sep 19 2017, 1:33 PM

Jdlrobson moved this task from Untriaged to Team: Readers Growth on the MobileFrontend board.Jul 24 2020, 2:43 AM

Jdlrobson moved this task from Team: Readers Growth to Epics on the MobileFrontend board.Jul 24 2020, 3:11 PM