You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by "adarsh-priydarshi-5646 (via GitHub)" <gi...@apache.org> on 2025/10/21 13:41:55 UTC
[I] [Site]: UI & Mobile Responsiveness Improvements [apisix-website]
adarsh-priydarshi-5646 opened a new issue, #1961:
URL: https://github.com/apache/apisix-website/issues/1961
### Current State
**Description of the current state/issue**:
Currently, several sections of the website show inconsistent UI behavior and responsiveness issues across devices.
- The hero section background and text readability are slightly unbalanced due to low contrast.
- Architecture section text overflows on smaller screens.
- Features and CTA sections have inconsistent font sizing and button spacing.
- Buttons lack consistent hover effects and touch optimization on mobile devices.
These issues impact user experience and visual consistency on both desktop and mobile views.
**Link to the page**:
https://apisix.apache.org/
**Screenshots (if relevant)**:
**Before:**
<img width="1512" height="817" alt="Image" src="https://github.com/user-attachments/assets/48839bb0-9557-4842-8ef6-26d9144f86a1" />
<img width="621" height="824" alt="Image" src="https://github.com/user-attachments/assets/7839b87b-0b31-4adb-ba34-19a63337927c" />
<img width="621" height="578" alt="Image" src="https://github.com/user-attachments/assets/c6aef915-edef-42c2-98db-bd4ef9e35534" />
<img width="621" height="578" alt="Image" src="https://github.com/user-attachments/assets/eeb52ae6-eba3-4155-985d-370996d1c524" />
---
**After (Fix Preview):**
<img width="1512" height="818" alt="Image" src="https://github.com/user-attachments/assets/9dd5330b-f7a7-411d-ad20-fef90e769a4b" />
<img width="621" height="824" alt="Image" src="https://github.com/user-attachments/assets/f04ac39b-8ec2-4725-9c9b-b5b40570d3b2" />
<img width="621" height="578" alt="Image" src="https://github.com/user-attachments/assets/aca9f1a3-b11b-4b70-91f3-28ba614b30a5" />
<img width="621" height="578" alt="Image" src="https://github.com/user-attachments/assets/56eedb20-c0e3-46c4-928d-53fdfb34cc36" />
### Desired State
**Description of the change you are proposing**:
This update focuses on improving the overall user interface consistency and mobile responsiveness of the Apache APISIX website. The goal is to make the design more balanced, readable, and responsive across all devices.
## Hero Section
Enhanced the background visibility by applying refined CSS filters for better contrast, brightness, and saturation.
Added a subtle backdrop blur to improve text readability and maintain clarity.
Adjusted button styling and layout to create a better visual hierarchy.
## Architecture Section
Fixed text overflow issues by adding proper wrapping and container constraints.
Improved spacing and alignment for smaller screens.
## Features Section
Adjusted typography, font sizes, and layout structure to improve readability on tablets and mobile devices.
## End CTA Section
Optimized button size, padding, and spacing for a smoother mobile experience.
## Button Improvements
Standardized button design across all sections.
Added consistent hover transitions and color effects.
Improved button sizing and touch targets for mobile accessibility.
## Technical Enhancements
Implemented progressive text scaling for smooth responsive transitions.
Ensured proper CSS containment to prevent overflow issues.
Optimized CSS for better performance and rendering.
Maintained full cross-browser compatibility.
## Device Coverage
- Desktop: Improved background visibility and balanced layout.
- Tablet (768px): Refined spacing and text sizing.
- Mobile (480px): Compact, readable, and user-friendly layout.
- Extra Small (360px): Optimized ultra-compact adjustments for small screens.
All improvements are backward-compatible and enhance the overall user experience across devices.
### Would you like to fix this issue?
Yes! Count me in
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] [Site]: UI & Mobile Responsiveness Improvements [apisix-website]
Posted by "yzeng25 (via GitHub)" <gi...@apache.org>.
yzeng25 commented on issue #1961:
URL: https://github.com/apache/apisix-website/issues/1961#issuecomment-4285265616
Closing this due to prolonged inactivity.
We periodically close issues that haven’t seen updates in a long time to keep the tracker manageable. If this is still relevant, please reopen with up‑to‑date details or open a new issue referencing this one.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] [Site]: UI & Mobile Responsiveness Improvements [apisix-website]
Posted by "yzeng25 (via GitHub)" <gi...@apache.org>.
yzeng25 closed issue #1961: [Site]: UI & Mobile Responsiveness Improvements
URL: https://github.com/apache/apisix-website/issues/1961
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [I] [Site]: UI & Mobile Responsiveness Improvements [apisix-website]
Posted by "ayush00git (via GitHub)" <gi...@apache.org>.
ayush00git commented on issue #1961:
URL: https://github.com/apache/apisix-website/issues/1961#issuecomment-3901360916
Hey @yzeng25
If this issue is open, i would like to work on it
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org