Improve Responsiveness of Facilities Block on Single Accommodation Template

[ashleyshaw]

Improve Responsiveness of Facilities Block on Single Accommodation Template #371

Overview

The current Facilities block on the single accommodation template needs to be more responsive, especially on smaller screens. The layout should dynamically adjust based on screen size to improve usability and ensure a seamless experience for users browsing accommodation listings.

The layout can take inspiration from the Airbnb single property listing design, which handles responsiveness exceptionally well.

---

Problem

• Lack of Responsiveness: The current Facilities block layout becomes cluttered on smaller screens, making it difficult for users to view all the assigned categories in a clear and readable manner.
• Poor Mobile Experience: The block does not adapt well to various screen sizes, leading to poor user experience on mobile devices.

---

Proposed Solution

1. Responsive Grid Layout:

   • Update the Facilities block to use a responsive grid or flexbox layout that adjusts based on screen size.
   • On smaller screens (e.g., < 768px), stack the items vertically or arrange them in a single column.
   • On larger screens, use a multi-column layout to take full advantage of available space.

2. Mobile-First Approach:

   • Implement a mobile-first approach where the block is optimized for small screens first, then scales up for larger devices.
   • Ensure that touch targets for each facility item are large enough for easy navigation on mobile.

3. Spacing and Alignment:

   • Ensure proper spacing and padding between items to maintain a clean and readable design on all screen sizes.
   • Align icons, text, and other elements consistently for a polished look.

4. Inspiration from Airbnb:

   • Use the Airbnb single property listing as a reference for responsive design and layout.
   • Analyze how Airbnb handles the Facilities/Property Details section, especially the use of icons and text to create a clean, easy-to-read layout that adjusts seamlessly on mobile.

---

Task Breakdown

• [ ] Redesign the Facilities Block:

  • Implement a responsive grid or flexbox layout for the Facilities block on the single accommodation template.

• [ ] Optimize for Mobile:

  • Ensure the block is fully responsive, with special attention to mobile devices (320px, 375px, 414px).
  • Test the layout on various screen sizes to ensure proper responsiveness.

• [ ] Spacing and Typography:

  • Adjust spacing, padding, and typography to ensure readability on small screens while maintaining a clean, modern design on larger screens.

---

Additional Considerations

• Ensure that the Facilities block remains fully accessible and works well with screen readers.
• Keep touch targets large enough to accommodate easy navigation, particularly on smaller screens.

Completion Criteria

• The Facilities block is fully responsive across all device sizes.
• Layouts have been tested and perform well on mobile, tablet, and desktop views.
• The updated design improves user experience on mobile devices, similar to Airbnb’s responsive property listing pages.