As a Page creator I want to get a realistic viewing with different viewports when editing a page

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: Fragment Administration
• Labels:
  • d_20_06
  • fc_20_06
  • fc_20_07
• Epic/Theme:
  • Page_Authoring
• Epic Link: Allow Marketers to customize the Responsive Behavior of Layouts for each viewport

Intro/Context:

A page creator needs to get a realistic viewing when editing the content of a page. Today the user can also change the viewport to see how the page will look in that particular context. 

When navigating from a viewport to another viewport the page editor could be attempted to add a fragment. However allowing these interactions may generate confusion to the user that might believe that the added fragments are only for the specific viewport.

The goal of this story is to solve the two points above with a design that helps the page editor get a realistic viewing for each viewport while guiding him through the different interactions. Part of the solution for this is to hide interactions that are not specific to configuring the fragments for a given viewport.

- 

When changing from Desktop to Tablet, or Mobile

Then the user gets a realistic preview of how the page will be:

• with adapted headers and footers
• and in Edition mode

-

When using a Viewport (other than Desktop) in Edit Mode

Then the page editor has only access to:

• editing the Style configuration
• and the page structure

 

Mockups: figma 

Test Scenarios

Test Scenarios	Test Strategy	Kind of test	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd ? (unit or integration)	Could it be covered by POSHI?
The user can get a realistic preview of page when use non-desktop viewports	Critical	Manual	No	Yes	Yes
The user only can set up the Styles and Configuration of elements and access to Page Structure when use non-desktop viewports	Critical	Manual	Yes	No	Yes