ადაპტირებული დიზაინი და მოტეხილობის წერტილები

1) პრინციპები

1. შინაარსის პირველი: მოდელები აგებულია დავალებებისა და შინაარსისგან და არა „პოპულარული“ სიგანეებიდან.
2. მობილური პირველი: ჩვენ ვიწყებთ მკაცრი მარტივი ვერსიით და გართულებულია, როგორც შეყვანის სიგანე/შესაძლებლობები იზრდება.
3. პროფესიული განვითარება: ძირითადი UX მუშაობს JS/ანიმაციების გარეშე; გაუმჯობესება დაკავშირებულია პირობებით.
4. Consistence: იგივე ნიმუშები იგივე ქცევაა ყველა ბრეიკპოინზე.
5. სპექტაკლი: სურათები, ბადეები და სკრიპტები ადაპტირებულია წონისა და სირთულის მიხედვით.

2) მოტეხილობის წერტილები (ბრეიკპოინები)

ჩვენ ვირჩევთ რეალურ მოწყობილობებს და ნიმუშის შეცვლას (სვეტები/ნავიგაცია/ტიპოგრაფია).

რეკომენდებული ნაკრები (სახელმძღვანელო)

• ბრეიკპოინტის შემოღება ხდება მხოლოდ სტრუქტურის შეცვლისას (მაგალითად, ბარათების 1-2 სვეტი, სეიდბარის გამოჩენა).
• ადგილობრივი შესვენება კომპონენტის შიგნით (კონტეინერის მოთხოვნები) დასაშვებია.

3) კონტეინერის მოთხოვნები მედია ფასებში

როდესაც მედია ფასები '@ media': იცვლება მთელი გვერდი (ნავიგაცია, შაბლონი).
როდესაც კონტეინერი '@ container': ბარათი/ვიჯეტი უნდა იყოს მორგებული მისი ხელმისაწვდომი სიგანეზე (კომპონენტი არ შეესაბამება გვერდს).

css
/ Включаем контейнерную оценку для блока /
.widget { container-type: inline-size; }

/ Внутри — адаптируем карточку по ширине контейнера /
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

გამოიყენეთ კავშირი: მედია გვერდის ჩარჩოსთვის + კომპონენტებისთვის კონტეინერები.

4) სტამბა: fluid + ნაბიჯები

დააკავშიროთ 'clamp ()' და ნაბიჯები breikpoints.

css
:root {
/ Базовая fluid-гарнитура /
--fs-body: clamp(15px, 1.2vw + 0.2rem, 18px);
--fs-h2:  clamp(20px, 1.6vw + 0.4rem, 24px);
}
body { font-size: var(--fs-body); line-height: 1.55; }
h2  { font-size: var(--fs-h2);  line-height: 1.3; }
@media (min-width: 1200px) {
h2 { letter-spacing:.005em; } / тонкая настройка на LG+ /
}

• ხაზის სიგრძე 45-80 სიმბოლოა (გვერდითი ბარებზე 36-60).
• სიდიდეების ნაბიჯები მრავლდება 4/8-pt; line-height სტაბილურია breikpoints.

5) ბადეები და მოდულები

სექციების დონეზე - CSS Grid (სვეტები, რეგიონები); შიგნით - Flex.
კომპონენტების სიმაღლეები მრავალჯერადია (მაგ., 40/48/56 px).
ჩვენ გვაქვს 2 მოდელის სიმკვრივე: Comfort (კითხვა/დაშბორდები) და Compact (ცხრილი/o).

css
.container {
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0,1fr));
max-width: 1280px; margin: 0 auto; padding: 0 16px;
}
@media (max-width: 1199px) {.container { grid-template-columns: repeat(8,1fr); gap: 20px; }}
@media (max-width: 839px) {.container { grid-template-columns: repeat(6,1fr); gap: 16px; }}
@media (max-width: 599px) {.container { grid-template-columns: repeat(4,1fr); }}

6) სურათები და მედია

html
<img src="card-640.jpg"
srcset="card-640.jpg 640w, card-960.jpg 960w, card-1280.jpg 1280w"
sizes="(min-width:1200px) 33vw, (min-width:840px) 50vw, 100vw"
alt="Описание">

