wteo / photogallery Goto Github PK

Description:

The current landing page features a hidden navigation menu on the left side, which is partially visible due to its right padding and lacks a hamburger menu icon. On desktop devices, the menu appears when the mouse hovers near the padding, while a tap is needed on mobile devices. This issue seeks to enhance the visibility and usability of the navigation menu by:

• Adding a hamburger menu icon and refining the menu size and behavior on desktop devices.
• Replacing the navigation menu with a tab bar for mobile devices.

Acceptance Criteria:

For desktop devices:

• Add a clearly visible hamburger menu icon to the navigation menu, adhering to modern design standards.
• Adjust the menu behavior to slide into view upon clicking the hamburger menu icon, instead of appearing when the mouse hovers near the padding.
• Implement a feature that slides the menu back to its hidden state after a user selects a link, with the hamburger menu icon reappearing when the menu is hidden.

For mobile devices:

• Replace the navigation menu with a tab bar, creating a more engaging and user-friendly experience.

For both devices:

• Ensure that the menu modifications are responsive and compatible with various device sizes and screen orientations.

Testing:

• Test the updated navigation menu on a range of devices (e.g., desktop, laptop, tablet, and smartphone) and browsers (e.g., Chrome, Firefox, Safari, and Edge) to verify proper display, visibility of the hamburger menu icon, and consistency in menu behavior across all platforms.
• Assess the menu behavior on different network speeds (e.g., broadband, 4G, and 3G) to confirm that the updates do not adversely affect the load time or overall performance of the landing page.
• Conduct accessibility testing (e.g., using screen readers or magnifiers) to make sure that the updated navigation menu does not negatively impact the landing page's accessibility.

Description:
The current landing page, which showcases travel photos from Bali, is experiencing slow load times due to the large size of the uploaded images. In order to improve the user experience and retain visitors, it is necessary to compress the images whilst maintaining their quality. This issue aims to address the optimisation of the existing images and the implementation of an efficient compression method.

Acceptance Criteria:

• Identify all images on the landing page that contribute to the slow load time.
• Research and select an appropriate image compression tool or library (e.g., TinyPNG, ImageOptim, or a similar service) that maintains image quality whilst reducing file size.
• Apply the chosen compression method to all identified images, ensuring that the visual quality remains consistent with the original versions.
• Update the landing page with the optimised images and ensure that they are correctly displayed.
• Measure the new load time of the landing page and confirm that it has significantly decreased compared to the initial load time. Aim for at least a 50% reduction in load time.
• Verify that the image quality has been preserved after compression by visually comparing the optimised images with their original versions.

Testing:

• Test the landing page on various devices (e.g., desktop, laptop, tablet, and smartphone) and browsers (e.g., Chrome, Firefox, Safari, and Edge) to ensure the optimised images are displayed correctly and consistently across all platforms.
• Test the landing page load time on different network speeds (e.g., broadband, 4G, and 3G) to ensure that the improvements in load time are consistent across various connection types.
• If applicable, perform accessibility testing (e.g., using screen readers or magnifiers) to ensure that the optimised images do not negatively impact the accessibility of the landing page.