Understanding Responsivity

In this topic, we're going to dive in regarding how respositivity works on the Virtual Fitting Room.

Overview

The Virtual Fitting Room is designed to provide a seamless and responsive experience across a variety of mobile viewports available on the market. Responsivity is a crucial aspect to ensure users have an optimal and consistent experience regardless of the device they are using.

Mobile Viewports

Our layout has been optimized to function effectively on a wide range of mobile devices, including smartphones and tablets (albeit in landscape mode only). This includes but is not limited to devices with various screen sizes, resolutions, and aspect ratios.

List of supported smartphones (2023)

We designed the VFR to cater to a variety of smartphones available on the market. The application incorporates viewport media query rules to ensure optimal responsiveness. Here is a sample list of smartphones considered during the development and testing phases:

1. Apple iPhone Series:

   • iPhone 13 Pro Max

   • iPhone 13 Pro

   • iPhone 13

   • iPhone 13 mini

   • iPhone 12 Pro Max

   • iPhone 12 Pro

   • iPhone 12

   • iPhone 12 mini

   older series are not listed but can work if the client's browser matches the Can I Use guideline

2. Samsung Galaxy Series:

   • Galaxy S21 Ultra

   • Galaxy S21+

   • Galaxy S21

   • Galaxy S20 Ultra

   • Galaxy S20+

   • Galaxy S20

   older series are not listed but can work if the client's browser matches the Can I Use guideline

3. Google Pixel Series:

   • Pixel 6 Pro

   • Pixel 6

   • Pixel 5a

   • Pixel 5

4. OnePlus Series:

   • OnePlus 9 Pro

   • OnePlus 9

   • OnePlus 8T

   • OnePlus 8 Pro

   • OnePlus 8

   older series are not listed but can work if the client's browser matches the Can I Use guideline

5. Xiaomi Series:

   • Xiaomi Mi 11 Ultra

   • Xiaomi Mi 11

   • Xiaomi Mi 10 Pro

   • Xiaomi Mi 10

   older series are not listed but can work if the client's browser matches the Can I Use guideline

Please note that this list is not exhaustive, and our development and testing processes take into account the evolving landscape of smartphones. Users with devices not listed here are still encouraged to use the Virtual Fitting Room.

Responsivity Features

Adaptive Layouts: We dynamically adjust the layout to accommodate different screen sizes. This ensures that users can interact with the application comfortably on devices with both smaller and larger screens.

Resolution Independence: Our design system was made to be resolution-independent, meaning the Virtual Fitting Room adapts its visual elements to maintain clarity and functionality regardless of the device's display resolution.

Corner Cases and Adjustments

Despite our thorough testing and optimization for various mobile viewports, corner cases may arise due to the ever-evolving landscape of mobile devices. Make sure to let us know about it so adjustments can be made.

Guidelines for testing viewport responsivity:

While the Virtual Fitting Room is optimized for various mobile viewports, it's essential to follow certain guidelines when testing responsivity to maintain a reliable and consistent experience.

Avoid Unconventional Adjustments

We advise against randomly adjusting a device's screen into unusual aspect ratios or orientations during testing. Such unconventional adjustments may not accurately represent the typical user experience and could lead to unexpected behavior.

Reporting issues

We're always ready to make the VFR better. Make sure to contact us through the following channels:

• Support: [e-mail]

• Technology Team: [e-mail]

• Luiz Nickel (Head of Technology): [e-mail]

• Inara Figueiredo (Head of Product): [e-mail]