Responsiveness

By Adam Morsa - github: @ramblingadam

Problem:

With over 55% of all internet traffic coming from mobile devices in 2023, modern web applications must work smoothly across phones, tablets, and desktop computers. This versatility is known as responsiveness- when a website or application dynamically shifts its layout to match the size of the user's viewport on their device.

Solution Requirements:

The solution must ensure that our application’s interface smoothly adjusts depending on the user’s browsing device, ensuring a pleasant and consistent experience across browsing platforms.

Assumptions:

• We are utilizing Shadcn UI as our component library

Solution:

Traditionally, responsiveness is achieved by using @media queries in CSS. However, as our chosen component library, Shadcn, utilizes Tailwind, we will utilize Tailwind’s responsive utility classes.

Tailwind has responsive breakpoints built in, which the app’s design can be situated around. To apply a utility class based on the screen size is as simple as prefixing the class with sm, md, lg, xl, or 2xl which respectively correspond to 640px, 768px, 1024px, 1280px, and 1536px viewport widths.

For example, a div with className=” sm:w-full md:w-1/2 w-1/3" will be full width on screens 640px or less, 50% width on screens 768px or less, or 33% width on all other sizes screens.

A major advantage of Tailwind’s responsive design feature is its ability to evolve with future requirements. If we need to set our breakpoints, we can easily customize these by altering our Tailwind configuration.

As to our strategy of implementing responsiveness, we will design our application mobile-first, expanding out the design as user device viewports get progressively wider.

Security Considerations:

• Not applicable to this feature.

Cost Analysis:

• Tailwind is free and comes installed along with Shadcn.

Operational Readiness:

• As this solution is already built into Shadcn, it is ready to use and requires no additional packages or setup.
• If we encounter bugs or other issues with this solution, Tailwind’s extensive docs and community will ensure a fix is never far.

Solutions Considered and Discarded:

• Traditional @media queries: Would necessitate including CSS/SCSS. It is better to simply use Tailwind’s implementation- which can be customized if needed.
• When we were looking at ChakraUI, we would have been using Chakra’s array-based responsiveness. Since we are no longer using Chakra, this is a moot option.

Work Required:

• (L) Any team members not familiar with Tailwind or Tailwind’s specific responsiveness features will need to learn it. Fortunately, the documentation is excellent.

References:

• Responsive Design with Tailwind