Mobil-birinci dizayn prinsipləri elə bir strategiyadır ki, tərtibatçılar planşet və masaüstü tərtibatlarına keçməzdən əvvəl mobil təcrübəyə üstünlük verirlər. Ən kiçik ekran sahəsindən başlayaraq, əsas funksionallığa və vacib məzmuna diqqət yetirirsiniz. Bu yanaşma təbii olaraq istifadəçi səyahətlərini sadələşdirir və saytınızın bütün aparat təminatında yüksək məhsuldarlıqla işləməsini təmin edir. Google bütün vebsaytlar üçün mobil-birinci indeksləmədən istifadə etdiyindən və səhifələri əsasən onların mobil vizualizasiyasına görə indeksləşdirdiyindən, bu tərtibat yolu artıq axtarış görünürlüğünü hədəfləyən istənilən peşəkar veb layihə üçün əsas gözləntidir.
Niyə mobil-birinci indeksləmə sizin tərtibat iş axınınızı dəyişdirir?
Mobil-birinci indeksləməyə keçid o deməkdir ki, brauzer skaneri sizin saytınıza mobil istifadəçinin gözü ilə baxır. Əgər sizin mobil versiyanız məzmunu gizlədir və ya xüsusi strukturlaşdırılmış məlumatlardan məhrumdursa, Google həmin çatışmayan məlumata öz indeksində üstünlük verməyəcək. Tərtibatçılar əmin olmalıdırlar ki, saytın mobil versiyası masaüstü versiya ilə eyni əsas məzmunu ehtiva edir. Bu o demək deyil ki, tərtibat eyni olmalıdır, lakin məlumat dəyəri bərabər olmalıdır. Aşağıdan yuxarıya doğru qurduğunuz zaman masaüstü elementlərini mobil ekranlara sığdırmağa çalışan və tez-tez zəif məhsuldarlığa və gizli sayt xətalarına səbəb olan şişirdilmiş kod tələsinin qurbanı olmursunuz.
Mobil-birinci sayt arxitekturasının əsas sütunları
Mobil cihazlar üçün qurmaq aydın iyerarxiya tələb edir. İstifadəçinin etməli olduğu ən vacib əməliyyatı müəyyən etməklə başlayın, məsələn, səbətə məhsul əlavə etmək və ya əlaqə formasını göndərmək. Bu elementlər kiçikிகmanda ən görünən yeri tutmalıdır. Toxunma ekranları dəstəkləmədiyi üçün “hover” (kursoru üzərinə gətirmə) vəziyyətlərinə əsaslanan mürəkkəb qarşılıqlı təsirlərdən çəkinin. Bunun əvəzinə, barmaqlar üçün uyğunlaşdırılmış, ölçüsü ən azı 44×44 piksel olan aydın toxunma hədəflərindən istifadə edin. Əlavə olaraq, masaüstü üslublu üfüqi menyunu mobil başlığa məcbur etmək əvəzinə, yalnız lazımdırda genişlənən aydın şaquli sütunlara üstünlük verərək naviqasiyanızı sadə saxlayın.
- Əsas məzmuna üstünlük verin: Əsas dəyər təklifini ekranın yuxarı hissəsində yerləşdirin.
- Naviqasiyanı sadələşdirin: Kiçik ekranlar üçün yığıla bilən elementlərdən və ya sadə siyahılardan istifadə edin.
- Toxunma hədəflərini optimallaşdırın: Düymələrin və keçidlərin barmaqlar üçün uyğun məsafədə yerləşdiyinə əmin olun.
- Ağır resursları məhdudlaşdırın: Zəif mobil bağlantılarda yüklənmə vaxtını azaltmaq üçün WebP kimi şəkil formatlarından istifadə edin.
- Mərkəzləşdirmə dəyişikliklərini minimuma endirin: Stabil vizual tərtibatı qorumaq üçün vizualizasiya prosesi zamanı elementləri sabit saxlayın.
Qurğulararası miqyası necə effektiv şəkildə idarə etmək olar?
Effektiv miqyaslama CSS media sorğularına və çevik tərtibatlara əsaslanır. CSS-inizi yalnız mobil üçün nəzərdə tutulmuş baza ilə başlayın. Mürəkkəbliyi yalnız ekran eni artdıqca əlavə etmək üçün media sorğularından istifadə edin. Məsələn, mobil üçün tək sütunlu tərtibat planşetlərdə iki sütunlu şəbəkəyə və masaüstülərdə üç sütunlu tərtibata keçməlidir. Bu üsul üslub cədvəllərinizi təmiz saxlayır və lazımsız kodun mobil cihazlarda işləməsinin qarşısını alır. Əgər CSS Grid və ya Flexbox-dan istifadə edirsinizsə, məzmunun necə yenidən axacağını asanlıqla idarə edə bilər və ekran ölçüsündən asılı olmayaraq vizual ardıcıllığın məntiqli qalmasını təmin edə bilərsiniz.
Müasir veb tərtibatı üçün dizayn yanaşmalarının müqayisəsi
| Yanaşma | Məntiq | İdeal İstifadə Halları |
|---|---|---|
| Mobil-Birinci | Kiçikdən başla, yuxarı genişləndir | Məzmunla zəngin saytlar |
| Masaüstü-Birinci | Böyükdən başla, aşağı kiçilt | Köhnəlmiş idarəetmə panelinin miqrasiyası |
| Zərif Degradasiya | Tam funksional başla, sil | Mürəkkəb müəssisə proqram təminatı |
Alien Road mobil-birinci dizaynı necə tətbiq edir
Alien Road-da bizim prosesimiz məzmun auditi ilə başlayır. İstifadəçinin saytda yerinə yetirdiyi ən yaxşı üç tapşırığı müəyyən edirik və bunların mobil cihazda ön planda olmasını təmin edirik. Məsələn, e-ticarət brendi üçün tipik layihədə biz hər hansı masaüstünə xas dizayn elementinə toxunmamışdan əvvəl mobil ödəniş axınını xəritələşdiririk. Biz qlobal üslubları əvvəlcə tətbiq edən, sonra isə tərtibat mürəkkəbliyi əlavə etmək üçün min-width media sorğularından istifadə edən mobil-birinci üslub cədvəli strukturundan istifadə edirik. Bu, mobil istifadəçilər üçün mümkün olan ən yüngül yüklənməni təmin edir. Daha sonra toxunma hədəflərinin işlək qalmasını və şrift ölçülərinin istifadəçidən böyütməyi tələb etmədən oxunaqlı olmasını təmin etmək üçün üç ayrı ekran ölçüsündə əllə yoxlamalar həyata keçiririk.
Responsive (adaptiv) tətbiqdə ümumi səhvlər hansılardır?
Əsas problemlərdən biri kiçik ekranda sıradan çıxan sabit enli konteynerlərdən istifadə etməkdir. Konteyner elementləri üçün sərt kodlaşdırılmış piksel enləri əvəzinə həmişə faizlər, ekran ölçüsü vahidləri və ya flex-basis kimi nisbi vahidlərdən istifadə edin. Digər ümumi səhv mobil cihazda CSS vasitəsilə kiçildilən nəhəng şəkillərin yüklənməsidir. Bu, məlumatları israf edir və səhifəni ləngidir. İstifadəçinin cihazına əsasən müvafiq ölçülü şəkillər təqdim etmək üçün HTML-də ‘srcset’ atributundan istifadə edin. Tərtibatçılar bu resursları idarə edə bilmədikdə, sayt lazımsız bant genişliyi istehlak edir ki, bu da mobil şəbəkələrdə olan istifadəçilər üçün daha yüksək imtina göstəricilərinə (bounce rate) səbəb ola bilər.
Mobil məhsuldarlığın optimallaşdırılması üçün yoxlama siyahısı
- Sənəd başlığında ekran görünüşü meta teqinizin mövcud olduğunu yoxlayın.
- Xarici şrift faylı sorğularını azaltmaq üçün sistem şriftlərindən istifadə edin.
- Ümumi səhifə çəkisini 1.5MB-dan aşağı saxlamaq üçün bütün resursları sıxışdırın.
- Yalnız brauzer tərtibatçı aləti emulatorlarına güvənməkdənsə, real cihazlarda test edin.
- Bütün hərəkətə çağırışların (CTA) tək baş barmaq toxunuşu ilə əlçatan olduğundan əmin olun.
Bu həftə haradan başlamaq lazımdır
Kiçik ekranda necə göründüyünü görmək üçün saytınızı mobil yoxlayıcıdan keçirməklə başlayın. Üfüqi sürüşmə tələb edən hər hansı elementləri müəyyənləşdirin, çünki bu, tərtibatınızın həqiqətən adaptiv (responsive) olmadığını göstərən açıq əlamətdir. Bunları tapdıqdan sonra overflow hidden istifadə etmək və ya qüsurlu elementləri şaquli olaraq yığmaq üçün CSS-inizi tənzimləyin. Köhnəlmiş kodunuz varsa, mobil üçün xüsusi üslubları sənədinizin yuxarı hissəsinə köçürmək üçün əsas CSS-inizi yenidən nəzərdən keçirməyi düşünün. Bu sadə dəyişiklik brauzerə yalnız masaüstü təriflərinin təhlil olunmasını gözləmədən mobil versiyanı mümkün qədər tez vizuallaşdırmağa imkan verir.
Tez-tez Verilən Suallar
Mobil və masaüstü üçün iki ayrı URL saxlamaq lazımdırmı?
Xeyr, ayrı URL-lərə ehtiyac yoxdur. Responsive veb dizayn sənaye standartıdır. Tək URL istifadə etməklə və bütün cihazlara eyni HTML-i təqdim etməklə saytınızın idarə edilməsini sadələşdirir və bütün sosial siqnalların və geri keçidlərin (backlinks) tək mənbəyə yönəldiyini təmin edirsiniz. Google ayrı mobil saytlardan üstün olaraq responsive dizayna üstünlük verir, çünki o, kanonizasiya mürəkkəbliyini və potensial təkrarlanan məzmun problemlərini aradan qaldırır.
Mobil-birinci dizayn masaüstü məhsuldarlığına zərər verirmi?
Mobil-birinci dizayn masaüstü məhsuldarlığına zərər vermir. Əslində, o, çox vaxt tərtibatçıları daha incə, daha səmərəli kod yazmağa təşviq etməklə bunu yaxşılaşdırır. Minimal mobil vəziyyətdən qurduğunuz üçün masaüstü versiyası lazımsız masaüstü artıqlarını təmizləmək əvəzinə qatlar əlavə etməklə qurulur. Bu əlavəetmə yanaşması bütün cihazlarda daha təmiz üslub cədvəlləri və daha sürətli icra vaxtları ilə nəticələnir.
Mən mobil cihazlarda mürəkkəb məlumat cədvəllərini necə idarə edə bilərəm?
Mürəkkəb cədvəllərin idarə edilməsi yaradıcılıq tələb edir. Geniş məlumat dəstləri üçün üfüqi sürüşmə konteynerlərindən istifadə edə və ya mobil ekranlar üçün cədvəli siyahı əsaslı kart tərtibatına çevirə bilərsiniz. Məqsəd cədvəlin səhifə tərtibatını pozmadan istifadəçinin məlumatları yenə də oxuya bilməsini təmin etməkdir. Həmişə ən vacib sütunlara üstünlük verin və ikincil məlumatları genişləndirmə düyməsinin arxasında gizlətməyi düşünün.
Mobil-birinci dizayn yalnız ekran ölçüsü ilə bağlıdır?
Mobil-birinci dizayn təkcə ölçülərdən ibarət deyil; o, məhsuldarlıq və istifadəçi davranışıdır. Mobil istifadəçilər tez-tez daha zəif internet bağlantısına, daha az emal gücünə və məhdud vaxta malikdirlər. Əvvəlcə mobilə diqqət yetirməklə, siz daxilən daha sürətli, daha əlçatan və istifadəsi daha asan olan sayt qurursunuz. Bu təməl məzmununuza daxil olmaq üçün hansı cihazdan istifadə etməsindən asılı olmayaraq hər bir ziyarətçiyə fayda verir.
Oxumağa davam edin: Veb Dizayn və Tərtibatı · Veb Dizayn