[EPIC] Improve mobile print styles
Closed, ResolvedPublic

Description

Generative Research

FINDING 20: People are increasingly getting information online, then consuming or sharing it offline. [1]

Based on research, the following user story is focused on

User Story

As a user, I want the ability to save a soft copy of an article from my mobile phone that I can read/share offline

Problem statement

Currently, when I print>pdf an article on mobilefrontend, the pdf is difficult to read and has issues around images

  • Text is unreadable without zooming in
  • Missing elements like article title, images etc
  • No branding or indication the content came from wikipedia
  • Bad typography

Here's how the pdf looks relatively on a big phone


Here's the actual print>pdf

Workflow

User uses print option to export pdf of an article. We will focus on android platform level implementation of print>pdf. The research also suggests android has significantly larger penetration in the areas we are focusing [1]

  1. User selects to print page from their browser
  2. User selects to save page as PDF
  3. System saves PDF to user’s download folder
  4. PDF displays with updated print styles

Acceptance criteria

Each printed article must contain the following:

    • Title
    • Wiki wordmark
    • Images
  • If an image has not yet been loaded due to lazy loading - no GAP must appear where the image is expected to be
  • Formulas and symbols must not be lazily loaded
    • Page number
    • Link to original article
    • Last edited date
    • Licensing
    • All tables in a readable format (readable as determined by Nirzar in the mockups)
    • Link to desktop version of print
    • Be in legal size format
    • Mobilefrontend on tablet should use desktop print styles. not the mobile print styles

Articles must not contain:

  • Disambiguation notes (ex: This article is about 2-dimensional Euclidean space. For the general theory of 2D objects, see Surface (mathematics))
  • Article notes (ex: main article, see also, further information, redirects, etc - these are currently stripped from the desktop print version)
  • Links to other articles appearing in black, styled as normal text
  • Every template currently stripped in desktop printing should be stripped for the mobile version

Style must be available (and tested on) for phones and tables on (at least) the following browsers:

  • Chrome (iOS and Android)
  • Android browser
  • Safari
  • Firefox (iOS and Android)
  • IE Mobile
  • Microsoft Edge
  • Opera Mobile
  • Opera Mini
  • UC Browser

Design

Goals

  • Improve readability of print>pdf on mobile
  • Improve typography
  • Include wikipedia branding
  • Fix bug for lazy loading images not showing up in Print
  • Fix bug for article title not showing up in Print
  • persist desktop print styles for mobilefrontend on tablets

Enabling the experimental print styles

  • Enable wgMinervaPrintStyles to true
  • Verify when printing that the print styles apply

Notes

  1. there will be no user interface change to mediawiki for this project. the first set of tasks is around fixing the browser-level print>pdf
  1. The base assumption of doing this change is that users print>pdf to read later and not to actually print from their phones
There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 10 2017, 2:13 AM
ovasileva triaged this task as High priority.Jan 10 2017, 2:13 AM
ovasileva added a project: Design.
Nirzar updated the task description. (Show Details)Jan 27 2017, 2:49 AM
Nirzar updated the task description. (Show Details)
Nirzar updated the task description. (Show Details)
Nirzar updated the task description. (Show Details)Jan 27 2017, 2:51 AM
Nirzar updated the task description. (Show Details)Jan 27 2017, 2:56 AM
Nirzar updated the task description. (Show Details)
Nirzar updated the task description. (Show Details)
Nirzar updated the task description. (Show Details)Jan 27 2017, 2:59 AM
Nirzar updated the task description. (Show Details)
Nirzar updated the task description. (Show Details)Jan 27 2017, 7:53 PM
Nirzar updated the task description. (Show Details)
Nirzar updated the task description. (Show Details)
Nirzar updated the task description. (Show Details)Jan 27 2017, 8:43 PM
ovasileva updated the task description. (Show Details)Jan 30 2017, 5:46 PM
phuedx added a subscriber: phuedx.Feb 2 2017, 6:04 PM

