[buddypress-trac] [BuddyPress Trac] #8666: Override banner design in buddypress.org home page for the mobile devices.

[buddypress-trac]

#8666: Override banner design in buddypress.org home page for the mobile devices.
---------------------------------------------+-----------------------------
 Reporter:  upadalavipul                     |       Owner:
                                             |  johnjamesjacoby
     Type:  defect (bug)                     |      Status:  closed
 Priority:  normal                           |   Milestone:  BuddyPress.org
                                             |  Sites
Component:  BuddyPress.org Sites             |     Version:
 Severity:  normal                           |  Resolution:  wontfix
 Keywords:  needs-design-feedback has-patch  |
---------------------------------------------+-----------------------------

Comment (by mzhansha):

 To address the issue of the banner design overriding on the BuddyPress.org
 homepage for mobile devices, an additional solution can be proposed as
 follows:

 Solution: Implement a Responsive Banner Redesign
 Instead of hiding the banner image, we can optimize the image and layout
 for responsiveness to maintain visual consistency across all devices.

  Steps:
 1. **Use a Responsive Image**:
    - Replace the current banner image with a responsive image using the
 `srcset` attribute in the `<img>` tag. This allows the browser to select
 the appropriate image size based on the device's resolution and screen
 size.
    ```html
    <img src="banner-small.jpg"
         srcset="banner-small.jpg 480w, banner-medium.jpg 768w, banner-
 large.jpg 1200w"
         sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 1200px"
         alt="Banner">
    ```

 2. **Implement CSS Media Queries**:
    - Adjust the banner's layout and dimensions using CSS media queries to
 ensure proper scaling and alignment on mobile devices.
    ```css
    @media (max-width: 768px) {
        .banner-section {
            padding: 10px;
            text-align: center;
        }
        .banner-section img {
            max-width: 100%;
            height: auto;
        }
    }
    ```

 3. **Reorganize Banner Content**:
    - For smaller devices, reorganize the content in the banner (such as
 headings, buttons, or descriptions) to stack vertically and center-align
 them for better readability and accessibility.
    ```css
    @media (max-width: 768px) {
        .banner-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
    ```

 4. **Lazy Loading for Performance**:
    - Add the `loading="lazy"` attribute to the image tag to improve page
 load time on mobile devices.

 5. **Testing and Optimization**:
    - Use browser developer tools to test the changes on various device
 resolutions.
    - Optimize images with a tool like TinyPNG or ImageOptim for faster
 loading.

 By redesigning the banner for responsiveness rather than hiding it, the
 solution ensures a visually appealing experience while maintaining the
 integrity of the design across all devices.

-- 
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/8666#comment:4>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac