Requirements: Layout of a responsive website Pixel Perfect based on the design developed in Figma. (link to the design at the bottom of the description)
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 must 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 widths should display blocks without shifts and without horizontal scrolls):
- Mobile devices:
- Minimum resolution: 320px (for example, iPhone SE, older 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 (no builders. Use of Flexbox is possible with justification).
- Animations and transitions: Application of CSS animations should be smooth and minimal, considering performance on mobile devices (animation wishes are 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, which will 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
- Mandatory check 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;
- overflow of content blocks does not lead to grid disruption.
- Check 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 current 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 requirements for 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.
Layout for the 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
Proposals with examples of work are considered
If there are additional questions, or clarification is needed on specific sections, I am ready to answer.
