Make public pages mobile friendly (responsive)

[luistoptal]

User story

As a website user
I want the public pages of the website to be responsive across devices
So that I enjoy a smooth, consistent experience regardless of screen size

Acceptance criteria

Given: The current home page layout
When: Viewed on mobile, tablet, and desktop devices
Then: The layout adjusts gracefully without horizontal scrolling or layout breakage

Given: The common header and footer components
When: Displayed on varying screen sizes
Then: They resize and reorganize as needed to remain legible and fully functional

Given: The dataset page content
When: Viewed on different devices
Then: It provides a responsive layout, matching the improvements on the home page and common elements

Additional Info

• Focus on low-hanging fruit first: Home page, header, and footer.
• Secondary focus should be dataset page
• Lastly, focus on other public pages
• Validate with common breakpoints (e.g., 320px, 768px, 1024px).

Product Backlog Item Ready Checklist

• Business value is clearly articulated
• Item is understood enough by the IT team so it can make an informed decision as to whether it can complete this item
• Dependencies are identified and no external dependencies would block this item from being completed
• At the time of the scheduled sprint, the IT team has the appropriate composition to complete this item
• This item is estimated and small enough to comfortably be completed in one sprint
• Acceptance criteria are clear and testable
• Performance criteria, if any, are defined and testable
• The Scrum team understands how to demonstrate this item at the sprint review

Product Backlog Item Done Checklist

• Item(s) in increment pass all Acceptance Criteria
• Code is refactored to best practices and coding standards
• Documentation is updated as needed
• Data security has not been compromised (with particular reference to the personal information we hold in GigaDB)
• No deviation from the team technology stack and software architecture has been introduced
• The product is in a releasable state (i.e. the increment has not broken anything)

[rija]

In 2024, visitors to gigadb.org, by resolution and device types:

[luistoptal]

@rija thanks for these analytics

okay I see 10% of users access the site via smartphone

I am going to conjecture that the data is biased in favor of the editors who primarily use the admin panel which does not need to be responsive, also I could imagine if a user visits the site from a mobile device and the site looks broken maybe they will leave immediately and access the site via desktop, if that is true then the "importance of the user intent" on visiting the site on mobile would be larger than the raw numbers suggest, so I would say this task is worth doing