css
.media { aspect-ratio: 16/9; object-fit: cover; }

ფონებისთვის - 'image-set ()' და lazy-loading.
გამოსახულების ტექსტი - მხოლოდ plash/verellay; კონტრასტი AA.

7) ნავიგაცია და რეპონსული ნიმუშები

XS/SM: bottom-nav ან hamburger, შესამჩნევი CTA; ფარული ძებნა ვლინდება თავზე.
MD: ჩნდება persistent-sidebar/mega-menu.
LG/XL: ნავიგაციის ორი დონე, სწრაფი ფილტრები, პურის ნამსხვრევები.

ქცევა: ელემენტები ქაოტურად არ მოძრაობენ - ყოველთვის წინასწარ აღწერილი სქემების ერთ-ერთი.

8) შეყვანა: hover/touch/keyboard

css
@media (hover: hover) and (pointer: fine) { / hover-эффекты / }
@media (hover: none), (pointer: coarse)  { / touch-паттерны / }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• არ არის კრიტიკული შინაარსი „მხოლოდ ჰოვერში“.
• დაწკაპუნების ზონები: 44 × 44 ევრო (მობ.) , 32 × 32 (დესკტოპი).
• კლავიატურა მხარს უჭერს ყველა ბრეიკპოინტს.

9) უსაფრთხო ზონები და სისტემური ჭრილობები

css
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom:max(16px, env(safe-area-inset-bottom));
}

10) ბნელი/ნათელი თემები და კონტრასტი

თემები ბრეიკპოინტებისგან დამოუკიდებელია: კონტრასტის მიზნები ყველგან იგივეა.
XS- ზე თავიდან ავიცილოთ „მჟავა“ აქცენტები; ჩვენ ვზრდით ბმულების შუქს ბნელ ფონზე.
მხარდაჭერა 'prefers-color-scheme' და სახელმძღვანელო კონცენტრატორი.

11) პროდუქტიულობა

კრიტიკული CSS - inline ან 'media = „print “/preload სტრატეგიის საშუალებით; JS დატვირთულია შეფერხებით.
მოერიდეთ layout მძიმე ანიმაციებს გრძელი სიებით; ანიმაცია 'opacity/ტრანსფორმაცია'.
სურათების/ვიჯეტების ზარმაცი დატვირთვა; skeleton სპინერების ნაცვლად.
შეზღუდეთ „მძიმე“ ჩრდილები/ფილტრები ათეულობით ბარათზე.

12) დიზაინის სისტემის ნიშნები (მაგალითი)

json
{
"breakpoints": { "xs": 360, "sm": 600, "md": 840, "lg": 1200, "xl": 1440 },
"container":  { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"columns":   { "xs": 4, "sm": 6, "md": 8, "lg": 12 },
"gutter":   { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"space":    { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 }
}

css
:root {
--bp-sm: 600px; --bp-md: 840px; --bp-lg: 1200px; --bp-xl: 1440px;
--container-lg: 1152px;
}
@media (min-width: var(--bp-lg)) {
.container { max-width: var(--container-lg); }
}

13) კომპონენტების პრაქტიკა (კონტეინერის შესვენება)

css
.card { display: grid; gap: 12px; container-type: inline-size; }
.card__media { aspect-ratio: 4/3; }
@container (min-width: 420px) {
.card { grid-template-columns: 1fr 1.2fr; align-items: center; }
.card__media { aspect-ratio: 16/9; }
}

• XS: stacked ხედი (ეტიკეტი მარცხნივ, მნიშვნელობა მარჯვნივ, ბლოკებით).
• SM +: ჰორიზონტალური ნაკერი მხოლოდ სვეტების ჭარბი რაოდენობით, დააფიქსირეთ ქუდი/პირველი სვეტი.
• რიცხვები - tabular-nums, ათობითი.

14) ლოკალიზაცია და RTL

