Hi Team,

I’m sharing the high-level strategy for the SIDF Portal Mobile Responsiveness project.

Our goal is to adapt the existing platform for mobile browsers (Responsive Web) in 7 phases, ensuring full bilingual support (English/Arabic) without changing the business logic.

🎨 Visual Board & Analysis I have mapped out the full roadmap, user flows, and component structure. Please review the details here: 👉 [Insert Your FigJam Link Here]

📅 Next Steps To kick this off, we need to schedule two short sessions:

1. Dev Sync: To review technical constraints (Grid libraries, RTL, and Signature handling).
2. Estimation: To finalize the timeline and effort for each of the 7 phases.

Let me know your availability for these sessions.

Best regards,

This detailed breakdown maps every page in your roadmap to the specific UI Components required from your Design System.

1. Frontend Architecture (The "Card View" Challenge)

Context: We are replacing rigid desktop tables with flexible mobile cards. We need to know if the current code allows this flexibility.

• Q1: Grid Library Capabilities: "We know the desktop site uses a data grid library. Does this library support a 'Responsive Mode' that automatically stacks rows into cards at specific breakpoints (e.g., <768px)? Or will you need to create a separate HTML structure (using CSS Flexbox/Grid) specifically for the mobile view?"
• Q2: CSS Framework: "Are you using a CSS framework like Bootstrap, Tailwind, or Angular Material? If so, can we utilize their pre-built 'Card' and 'Accordion' components to speed up development, or are all components custom-built?"

2. Localization (Arabic/RTL Strategy)

Context: Mobile layouts are sensitive to direction changes. We need to ensure the Arabic view doesn't break the layout.

• Q3: RTL Implementation: "How is the RTL mirroring currently handled in the code?
  • Option A: Do you use Logical CSS Properties (e.g., margin-inline-start instead of margin-left)?
  • Option B: do you flip stylesheets entirely?
  • Why we ask: This dictates how we annotate our designs. Logical properties are preferred for responsive mobile web."
• Q4: Font Scaling: "The Arabic font often requires more vertical line height than English to be readable on small screens. Is there a global variable for line height we can adjust for mobile specifically?"

3. Performance & Data Handling

Context: The RFP and RMI Details pages have massive amounts of data that we are putting into Accordions.