Mobile-first dizayn — Azərbaycandakı real statistika

Azərbaycanda web trafikinin 78%-i mobil cihazlardan gəlir (StatCounter, 2025). Bu rəqəm hər il 2-3% artır. Lakin yerli dizayn agentliklərinin əksəriyyəti hələ də Photoshop-da 1440 px desktop dizaynı ilə başlayır, sonra mobil versiyanı “əlavə edir”. Bu, geriyə işləyən bir yanaşmadır, və saytın 78%-i istifadəçi üçün ikinci dərəcəli görüntü çıxır. Bu yazıda mobile first dizayn niyə vacibdir və yerli kontekstdə necə tətbiq olunur.

78% rəqəminin altında nə durur

Yerli kontekstdə mobil trafikin payı sektorlara görə:

Restoran və kafe — 88% mobil
E-ticarət (geyim, kosmetika) — 82% mobil
Yerli xidmət (təmir, stomatologiya) — 80% mobil
B2B xidmət — 65% mobil (qərarverici noutbookdan da baxır)
Mediya / xəbər — 92% mobil

B2B sektorlar istisna olmaqla, demək olar bütün biznes üçün mobil ilk dərəcəlidir. Desktop ikincilidir, üçüncülü deyil.

Mobile first dizayn nə deməkdir

Adi yanaşma: desktop dizayn yarat, sonra mobil üçün “sıxılma”. Bu, qaydaları geriyə pozur:

Mobil versiyada elementlər birbirinə yaxın yığılır
Mətn hökmü pozulur (h1 mobil-də çox böyük)
Navigation kompleks olur (desktop hover, mobil-də işləmir)
Şəkillər mobil-də ölçüsüz qalır (vertical formatda olmalı, horizontal var)

Mobile first dizayn: mobil 360 px ekrandan başla, sonra desktop üçün “genişləndir”. Hər element mobil-də işləməyə görə qurulur, desktop yalnız əlavə yer alır.

Texniki yanaşma — CSS düzgün ardıcıllıqla

Responsive dizayn üçün CSS yazma ardıcıllığı:

Baza stillər mobil üçündür
Media query yalnız böyük ekranlar üçün (min-width)

Tipik səhv:

/* SƏHV: desktop-first */
.hero { padding: 4rem 8rem; }
@media (max-width: 768px) {
  .hero { padding: 1rem; }
}

Doğru:

/* DOĞRU: mobile-first */
.hero { padding: 1rem; }
@media (min-width: 768px) {
  .hero { padding: 4rem 8rem; }
}

İki yanaşma eyni vizual nəticə verir, lakin mobile first daha sürətli açılır (mobil brauzer az kod parse edir), saxlanması asandır, və yeni breakpoint əlavə etmək daha səlistdir.

Mobil dizayn üçün spesifik qaydalar

Qayda 1: Toxunma hədəfi minimum 44 px

Apple HIG və Material Design standartı: hər tıklanan element minimum 44×44 px olmalıdır. Bu, barmaq toxunma sahəsindən gəlir. Daha kiçik elementlər (məsələn 32 px button) yanlış klik nisbətini artırır.

Qayda 2: Mətn ölçüsü minimum 16 px

Mobil-də 14 px mətn iOS-da avtomatik zoom yaradır (form input klik ediləndə). Bu, qıyma və UX problemidir. Minimum 16 px gövdə mətni.

Qayda 3: Bir sütun, ən çox iki

Mobil ekran 360–414 px enindədir. Üç sütunlu grid mobil-də işləmir (hər sütun 100–120 px, oxunmur). Doğru: mobil-də bir sütun, tablet-də iki, desktop-da üç-dörd.

Qayda 4: Thumb zone priority

İstifadəçi telefonu bir əli ilə tutur. Baş barmağın çata bildiyi sahə ekranın aşağı 70%-idir. Vacib aksiyaları (button, menyu) bu zona daxilində yerləşdir.

Qayda 5: Skrol uzunluğu məsələ deyil

Desktop dizaynında “foldon yuxarı” qaydası tarixçə mövcud idi — vacib içeriği ekran açılışında göstər. Mobil dizaynda bu qaydanı pozun: skrol normaldır, hətta gözləniləndir. İçeriği uzun, vertical formatda yerləşdirin.

