[PAGES-112] Slightly rework the preview of pages Created: 08/Dec/16  Updated: 22/Sep/17  Resolved: 10/Jan/17

Status: Closed
Project: Magnolia pages module
Component/s: None
Affects Version/s: 5.5
Fix Version/s: 5.5.1

Type: Story Priority: Major
Reporter: Andreas Weder Assignee: Federico Grilli
Resolution: Fixed Votes: 1
Labels: usability, ux
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: Not Specified Time Spent: Not Specified
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Attachments: PNG File 1 Reworked preview.png     PNG File 2 Reworked preview.png     PNG File 3 Preview.current.png     PNG File 4 Choose resolution.future.png     PDF File Reworked mobile preview.pdf    
Issue Links:
dependency
depends upon MGNLUI-4108 Rework ui-app-page theme's preview st... Closed
relation
is related to DOCU-915 Reflect changes on pages app Closed
Sub-Tasks:
Key
Summary
Type
Status
Assignee
PAGES-114 Add mobile preview types in the combo... Sub-task Closed Federico Grilli  
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Release notes required:
Yes
Documentation update required:
Yes
Date of First Response:
Sprint: Basel 78
Story Points: 13

 Description   

The page preview on tablet and smartphone looks dated due to the (old) iPhone and iPad frames we show it in. It's also disorienting as switching between two previews causes the page to start at a different location inside the viewport. We've heard it several time that the page preview should be reworked.

We're going to rework the page preview like this (see attachment 1 and attachment 2):

  • We no longer show the frames of a tablet or a smartphone.
  • We top-align a page preview with the black preview bar.
  • When switching, we only change the width of the page, but always use the full available height.
  • We have two options per mobile preview in the combobox in the preview bar, one for "landscape", one for "portrait".
  • We expose the current resolution of the iframe in the status bar at the bottom.

Note that the main goal of this issue has been to remove the main pain points, and remove them quickly. We've thus designed a solution which we expect is somewhat easy to implement with the current means.

Widths to use

To remain aligned with how the current preview works, we'll stick with the widths of the original 1x resolutions of an iPad and an iPhone.

  • Desktop: width of the viewport available for the iframe
  • Tablet (landscape): 1024px
  • Tablet (portrait): 768px
  • Smartphone (landscape): 480px
  • Smartphone (portrait): 320px

The plan is to eventually move to a preview allowing you to actually pick from multiple, typical resolutions for each mobile device type. See attachment 4 for an example from Mozilla Firefox's built-in web developer tools.



 Comments   
Comment by Andreas Weder [ 08/Dec/16 ]

Attached a PDF prototype to allow you to preview the experience of the reworked page preview.

In OS X:

  1. Open in Preview.app
  2. Switch "View" to "Single page"
  3. Click on red link areas to cycle through all five previews
Comment by Jan Haderka [ 09/Dec/16 ]

Did we also consider possibility of showing side by side desktop, tablet and phone view for those w/ big enough screens? Or is that something we know that users don't really want?

Comment by Andreas Weder [ 09/Dec/16 ]

I'm bumping the priority of this issue as I had several requests in the past to remove the frames. The current mobile preview is commonly described to be a "pain point".

Generated at Mon Feb 12 06:15:45 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.