'dir = „rtl“' + ': dir (rtl)' ხატები/მსროლელი/margin-ov.
გადარიცხვებმა შეიძლება გაზარდოს ხაზების სიგრძე 20-30% -ით - დააწესეთ რეზერვი.
ზოგიერთი მწერლისთვის (მაგალითად, ქართული/ტაილანდური) გაზარდეთ ძირითადი რქა 1 px- ით.

15) iGaming სპეციფიკა

ტურნირების/პრემიების ბარათები: ქსელი 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA და პირობები მუდმივ ზონაშია.
ლიდერები/რეიტინგები: sticky ქუდი/პირველი სვეტი; XS - stacked რეჟიმი; რიცხვები მონოშირიანია.
გადახდის ფორმები: XS - ერთსაფეხურიანი; MD - 2 სვეტი (ველი + ახსნა).
პასუხისმგებელი შეტყობინებები (18 +, ლიმიტები, რისკები): ყოველთვის ჩანს ყველა ბრეიკპოინტზე, AAA- ს კონტრასტზე, „ჰოვერში დამალული“ გარეშე.

16) ანტი შაბლონები

დაფიქსირებული ბლოკის სიგანე ქსელის/სვეტების ნაცვლად.
„მოტეხილობის წერტილი თითოეული პიქსელისთვის“: ძალიან ბევრი მედია პუნქტი - ქაოსი.
გატეხილი რიტმი: მეზობელ მონაკვეთებში სხვადასხვა gutter/ველები უპრობლემოდ.
კრიტიკული ტექსტი გამოსახულების გარეშე.
შინაარსი, რომელიც ხელმისაწვდომია მხოლოდ hover- ით (tache- ზე მიუწვდომელია).
Layout თვისებების ანიმაცია გრძელი სიებით.

17) QA ჩეკის სია

ბადე და კონტეინერები

• სვეტები და გუტერი შეესაბამება ბრეიკპოინტებს; კონტეინერები ორიენტირებულია.
• კომპონენტები სწორად „მიედინება“ 1-2-3 სვეტები შეფერხების გარეშე.

სტამბა

• ხაზის სიგრძე 45-80; fluid with 'clamp ()'.
• ტექსტის კონტრასტი შეესაბამება WCAG- ს ორივე თემაში.

სურათები

• Есть `srcset/sizes`, `aspect-ratio` и lazy-loading; არა CLS.

შეყვანა და A11y

• კლავიატურის ნავიგაცია; ': focus-visible' ჩანს.
• ჰოვერის ალტერნატივა პაკეტებზე; დაწკაპუნების ზონები - 44 × 44.
• prefers-reduced-motion 'მხარს უჭერს.

პროდუქტიულობა

• ანიმაცია ხდება მხოლოდ 'ტრანსფორმაცია/opacity'; მძიმე ეფექტები შეზღუდულია.

კრიტიკული CSS/JS ეფექტურად იტვირთება.

18) დოკუმენტაცია დიზაინის სისტემაში

Responsive & Breakpoints: Breakpoints ცხრილი, კონტეინერები, სვეტები და gutter.
Container Queries: ადაპტირებული კომპონენტების მაგალითები.
„Fluid Type“: ფორმულები 'clamp ()' და მასშტაბების რეკონსტრუქცია.
„ნავიგაციის ნიმუშები“: XS/SM/MD/LG/XL პარამეტრები.
„Do/Don 't“ მოკლე კლიპებითა და CLS/LCP მნიშვნელობებით.

მოკლე რეზიუმე

ადაპტაცია არის სტრატეგია და არა ქაოტური მედია პროექტების ერთობლიობა. დაეყრდნეთ მოწყობილობების შინაარსსა და ანალიზს, დააკავშირეთ მედია პროდუქტები სექსუალურ ქსელთან და კონტეინერულ მოთხოვნებთან, გამოიყენეთ 'კლამპი ()' ტიპოგრაფიისთვის, აკონტროლეთ სურათები და შესრულება, შეინარჩუნეთ შეყვანის ყველა მეთოდი და A11y. ასე რომ, ინტერფეისი რჩება პროგნოზირებადი, სწრაფი და თანაბრად მოსახერხებელი ნებისმიერ ეკრანზე.