Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-110707

As a UX Designer I want to view how my content page will be displayed on desktop, tablet and mobile devices

    Details

      Description

      Intro/Context:

      When creating a new user experience a UX Designer (sometimes Marketers) needs to think of the interactions the users will have when using all the devices : desktop, tablet and mobile. The screen size is different for each device. The UX Designer (helped by a Marketer) has to imagine clever ways to put the right piece of info in the right place and ensure the user experience is simplified/optimized. For this UX Designer will have to customize the display using specific styles/display for each elements on the content pages.

      Before starting to customize the styles/displays and think how to optimize the user interactions the UX Designer needs to view the content page on the Desktop, Tablet and the Mobile devices. That's the goal of this US, allow UX Designers to view a given content page on a desktop, tablet and mobile device.

       

      Given the user has created a content page with sections, fragments, styles, etc... 

       

      When visualizing a given content page

      Then the user should be able to select a device type either: Desktop, Tablet (vertical), Tablet (Horizontal), and a Mobile.

       

      When a given device view is selected

      Then the user should be able to resize the device screen to verify how the fluid page will be displayed on the device variants with the screen limits defined in the Style config.

      (in below example we have ranges for mobile devices 240px to 480px, in order to cover all kind of Mobile types)

       
      Figma Mockup
       

      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?
      Can select viewport of different devices when edit content page Smoke Manual Yes No Yes
      Can resize the width of device viewport when edit content page Smoke Manual No No Yes
      Can select viewport of different devices when edit fragmented page template Sanity Manual Yes No Yes

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Packages

                  Version Package
                  Master