Requirements: Layout of a responsive website Pixel Perfect based on the design developed in Figma. (link to the design below)
Goal: Creation of a responsive website https://zoodom.ua and valid W3C (will be checked), correctly displayed on mobile, tablet, and desktop devices, meeting modern UX/UI requirements and Google's mobile optimization requirements in 2024.
Technologies: Use of HTML5, CSS3, JavaScript (ES6+), SCSS/LESS (if necessary). The layout should be cross-browser (Chrome, Safari, Firefox, Edge) and responsive for all major screen resolutions.
1. Screen resolutions and breakpoints
To ensure correct display on all devices, the following breakpoints must be set (Intermediate resolutions must display blocks without shifts and without horizontal scrolls):
- Mobile devices:
- Minimum resolution: 320px (for example, iPhone SE, old smartphones).
- Main mobile resolution: 360px – 414px (for example, iPhone X, Galaxy S10).
- Tablets:
- Minimum resolution: 768px (for example, iPad Mini).
- Tablets (portrait): 768px – 1024px (for example, iPad).
- Tablets (landscape): 1024px – 1366px (for example, iPad Pro).
- Desktops:
- Minimum resolution: 1280px.
- Recommended resolutions for desktops: 1440px and above
For each breakpoint, appropriate styles must be set to ensure optimal content display.
2. Technical requirements for layout
- Grid: Use of a grid (CSS Grid) system to ensure the responsiveness of the layout (without builders. The use of Flexbox is possible with justification).
- Animations and transitions: The use of CSS animations should be smooth and minimal, considering performance on mobile devices. (animation wishes in the attached file)
Where there are sliders - automatic scrolling of elements every 3 seconds.
- Image optimization: Images must be adapted for different resolutions using WebP formats and lossless compression. Mechanisms for lazy loading images must also be implemented.
- Icons and graphics: Use SVG for icons and graphics to ensure high quality on all screens.
- Typography: Font sizes should dynamically change depending on the screen resolution.
- Media queries: All media queries must be clearly structured and support the main breakpoints.
3. Verification and testing
- Layout testing must be conducted on real devices, as well as in browser emulators to confirm correct operation on all supported resolutions and operating systems (iOS, Android).
Priority screen sizes for testing:
1. 393x873:
- Xiaomi Mi 10T, Mi 10T Pro
- Xiaomi Redmi Note 9 Pro
- Xiaomi Redmi Note 9
2. 390x844:
- iPhone 14
- iPhone 13 and 13 Pro
- iPhone 12 and 12 Pro
3. 360x800:
- Samsung Galaxy S20
- Honor 7X
- Huawei P40 Lite
4. 414x896:
- iPhone 11 Pro Max
- iPhone 11
- iPhone Xr
5. 430x932:
- iPhone 14 Pro Max
6. 393x851:
- Google Pixel 5
- Xiaomi Mi 10 Pro
- Xiaomi Redmi Note 8 Pro
7. 412x915:
- OnePlus 7T
Priority browsers for testing:
Chrome and Safari
- Mandatory verification of the layout for content overflow. The layout should not break:
- when adding more text to elements;
- when using images with inappropriate sizes;
- text should not fall out of objects;
- content overflow should not lead to grid disruption.
- Verification through Google Mobile-Friendly Test and PageSpeed Insights tool to assess performance and compliance with mobile standards.
4.SEO.
-SEO information on metadata on pages will be provided separately.
5. Design.
- The design is created with a perspective for project development. Therefore, additional explanations will be given on which blocks do not need to be laid out at the moment.
- If necessary, there is a possibility of making changes to the design (the designer is available for communication).
6. Conclusion
The layout must be completed considering all the above parameters (but not limited to them for achieving the best results), including responsiveness and optimization for mobile devices.
Upon completion of the layout work, a testing period is provided - one week from the moment of receiving the last comment.
7. Functionality. A preliminary document describing the functionality of blocks and elements will be provided. Ready to discuss unclear functional elements in the design, both in advance and during the collaboration process.
Design for layout: https://www.figma.com/design/RPrjahTERmhbN3g9uKL6Eo/%D0%97%D0%BE%D0%BE%D0%B4%D1%96%D0%BC_website?node-id=0-1&node-type=canvas
If there are additional questions or clarification is needed on specific sections, I am ready to answer.