Mobil sayt vs responsive sayt

İki yanaşma var:

Responsive sayt — bir sayt, ekran ölçüsünə uyğunlaşır
Ayrı mobil sayt (m.sayt.com) — ayrı domen-altda mobil versiya

İkinci yanaşma 2010-2015 arası standart idi, indi köhnə hesab edilir. Səbəblər:

İki sayt iki dəfə baxım tələb edir
SEO çətinləşir (eyni məzmun iki URL-də)
Müştəri linkləri qarışdırır

Modern yanaşma: vahid responsive sayt, mobile first qurulmuş.

Test prosesi — gerçək cihazda

Chrome DevTools-da mobil emulasiya kifayət deyil. Real cihazlarda test:

iPhone (Safari) — iOS xüsusi səhvlər var (input zoom, fixed positioning)
Android (Chrome) — orta-aşağı klass cihaz, çünki Azərbaycanda iPhone payı 30%-dir, qalanı Android
Tablet (iPad və ya Android tablet) — orta breakpoint test

Real cihazlarda toxunma, scroll, və klaviatura davranışı emulyatorda görünməyən səhvlər çıxarır.

Performance — mobil-də xüsusi vacibdir

Mobil bağlantı desktop bağlantıdan yavaşdır. 4G median sürət Azərbaycanda 30-50 Mbps, lakin metropoliten/kənd fərqi 5-50 Mbps. Mobil saytın performansı desktop saytının performansından 2-3 dəfə vacibdir, çünki:

Mobil CPU desktopdan zəifdir (JS execution daha gec)
Mobil bağlantı az stabil (paket itkisi)
Mobil ekran daha sıxdır (CLS yan effektləri daha görünür)

Mobil Lighthouse balı 90+ olmalıdır. Desktop balı 95+ olsa da, mobil 70-dirsə, sayt yavaşdır.

Yığılı keçid

Mobil dizayn — texniki çərçivə seçimi

Mobile first dizayn yalnız vizual qərar deyil — texniki seçimi də idarə edir. CSS framework seçimi:

Tailwind CSS — mobile-first defolt yanaşma, breakpoint sistemi (sm, md, lg, xl, 2xl) intuitiv
Vanilla CSS + custom properties — daha çox kontrol, daha az kod (modern brauzerlər üçün)
Bootstrap (köhnə) — desktop-first tarixi, 2026-cı il itibarı ilə az məsləhət olunur

Tailwind CSS yerli agentliklərdə geniş yayılmış. Vanilla CSS daha çox kontrolla, lakin yığım vaxtı uzundur.

Responsive dizayn — breakpoint strategiyası

Standart breakpoint sistemi:

Mobile — 360–640 px
Tablet — 640–1024 px
Desktop — 1024–1440 px
Wide — 1440+ px

Hər breakpoint-da layout dəyişməlidir, kiçik kosmetik düzəlişlər yox. Tipik səhv: yalnız bir breakpoint (mobile vs desktop). Tablet ortada qalır, və ekran yarımçıq görünür.

Real cihazlarda yerli test bazası

Azərbaycanda yayılmış cihazlar (2026 statistikası):

iPhone (12, 13, 14, 15) — 28% bazar
Samsung Galaxy (A və S seriyaları) — 32%
Xiaomi (Redmi, Mi) — 22%
Huawei, Realme, digər — 18%

Sayt minimum üç cihazda test olunmalıdır: iPhone (Safari), Android orta klass (Chrome), Android aşağı klass (Chrome, yavaş CPU). Aşağı klass Android testi xüsusilə vacibdir — performance problemləri burada görünür.

Mobile first dizayn — şüar deyil, riyaziyyatdır. Trafik 78% mobildir, ona görə əsas iş mobildədir. Desktop, ikinci yaxşılaşdırma layeri kimi əlavə olunur. Bu yanaşmanı qəbul etməyən agentlik 2026-cı il itibarı ilə zamanın gerisindədir. Qaynaq-da hər dizayn layihəsi 360 px ekranda başlayır, sonra desktop genişləndirilir — bu, “bonus” deyil, baza iş axınıdır.