I'm not saying that we have issues with styling for PDF, but the image of a downloaded PDF (with a crying face icon), looks like, is from an iOS device, while presumably we are paying more attention to Android. Here is a PDF downloaded from Chrome on Android. Looks neat if you ask me.

On another note, there is an option to download HTML too, which displays as nicely as the live site.

As for

Fix bug for article title not showing up in Print

Can you point me to the bug? I see an issue with toggled sections not showing, but I am not sure if that's the same as the one you mention.

What about tablets? Do we want to render print styles as mobile (phone) all the time?

cmadeo added a subscriber: cmadeo.Feb 21 2017, 9:30 PM

@Nirzar - something we've potentially overlooked - when printing on mobile, the default "print" size is "letter" - the new styles don't match with this. I wonder how we can get around this.

phuedx removed a subscriber: phuedx.Feb 22 2017, 3:36 PM

@bmansurov - the title on the mona lisa article is from the infobox - here's an example of an article without an infobox (and a table):

  • lazy loaded images do not appear
  • article does not have a title

@bmansurov

I'm not saying that we have issues with styling for PDF, but the image of a downloaded PDF (with a crying face icon), looks like, is from an iOS device

What are you referring too? crying face icon?

Also @ovasileva answered the title question.

Nirzar updated the task description. (Show Details)Feb 28 2017, 10:40 PM

@bmansurov Oh i used an iphone for a picture, but it looks the same on android too. But I should update that as android is our primary user story.

ovasileva updated the task description. (Show Details)Mar 1 2017, 10:43 AM
Nirzar updated the task description. (Show Details)Mar 6 2017, 9:53 PM
Nirzar updated the task description. (Show Details)
Nirzar updated the task description. (Show Details)
Nirzar updated the task description. (Show Details)Mar 6 2017, 9:55 PM
Nirzar updated the task description. (Show Details)Mar 6 2017, 10:05 PM

T154964#3001642 needs to be answered, the pdf from ios and from android from @bmansurov look nothing alike. I've checked on my Android 5 Chrome and I see the same thing as @Nirzar

This smells, sounds and looks like an Epic and not a sprint task (IMO)

Also it would be great to have some QA pages that cover the different requirements so that there are clear QA steps when we start deploying this.

Nirzar added a comment.Mar 7 2017, 4:59 PM

@Jhernandez
I think that comment got lost because i thought Olga resolved it.

Looks neat if you ask me.

Ask a designer, maybe? :P lol not to be snarky but i would say "looks good to me" to a bad piece of code

the pdf from @bmansurov looks quite different than what i got on other android devices. and as @Jhernandez confirms, he is getting what I'm getting. does @bmansurov have any custom print settings? font size, paper size?

Also it would be great to have some QA pages that cover the different requirements so that there are clear QA steps when we start deploying this.

Good idea. some community member told me they use "Moon" article for print testing.

Nirzar added a comment.Mar 7 2017, 5:00 PM

Morever to answer the title question. The Mona Lisa written in @bmansurov 's pdf is just the title from infobox. it happens to be there. the actual title of the page is not printing.

@Nirzar, I think I picked 4x5 inches as the paper size from the print dialog.

Nirzar updated the task description. (Show Details)Mar 7 2017, 5:07 PM
ovasileva updated the task description. (Show Details)Mar 7 2017, 5:20 PM
ovasileva renamed this task from Print styles - mobile to [EPIC] Print styles - mobile.Mar 7 2017, 5:25 PM
ovasileva renamed this task from [EPIC] Print styles - mobile to [EPIC] Improve mobile print styles.

Removing the sprint tag, as we have split this task into multiple portions and created an epic - moving to epics column

Nirzar updated the task description. (Show Details)Mar 14 2017, 5:52 PM
Nirzar updated the task description. (Show Details)Mar 14 2017, 6:13 PM
Jdlrobson updated the task description. (Show Details)Apr 18 2017, 11:44 PM
Jdlrobson closed this task as Resolved.
Jdlrobson claimed this task.
Jdlrobson added a subscriber: Jdlrobson.

!